jQuery 中如何使用formdata 上傳圖片？

圖片在上傳過程中，需要將圖片轉(zhuǎn)換成二進(jìn)制數(shù)據(jù)，要怎么寫呢？網(wǎng)上找的都不合適。我是這樣寫的，因?yàn)樵谏蟼髑靶枰A(yù)覽，也可以多圖上傳，下面的方法是獲取不到圖片數(shù)據(jù)的，只能獲取到圖片的name,type,size:

<div class="anviz-upload-file">
    <div class="image-item">
        <input id="file" type="file" />
    </div>
</div>

function getImgList(){
    var myfile = document.getElementById('file');    
    var List = document.getElementsByClassName('img-list')[0];
    
    myfile.onchange = function(){
        var files = this.files;
        if(!files)return;
        if(files.length > 0){
            jQuery('#imgList').show();        
        }else{
            jQuery('#imgList').hide();        
        }
        
        var fileArr =  [];
        var fileEntity = {};
        if(files){
            for(var i = 0;i<files.length;i++){    
                var reader = new FileReader();
                reader.onload = function() {
                      //處理 android 4.1 兼容問題
                    var base64 = reader.result.split(',')[1];
                    var dataUrl = 'data:image/png;base64,' + base64;

                    var blob = dataURLtoBlob(dataURL);
                }
                
                //chrome，firefox并且safari瀏覽器不能正常工作,必須重新將對(duì)象組織
                fileEntity.name = files[i].name;
                fileEntity.type = files[i].type;
                fileEntity.size = files[i].size;
                fileEntity.lastModified = files[i].lastModified;
                fileEntity.lastModifiedDate = files[i].lastModifiedDate;
                fileEntity.webkitRelativePath = files[i].webkitRelativePath;
                
                fileArr.push(fileEntity);
                var data = JSON.stringify(fileArr);
                sessionStorage.setItem('arr',data);
                
                var oLi = '<li><img src="'+URL.createObjectURL(files[i])+'"><span class="close" onclick="closeli(this)" >&times;</span></li>';    
                List.innerHTML+=oLi; 
            }
        }
    }
}

感謝陌路凡歌（4.4k 聲望）的幫助下寫了formdata的方法，下面是所有數(shù)據(jù)的組織：

function buildJson() {
    var arr = JSON.parse(sessionStorage.getItem('arr'));
    var formData = new FormData(); 
    formData.append("files", arr);

    var jsonObj = {'imgList':formData};
    return jsonObj;
}

FormData的數(shù)據(jù)在調(diào)試中顯示為，我從調(diào)試中感覺這個(gè)數(shù)據(jù)似乎不太對(duì)，imgList[]都為空，F(xiàn)ormData到底是不是把圖片都轉(zhuǎn)成了二進(jìn)制的方法，看不到?。?/p>

回答

編輯回答

奧特蛋

直接push，有興趣可以看看我的博客鏈接描述

//onchange 
    for(var i = 0;i<files.length;i++){                
         fileArr.push(files[i]);
        //....圖片的預(yù)覽操作
    }


//提交
function sub(){    
var formData = new FormData();    
    for(var i =0;i<fileArr.length;i++){    //提交時(shí)，我們把fileArr中的數(shù)據(jù)遍歷一遍
        formData.append("upfile[]", fileArr[i]); 
    };
    $.ajax({
          url: "1.php",
          type: "POST",
          data:formData,
          cache:false,         //不設(shè)置緩存
          processData: false,  // 不處理數(shù)據(jù)
          contentType: false   // 不設(shè)置內(nèi)容類型
    });    
}

2018年2月28日 06:47