JavaScript image upload code encapsulation

This article mainly introduces the encapsulation code of js image uploading in detail. It has certain reference value. Interested friends can refer to it.

The example of this article shares with you the js image uploading method. The specific code is for your reference. The specific content is as follows

js encapsulation method

function uploadImages(picker, url, callback) {
  var img_uploader = WebUploader.create({
    auto: true,
    server: url,
    pick: picker,
    fileNumLimit: 1,
    fileSingleSizeLimit: 2097152, // 2M
    accept: {
      title: 'Images',
      extensions: 'gif,jpg,jpeg,bmp,png',
      // mimeTypes: 'image/*'
    },
    compress: {
      width: 300,
      compressSize: 102400 // < 100kb 不压缩
    },
  })

  var fileType = [&#39;image/jpeg&#39;, &#39;image/jpg&#39;, &#39;image/gif&#39;, &#39;image/png&#39;, &#39;image/bmp&#39;]

  img_uploader.on(&#39;beforeFileQueued&#39;, function(file) {

    fileType.some(function(name) {
      return file.type === name
    })

    ? &#39;&#39; : alert(&#39;请上传正确的图片！&#39;)

  })

  img_uploader.on(&#39;uploadSuccess&#39;, function(file, res) {
    callback(file, res)
  })

  img_uploader.on(&#39;uploadError&#39;, function(file, reason) {
    console.log(reason);
  })

  img_uploader.on(&#39;uploadComplete&#39;, function(file) {
    img_uploader.reset()
  })

}

html

<p id="zTu">图片</p>

javascript

var coverImage; 
initImageUploader();
function initImageUploader(){
  var fileUrl = 你想上传的地址;
  uploadImages('#imagePicker', fileUrl, function(file, res) {
   coverImage = res.url
   $(&#39;#zTu&#39;).get(0).innerHTML = &#39;<p class="file-item thumbnail"><img style="max-height:180px" src="&#39; + res.url + &#39;" /></p>&#39;
  })
 }

The above is the detailed content of JavaScript image upload code encapsulation. For more information, please follow other related articles on the PHP Chinese website!