2018-09-19-手动 FormData 上传

1. 手动 FormData 上传

var blobArr;
var formData = new FormData();
formData.append("name", "abc");
formData.append("file", blobArr);

$.ajax({
        url: "ajax.php",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        cache: false,
})
.done(function(res) {
        console.log(res);
})
.fail(function(err) {
       console.log(err);
});

2. base64 和 blob 互转

/** 
 * base64 转 blob 对象，文件上传 
 * 转载自：http://blog.csdn.net/hsany330/article/details/52575459 
 * @param dataURI 
 * @returns {Blob} 
 */  
function dataURItoBlob(dataURI) {  
    var byteString = atob(dataURI.split(',')[1]);  
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];  
    var ab = new ArrayBuffer(byteString.length);  
    var ia = new Uint8Array(ab);  
    for (var i = 0; i < byteString.length; i++) {  
        ia[i] = byteString.charCodeAt(i);  
    }  
    var resAb = [ab];
    return new Blob(resAb, {type: mimeString});  
} 

/** 
 *  blob 对象 转 base64
 */  
var fileReader = new FileReader();
fileReader. readAsDataURL(blobObj);
fileReader.onload = function() {
    var base64Url = fileReader.result;
};

/** 
 *  file 转 base64
 */  
var fileReader = new FileReader();
fileReader. readAsDataURL(file);
fileReader.onload = function() {
    var base64Url = fileReader.result;
};

3. createObjectURL（file/blob）

/** 
 *  file => createObjectURL
 */  
      var img = document.createElement("img");
      img.src = window.URL.createObjectURL(files[i]);
      img.height = 60;
      img.onload = function() {
          window.URL.revokeObjectURL(this.src);
      }

/** 
 *  blob => createObjectURL
 */
      var img = document.createElement("img");
      img.src = window.URL.createObjectURL(blobObj);
      img.height = 60;
      img.onload = function() {
          window.URL.revokeObjectURL(this.src);
      }