jquery版图片上传插件

2019独角兽企业重金招聘Python工程师标准>>>

图片上传

• 1.点击其他盒子，触发上传文件的input
• 2.读取文件，将图片转换成base64
• 3.封装blob对象
• 4.将blob对象塞入表单，上传
• 5.复制代码，完成调用

代码如下

function uploadImage(uploadConfig) {
    var uploadConfig = uploadConfig
    // 将base64转换为blob对象
    function dataURItoBlob(base64Data) {
        var byteString;
        if (base64Data.split(',')[0].indexOf('base64') >= 0)
            byteString = atob(base64Data.split(',')[1]);
        else
            byteString = unescape(base64Data.split(',')[1]);

        var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
        var ia = new Uint8Array(byteString.length);
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }
        return new Blob([ia], {type:mimeString});
    }

    // 获取上传进度
    function getUploadProgress(e) {
        var myXhr = $.ajaxSettings.xhr();
        if(uploadConfig.isShowProgress &&　myXhr.upload) {
            try {
                myXhr.upload.addEventListener('progress', function(e) {
                    if(e.lengthComputable) {
                        var percent = e.loaded / e.total * 100;
                        uploadConfig.loadProgress(percent)
                    }
                }, false);
            } catch(e) {
                console.log(e);
            }
        }
        return myXhr;
    }

    // 转换成base64，上传
    function uploadImg2Base64() {
        /*调用示例：document.getElementById("img_upload").addEventListener('change', uni.ImgToBase64, false);！！！必须用原生js*/
        var file = this.files[0]
        if (!/image\/\w+/.test(file.type)) {
            alert("请确保文件为图像类型");
            return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {
            var self = this,
                base64String = this.result,
                blob = dataURItoBlob(base64String),
                canvas = document.createElement('canvas'),
                dataURL = canvas.toDataURL('image/jpeg', 0.5),
                fd = new FormData(document.forms[0]);
            // 构建上传参数
            for (var i in uploadConfig.params) {
                fd.append(i, uploadConfig.params[i]);
            }
            fd.append("file", blob, file.name);

            $.ajax({
                url: uploadConfig.url,
                type: 'post',
                data: fd,
                beforeSend: uploadConfig.beforeSend,
                processData:false,
                contentType: false,
                dataType:"json",
                xhr: getUploadProgress,
                success:function(data){
                    uploadConfig.loadSuccess(data)
                    uploadConfig.base64String(self.result)
                },
                error: function (error) {
                    console.log(error)
                }
            })
            return this.result;
        }
    }

    // 点击触发触发上传
    $('#'+uploadConfig.triggerId).click(function () {
        $('#'+uploadConfig.inputId).trigger('click')
    })
    document.getElementById(uploadConfig.inputId).addEventListener('change', uploadImg2Base64, false);
}

调用方式

var uploadConfig = {
    inputId: 'uploadFile',      // 上传图片的inputId
    triggerId: 'defaultUpload', // 触发上传的元素Id
    url: 'http://testnew.api.pingjj.jhcm99.com/api/admin/upload',   // 上传地址
    params: {   // 上传需要携带的参数
        token: 'a8100c30fc194ff275f691336c655ea6'
    },
    beforeSend: function() {
      // 做loadding开始处理
    },
    isShowProgress: false,　　// 是否需要展示上传进度
    loadProgress: function (progress) {     // 上传进度回调
        console.log(progress)
    },
    base64String: function (base64Str) {    // 获取本地的base64字符串做展示
        console.log(base64Str)
    },
    loadSuccess: function (data) {      // 上传完成后回调
        console.log(data)
    }
}
uploadImage(uploadConfig)

转载于:https://my.oschina.net/chinahufei/blog/2209616