javascript圖片上傳相關(guān)資料整理

liukai90 發(fā)布于2019-08-22 10:49 / 1922人閱讀

摘要：說明使用獲取表單的數(shù)據(jù)，不同通過和獲取值上傳圖片這三個(gè)參數(shù)必須配置該處使用了來獲取文件上傳的進(jìn)度本人沒實(shí)驗(yàn)，待測圖片壓縮

圖片上傳的多種方式 一.使用Form表單，enctype="multipart/form-data"

說明：
1.監(jiān)聽input上的change事件可以實(shí)現(xiàn)自動(dòng)上傳到服務(wù)器
2.服務(wù)器端通過name字段，獲取上傳圖片的信息
3.數(shù)據(jù)信息為let imginfo = new FormData($("#uploadForm")[0]),imginfo是一個(gè)對(duì)象,通過post("/upload", imginfo);調(diào)用

如何不使用From表單上傳圖片

var formData = new FormData();
var imginfo = formData.append("file", $("#file")[0].files[0]);
// imginfo通過組裝的方式得到，通過上面接口實(shí)現(xiàn)上傳。
//其中`name=file`和`append("file")`中的file都是服務(wù)器端獲取圖片信息的標(biāo)示。

二.使用Base64的方式，使用這種方式，可以直接實(shí)現(xiàn)本地預(yù)覽

if (window.FileReader) {
  var oFileReader = new FileReader(),
  oFile = e.target.files[0];
  if (/^image*/.test(oFile.type)) {
    oFileReader.onloadend = function (e) {
      let binfo64 = e.target.result;
      let postinfo = {
        image: binfo64,
        filename: `passport-${new Date().getTime()}`
      }
    };
    oFileReader.readAsDataURL(oFile);
  } else {
    Toast.makeText("傳入圖片文件");
  }
}

三.使用Ajax上傳圖片信息，并顯示圖片上傳的進(jìn)度

來自https://www.w3ctrain.com/2015/07/11/uploading-image-with-ajax/

//綁定了`submit`事件。    
   $("#fileupload-form").on("submit",(function(e) {
       e.preventDefault();
       //序列化表單   
      var serializeData = $(this).serialize();
      
      // var formData = new FormData(this);
      $(this).ajaxSubmit({
           type:"POST",
           url: *yoururl*,
           dataType: "json", 
           data: serializeData,            
           // data: formData,
           
           //attention!!!   
           contentType: false,      
           cache: false,             
           processData:false,      
             
           beforeSubmit: function() {
                   //上傳圖片之前的處理   
           },
           uploadProgress: function (event, position, total, percentComplete){ 
               //在這里控制進(jìn)度條   
           },
           success:function(){
               
           },
           error:function(data){
               alert("上傳圖片出錯(cuò)");
           }
       });
   }));

//綁定文件選擇事件，一選擇了圖片，就讓`form`提交。   

   $("#fileupload").on("change", function() {
       $(this).parent().submit();
});

說明：
1.使用.serialize()獲取表單的數(shù)據(jù)，不同通過val和text獲取值
2.ajax上傳圖片這三個(gè)參數(shù)必須配置contentType: false, cache: false, processData:false
3.該處使用了uploadProgress 來獲取文件上傳的進(jìn)度（本人沒實(shí)驗(yàn)，待測）

圖片壓縮

https://github.com/mhbseal/html5ImgCompress