Encapsulation du code de téléchargement d'image JavaScript

Cet article présente principalement en détail le code d'encapsulation du téléchargement d'images js, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

L'exemple de cet article partage avec vous la méthode de téléchargement d'images js. le code spécifique est pour votre référence. Le contenu spécifique est le suivant

méthode d'encapsulation js

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;
  })
 }

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!