javascript圖片上傳相關資料整理

liukai90 發布于2019-08-22 10:49 / 1916人閱讀

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

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

說明：
1.監聽input上的change事件可以實現自動上傳到服務器
2.服務器端通過name字段，獲取上傳圖片的信息
3.數據信息為let imginfo = new FormData($("#uploadForm")[0]),imginfo是一個對象,通過post("/upload", imginfo);調用

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

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

二.使用Base64的方式，使用這種方式，可以直接實現本地預覽

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上傳圖片信息，并顯示圖片上傳的進度

來自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){ 
               //在這里控制進度條   
           },
           success:function(){
               
           },
           error:function(data){
               alert("上傳圖片出錯");
           }
       });
   }));

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

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

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

圖片壓縮

https://github.com/mhbseal/html5ImgCompress

GPU云服務器云服務器上傳資料圖片大小限制整理資料補碼資料整理相關資料

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91313.html

JavaScript精編干貨

摘要：老姚淺談怎么學鑒于時不時，有同學私信問我老姚，下同怎么學前端的問題。擼碼聽歌，全局控制。淺析用 js 解析 xml 的方法由于項目上需要解析 xml，于是各種百度，然后自己總結了下各個主流瀏覽器解析 xml 的方法，只能是很淺顯的知道他的用法，但是還沒有深層次的研究。裝 X - 建立自己的斗圖網站庫之前加過一個斗圖群，看到很多經典的表情，然后就收藏到了 QQ，迫于本屌絲開不起...

Fourierr 2019-08-21 18:46 評論0 收藏0
2017年1月前端月報

摘要：平日學習接觸過的網站積累，以每月的形式發布。年以前看這個網址概況在線地址前端開發群月報提交原則技術文章新的為主。平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 概況在線地址：http://www.kancloud.cn/jsfront/month/82796 JS前端開發群月報提交原則：技...

FuisonDesign 2019-08-29 12:35 評論0 收藏0
2017年1月前端月報

摘要：平日學習接觸過的網站積累，以每月的形式發布。年以前看這個網址概況在線地址前端開發群月報提交原則技術文章新的為主。平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 概況在線地址：http://www.kancloud.cn/jsfront/month/82796 JS前端開發群月報提交原則：技...

ivyzhang 2019-08-20 16:29 評論0 收藏0
2017年1月前端月報

摘要：平日學習接觸過的網站積累，以每月的形式發布。年以前看這個網址概況在線地址前端開發群月報提交原則技術文章新的為主。平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 概況在線地址：http://www.kancloud.cn/jsfront/month/82796 JS前端開發群月報提交原則：技...

CloudwiseAPM 2019-08-01 16:48 評論0 收藏0