jq 使用form data上传图片

Posted 2020-12-14 zhanping

记录！！！

老项目中做图片上传，开始做的时候发现jQuery中的【$】被占用，上传的时候后台需要的是form data，浏览器传的是Request Payload请求

操作如下

解决jQuery被占用

1、var $j = jQuery.noConflict(); 缺点是当前html页面上的jq【$】必须全部替换成【$j】

2、(function ($j) {

　　......

})(jQuery) 形成一个作用域，在作用域里面调用，不会影响其他的内容

 

代码：

var render = new FileReader();
/**
 * 这里有两种方法，区别如下
 * readAsDataURL()
 * 读取指定的Blob中的内容。一旦完成，result属性中将包含所读取文件的原始二进制数据。
 * readAsText()
 * 读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容。
 */
render.readAsDataURL(document.querySelector(‘input[type=file]‘).files[0]);
render.onload = function (e) {
    var formData = new FormData();
    formData.append(‘data‘, e.target.result);
    jQuery.ajax({
        url: "url",
        type: ‘POST‘,
        data: formData,
        async: true,
        processData: false,
        contentType: false
    });
};

//base64转二进制文件
function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(‘,‘), mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type: mime});
}