知识改变世界
生活可以更简单
注册 登录
***文章***

关于JavaScript进行图片上传的代码

作者:小白 类型:转载 时间:2017-08-03

本文实例为大家分享了js图片上传的具体代码,供大家参考,具体内容如下

js封装的方法

  1. 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 = ['image/jpeg', 'image/jpg', 'image/gif', 'image/png', 'image/bmp']
    
      img_uploader.on('beforeFileQueued', function(file) {
    
        fileType.some(function(name) {
          return file.type === name
        })
    
        ? '' : alert('请上传正确的图片!')
    
      })
    
      img_uploader.on('uploadSuccess', function(file, res) {
        callback(file, res)
      })
    
      img_uploader.on('uploadError', function(file, reason) {
        console.log(reason);
      })
    
      img_uploader.on('uploadComplete', function(file) {
        img_uploader.reset()
      })
    
    }
    

html

  1. <div id="zTu">图片</div>
    

javascript

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持simple求知网。

希望本文所述对大家程序设计有所帮助。

***其他版块***

本站为编程爱好者提供计算机电子书免费资源下载,定期更新!

***其他***

更多内容,敬请期待!谢谢!!!