ajax上传图片，无file标签

ajax上传图片，无file标签

前言

有些需求在上传图片的时候没法用到file标签(虽说默认可以添加 ，然后给file标签动态赋值(一种说是将file标签复制，另一种是使用ActiveX插件)。然而我更倾向于FormData传值。

---

一、文件三种格式

1. Base64 格式

var reader = new FileReader();
reader.readAsDataURL(this.files[0]);
reader.onload = function(){
    console.log(reader.result); //获取到base64格式图片
};

2. 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;
} 

3. 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后端进行处理呢？当然特殊要求除外，有些需求总是很变态)。