Heim  >  Artikel  >  Web-Frontend  >  Kapselung des JavaScript-Bild-Upload-Codes

Kapselung des JavaScript-Bild-Upload-Codes

巴扎黑
巴扎黑Original
2017-08-13 14:48:421723Durchsuche

In diesem Artikel wird hauptsächlich der Kapselungscode zum Hochladen von js-Bildern vorgestellt, der einen gewissen Referenzwert hat.

Das Beispiel dieses Artikels teilt Ihnen die Methode zum Hochladen von js-Bildern mit Der spezifische Code dient als Referenz. Der spezifische Inhalt lautet wie folgt:

JS-Kapselungsmethode


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(&#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;
  })
 }

Das obige ist der detaillierte Inhalt vonKapselung des JavaScript-Bild-Upload-Codes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn