JavaScript image upload code encapsulation-JS Tutorial-php.cn

JavaScript image upload code encapsulation

巴扎黑

Release： 2017-08-13 14:48:42

Original

1728 people have browsed it

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: &#39;Images&#39;,
      extensions: &#39;gif,jpg,jpeg,bmp,png&#39;,
      // mimeTypes: &#39;image/*&#39;
    },
    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()
  })

}

Copy after login

html

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

Copy after login

javascript

var coverImage; 
initImageUploader();
function initImageUploader(){
  var fileUrl = 你想上传的地址;
  uploadImages(&#39;#imagePicker&#39;, 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;
  })
 }

Copy after login

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!