使用input tpe='file'便签上传图片，js设置显示预览图片

之前写图片上传的预览功能，都是上传时通过ajax请求把图片传给后台，然后后台返回服务器图片路径，然后再显示预览提，现在可以直接通过js就可以预览上传的图片，真的很方便，这个功能是做项目的时候同事写的，我搬过来用，发现很不错，值得分享呢，如果有什么不足可以指出来哦。

js代码

<script>
   window.URL = window.URL || window.webkitURL;
   function changeFile(obj) {
       var files = obj.files;
       img = new Image();
       if (window.URL) {
           img.src = window.URL.createObjectURL(files[0]); //创建一个object URL，并不是你的本地路径
           //设置预览图片宽高，
           // img.width = 60;
           // img.height = 60;
           img.onload = function(e) {
               window.URL.revokeObjectURL(this.src); //图片加载后，释放object URL
           }

       } else if (window.FileReader) {
           //opera不支持createObjectURL/revokeObjectURL方法。我们用FileReader对象来处理
           var reader = new FileReader();
           reader.readAsDataURL(files[0]);
           reader.onload = function(e) {
               img.src = this.result;
               // img.width = 60;
               // img.height = 60;
           }
       } else {
           //ie
           obj.select();
           obj.blur();
           var nfile = document.selection.createRange().text;
           document.selection.empty();
           img.src = nfile;
           // img.width = 60;
           // img.height = 60;
           img.onload = function() {}
       }
       let uploadImgBox =document.getElementById('uploadImgBox');
       uploadImgBox.innerHTML = '';
       uploadImgBox.appendChild(img)
   }
</script>

html代码

	<label for="mypic">选择上传的图片文件</label></br>
    <input type="file" name='mypic' accept="image/*" onchange="changeFile(this)">
    <div id="uploadImgBox">预览图片区</div>

上传图片前效果图

上传图片后效果图