国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

使用FormData對(duì)象上傳文件

OnlyLing / 1114人閱讀

摘要：監(jiān)聽控件值的變化拼接參數(shù)文件參數(shù)方式，為服務(wù)器請(qǐng)求地址，該參數(shù)規(guī)定請(qǐng)求是否異步處理。

var form = document.getElementById("chooseFile");
form.addEventListener("change", function(ev) {//監(jiān)聽file控件值的變化
  var oData = new FormData();
  var file=this.files[0];
  //拼接參數(shù)
  formData.append("file", file);  // 文件
  formData.append("params", "參數(shù)");
  formData.append("array",JSON.stringify([1,2,3])); 

  var xhr = new XMLHttpRequest();
  xhr.open("post",url,true); //post方式，url為服務(wù)器請(qǐng)求地址，true 該參數(shù)規(guī)定請(qǐng)求是否異步處理。
  xhr.upload.onloadstart = function(){//上傳開始
      //...
  };
  xhr.upload.onprogress = function(evt){//顯示上傳進(jìn)度條
    var loaded = evt.loaded;//已經(jīng)上傳大小情況
    var tot = evt.total;//附件總大小
    var per = Math.floor(100 * loaded / tot);  //已經(jīng)上傳的百分比
    $("#uploadprogress").removeClass("hide").css("width",per+"%");
  };
  xhr.onload = function (evt) {//上傳完成
     //...       
  };
  xhr.onerror = function () {
    alert("上傳失敗");
  };
 xhr.send(oData); //開始上傳，發(fā)送form數(shù)據(jù)
}, false);

拖拽上傳

 $(".divFile7")[0].ondrop = function (event) {

     event.preventDefault();//不要執(zhí)行與事件關(guān)聯(lián)的默認(rèn)動(dòng)作
     var files = event.dataTransfer.files;//獲取拖上來的文件

     //以下代碼不變
     var formData = new FormData();
     //參照上面代碼......
 };

使用jqery上傳文件的注意事項(xiàng)
需設(shè)置processData參數(shù)為false

$.ajax({
     url: "/Home/SaveFile2",
     type: "POST",
     data: formData,
     processData: false,  // 告訴jQuery不要去處理發(fā)送的數(shù)據(jù)
     contentType: false,   // 告訴jQuery不要去設(shè)置Content-Type請(qǐng)求頭
     success: function (responseText) {
         alert(responseText);
     }
 });

監(jiān)聽黏貼操作將圖片轉(zhuǎn)換為base64

document.getElementById("messageText").addEventListener("paste",function(e){
        var data=e.clipboardData||window.clipboardData;
        blob=data.items[0].getAsFile();//獲取圖片內(nèi)容
        var isImg=(blob&&1)||-1;//判斷是不是圖片，最好通過文件類型判斷
        var reader=new FileReader();
        if(isImg>=0){
            reader.readAsDataURL(blob);//將文件讀取為 DataURL
        }
        reader.onload=function(event){//文件讀取完成時(shí)觸發(fā)
            //event.target.result就是我們要的base64編碼
        };
});

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/109607.html

相關(guān)文章

  • FormData 和 Iframe上傳文件的兩種方式

    摘要：還特別介紹一種用使用對(duì)象上傳文件的方法。設(shè)置為上傳文件不需要緩存。用上傳文件因?yàn)椴皇撬袨g覽器都支持的，所以有時(shí)候需要用來實(shí)現(xiàn)文件上傳的功能。 用AJAX上傳文件，一般都是用FormData對(duì)象。 FormData對(duì)象，是可以使用一系列的健值對(duì)來模擬一個(gè)完整的表單，然后使用XMLHttpRequest發(fā)送這個(gè)表單。 FormData的使用 創(chuàng)建一個(gè)空的FormData對(duì)象，然后再用...

    Dean 評(píng)論0 收藏0

  • 關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(三) ----- FormData

    摘要：如果是傳入三個(gè)參數(shù)的方式，那么該值將是一個(gè)布爾值，文件，或者一個(gè)，如果不是，將被轉(zhuǎn)成一個(gè)字符串可選傳給服務(wù)器的文件名稱一個(gè)。 系列文章 關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(零)關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(一) ----- XMLHttpRequest關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(二) ----- File關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(三) ----- FormData關(guān)于前端上傳文...

    developerworks 評(píng)論0 收藏0

  • node.js實(shí)現(xiàn)formdata上傳文件

    摘要：對(duì)象包含表單的文本域信息，或?qū)ο蟀瑢?duì)象表單上傳的文件信息。是文件的信息前端傳遞的文件類型在中獲取將具有文本域數(shù)據(jù)，如果存在的話。 node.js實(shí)現(xiàn)formdata上傳文件 1.關(guān)于formdata XMLHttpRequest Level 2 添加了一個(gè)新的接口——FormData。利用 FormData 對(duì)象，我們可以通過 JavaScript 用一些鍵值對(duì)來模擬一系列表單控件，...

    Aceyclee 評(píng)論0 收藏0

  • antd 和 element上傳文件詳解與FormData詳解

    摘要：當(dāng)用戶完成選擇文件動(dòng)作時(shí)，提交子頁(yè)面中的。從此我們上傳文件就歡欣鼓舞的來找了。因?yàn)榈暮诵氖菍?duì)象，異步的實(shí)現(xiàn)是通過一個(gè)對(duì)象，一般簡(jiǎn)稱該對(duì)象對(duì)。這些回答基于自己理解，如有不妥，希望路過的大神輕噴，指正。 背景 平時(shí)工作中經(jīng)常會(huì)遇到需要上傳文件的情況，如果你用ant design 或者element ,它們都提供了上傳的組件。 我們分別來看一下element 和 antd 手動(dòng)上傳怎么處理：...

    Fundebug 評(píng)論0 收藏0

  • Ajax 之文件上傳

    摘要：簡(jiǎn)單的上傳例子先在里面準(zhǔn)便好標(biāo)簽添加上傳文件上傳文件解讀步驟的對(duì)象獲取，對(duì)象生成使用的事件來獲取，文件的內(nèi)容使用的方法來添加一個(gè)新值到里面來使用的的方法來上傳文件原理說明對(duì)象其實(shí)不止是可以用來上傳文件，如同其名，可以模擬一系列表單控件的 showImg(https://segmentfault.com/img/bVbbKYh?w=1366&h=660); FormData 簡(jiǎn)單的上傳例...

    tomato 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<