ajax上传图片,无file标签
前言
有些需求在上传图片的时候没法用到file标签(虽说默认可以添加 ,然后给file标签动态赋值(一种说是将file标签复制,另一种是使用ActiveX插件)。然而我更倾向于FormData传值。
一、文件三种格式
- Base64 格式
var reader = new FileReader();
reader.readAsDataURL(this.files[0]);
reader.onload = function(){
console.log(reader.result); //获取到base64格式图片
};
- BLOB 格式
function dataURItoBlob(base64Data) {
//console.log(base64Data);//data:image/png;base64,
var byteString;
if(base64Data.split(',')[0].indexOf('base64') >= 0)
byteString = atob(base64Data.split(',')[1]);//base64 解码
else{
byteString = unescape(base64Data.split(',')[1]);
}
var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];//mime类型 -- image/png
// var arrayBuffer = new ArrayBuffer(byteString.length); //创建缓冲数组
// var ia = new Uint8Array(arrayBuffer);//创建视图
var ia = new Uint8Array(byteString.length);//创建视图
for(var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
var blob = new Blob([ia], {
type: mimeString
});
return blob;
}
- FILE 格式
function dataURLtoFile(dataurl, filename) {//将base64转换为文件
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 File([u8arr], filename, {type:mime});
}
假设我们获取到了文件的base64字符串,我们使用FormData上传文件
<form id="myform">
<input type="hidden" name="wookin" value="wookin"/>
<input type="hidden" name="CanReader" value="Y"/>
<input type="button" id="submit" value="提交"/>
</form>
<script>
$("#submit").click(function () {
var form = $("#myform")[0];
var formData = new FormData(form );
formData.append("base64Str", base64Str)
formData.append("blob", dataURItoBlob(base64Str))
formData.append("base64Str", dataURLtoFile(base64Str))
//processData: false, contentType: false,多用来处理异步上传二进制文件。
$.ajax({
url: 'xxx',
type: 'POST',
data: formData, // 上传formdata封装的数据
dataType: 'JSON',
cache: false, // 不缓存
processData: false, // ***这个必须要*** jQuery不要去处理发送的数据
contentType: false, // ***这个必须要*** jQuery不要去设置Content-Type请求头
success:function (data) { //成功回调
console.log(data);
}
});
});
</script>
总结:
当我们需要上传文件的时候,我们能够直接获取到文件的base64字符传,我们将其转为File类型用FormData上传。这样后端代码和普通的用file标签一致(感觉这样很香,后端代码改动小。为啥还要用base64传然后后端解密写文件呢?为啥要传blob后端进行处理呢?当然特殊要求除外,有些需求总是很变态)。