js上传图片并实现预览

最新推荐文章于 2024-03-25 11:12:07 发布

追求者2016

最新推荐文章于 2024-03-25 11:12:07 发布

阅读量8.6k

点赞数 6

分类专栏： JavaScript 前端文章标签： h5上传 js上传前端上传预览

本文链接：https://blog.csdn.net/example440982/article/details/88541310

版权

JavaScript 同时被 2 个专栏收录

69 篇文章 0 订阅

订阅专栏

前端

19 篇文章 1 订阅

订阅专栏

js上传图片预览

前端页面

<!--单图上传 start-->
<input type="file" accept="image/*" onchange="uploadImg(event,this)">
<!--单图上传 end-->

<!--多图上传 start-->
<input type="file" multiple accept="image/*" onchange="uploadImg()">
<!--多图上传 end-->

单图片上传js

var URL = window.URL || window.webkitURL || window.mozURL
   /**
   * 上传预览图片
   */
  function uploadImg(file, currentObj) {
    
    if (file.files && file.files[0]) {
      var reader = new FileReader()
      reader.onload = function(evt) {
        file.base64 = evt.target.result
        var formFile = new FormData()
        // 获取当前dom文件属性
        var fileObj =
          currentObj instanceof HTMLElement
            ? currentObj.files[0]
            : $(currentObj)[0].files[0]
        formFile.append('key', uploadFileKey)
        formFile.append('file', fileObj) //加入文件对象
        var data = formFile
        $.ajax({
          url: uploadFileUrl,
          data: data,
          type: 'POST',
          dataType: 'json',
          cache: false, //上传文件无需缓存
          processData: false, //用于对data参数进行序列化处理 这里必须false
          contentType: false, //必须
          success: function(result) {
            console.log(result)
            $(currentObj)
              .siblings('input[type=hidden]')
              .val(result.info.url)
          },
          error: function(err) {
            console.log(err)
          }
        })
        var tmpImg ='<img src="'+URL.createObjectURL(dataURItoBlob(file.base64)) +'" />';
        $(currentObj).siblings('.upload-list').empty().append(tmpImg).addClass('updateImg')
      }
      reader.readAsDataURL(file.files[0])
    }
  }

demo代码

<title>单图上传预览</title>
  <style>
    .preview {
      width: 200px;
      height:200px;
    }
    .preview img {
      width: 100%;
    }
  </style>
</head>
<body>
  <div class="container">
    <input type="file" accept="image/*" onchange="uploadImg(event,this)">
    <div class="preview">

    </div>
  </div>
  <script>
    var URL = window.URL || window.webkitURL || window.mozURL
    function uploadImg(e,dom) {
      var e = event || e
      var fileObj =
          dom instanceof HTMLElement
            ? dom.files[0]
            : $(dom)[0].files[0]
      console.log(e)
      console.log(dom)
      var container = document.querySelector('.preview')
      var img = new Image()
      img.src = URL.createObjectURL(fileObj)
      img.onload = function() {
        container.appendChild(img)
      }

    }
  </script>
 </body>

多图上传js

用vue写的，换成普通方法即可用

等同于

uploadImg:function(e){}   =>  function uploadImg(e){}

 uploadImg: function(e) {
  if(!this.maxImgLength) {
    return
  }
  var _this = this

  var files = e.target.files || e.dataTransfer.files
  var imgArr = []
  for(var i = 0; i < files.length; i++) {
    // fixme: 这里有一个作用域的问题，选择多张图片会只显示最后onload的一张图片
    // 用闭包方法修复
    (function(file){
        // console.log('file', file)
        if(!/^image/.test(file.type)) {
          $.alert('', '必须上传图片格式')
          return
        }
    
        var reader = new FileReader()
        var formData = new FormData()
    
        reader.onload = function() {
          file.base64 = this.result
          formData.append('key', uploadFileKey)
          formData.append('file', file)
          // console.log(formData)
          // $.showLoading('玩命上传中')
          _this.imgPreview.push(URL.createObjectURL(file))
          // console.log('this.preview', _this.imgPreview)
          _this.postFile(formData).then(function(res) {
            // $.hideLoading()
            _this.imgList.push(res.info)
            // console.log(_this.imgList)
          })
        }
        reader.readAsDataURL(file)
    })(file[i])
  }
},
postFile: function(formData) {
  // console.log(formData)
  return new Promise(function(resolve, reject) {
      $.ajax({
        type: "POST",
        url: apiList.ossUpFile,
        processData: false,
        contentType: false,
        data: formData,
        dataType: "json",
        success: function (resp) {
    	  resolve(resp)
        }
      });
  }) 
}

demo代码

待更新

追求者2016

关注

6
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
js上传图片并实现预览

js上传图片预览前端页面&lt;!--单图上传 start--&gt;&lt;input type="file" accept="image/*" onchange="uploadImg(event,this)"&gt;&lt;!--单图上传 end--&gt;&lt;!--多图上传 start--&gt;&lt;input type="file&quo
复制链接

扫一扫