图片上传

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 = ['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

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

javascript

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

 

转载于:https://www.cnblogs.com/SunShineM/p/7228881.html