亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

使用js FormData傳文件流,傳json(重點)

qylost / 3711人閱讀

摘要:下邊舉個例子,大家就明白了好了,請上我們的兩位同學,小明和胖虎,你們就不用發(fā)言了,我會以的形式介紹你們的情況和個人癖好,請坐。

先介紹js的FormData,F(xiàn)ormData是XMLHttpRequest Level 2新增的一個接口,利用FormData對象,我們可以通過JavaScript用一些鍵值對來模擬一系列表單控件,我們還可以使用ajax方法來異步的提交這個"表單".使用FormData的最大優(yōu)點就是我們可以異步上傳一個二進制文件.
這里說下FormData的append方法,

給當前FormData對象添加一個鍵/值對(append)
void append(DOMString name, Blob value, optional DOMString filename);
void append(DOMString name, DOMString value);
參數(shù)值
name

字段名稱.

value

字段值.可以是,或者一個字符串,如果全都不是,則該值會被自動轉(zhuǎn)換成字符串.

filename

(可選) 指定文件的文件名,當value參數(shù)被指定為一個Blob對象或者一個File?接口提供有關文件的信息,并允許網(wǎng)頁中的 JavaScript 訪問其內(nèi)容。")對象時,該文件名會被發(fā)送到服務器上,對于Blob對象來說,這個值默認為"blob".

這里要注意下value字段,如果你要填入的是一個對象,會將它轉(zhuǎn)換成字符串,也就是最后傳給后臺的都是[object object],這樣后臺當然是無法解析的。下邊舉個例子,大家就明白了

好了,請上我們的兩位同學,小明和胖虎,你們就不用發(fā)言了,我會以json的形式介紹你們的情況和個人癖好,請坐。

var json=[
         {"name":"小明","age":15,"skills":["抽煙","喝酒","燙頭"],"family":{"father":"大明","mohter":"小紅"}},
         {"name":"胖虎","age":17,"skills":["打架","打架","還是打架"],"family":{"father":"佐藤","mohter":"愛田"}},
     ]


首先我們先試一下,把小明的family對象傳給后臺。

var data=new FormData()
     data.append("family",json[0].family)
     $.ajax({
         url:"demo.php",
         type: "Post",
         dataType: "json",
         cache: false,//上傳文件無需緩存
         processData: false,//用于對data參數(shù)進行序列化處理 這里必須false
         contentType: false, //必須
         data:data,
         success:function (res) {
             console.log(res);
         },
         error:function (error) {
             console.log(error);
         }
     })

結(jié)果:

被解析成了object object,有人該說了,你把它用JSON.stringify序列化之后不就行了,然后后端配合,再解碼成json,對,這樣確實行,但不要忘了,咱們還是需要傳文件流的,文件流被序列化之后會被轉(zhuǎn)化成一個空對象,這樣后臺就無法識別。由于時間原因,這里就不演示反面案例了。
這里我們要用兩個語法
1.a["b"]等于a.b
2.c[0]取得是c數(shù)組的第一項
正確方法:

var data=new FormData()
for(var i=0,len=json.length;i

之后,我們再給小明和胖虎每人上傳一張個人寫真照(利用input
file,文件流)
這里我們利用input上傳時的file對象,
附上代碼:


$("#upload").on("change",function (e) {
         var file = e.target.files[0];
         console.log(file);
         data.append("json[0][image]",file)
     })

這個file對象是一個含有二進制文件,打印為:

這個對象如果直接序列化,會被轉(zhuǎn)化為一個空對象,后臺無法識別,最后附上vue版代碼:


upload:function (e) {
                var file = e.target.files[0];
                //由于時間和條件原因,這里只給小明上傳一張寫真照
                data.append("json[0][image]",file)
                for(var i=0,len=json.length;i           
               
                                           
                       
                 

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

轉(zhuǎn)載請注明本文地址:http://www.ezyhdfw.cn/yun/105061.html

相關文章

  • 七牛 js JDK使用 - 上APP

    摘要:背景介紹使用將包括安卓和上傳到七牛上傳所以不考慮數(shù)據(jù)處理使用后臺得到七牛上傳基于下面不詳述如何使用參見七牛上傳的簡單案例也不詳述,參見官網(wǎng)事例很清楚了。指定上傳的目標資源空間和資源鍵的長度最大為字節(jié)。,表示只允許用戶上傳指定的文件。 背景介紹 使用JS將APP(包括安卓和IOS)上傳到七牛 (上傳APP所以不考慮數(shù)據(jù)處理) uptoken使用JAVA后臺得到 七牛上傳基于pluplo...

    elva 評論0 收藏0
  • antd 和 element上文件詳解與FormData詳解

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

    Fundebug 評論0 收藏0
  • 基于Vue + Node.js + MongoDB的圖片上組件,實現(xiàn)圖片的預覽和刪除

    摘要:網(wǎng)址功能單圖多圖上傳圖片上傳預覽上傳進度條分組上傳,分組查詢新建分組,刪除分組刪除圖片選擇圖片目錄結(jié)構前端利用搭建,中引入子組件。實現(xiàn)分組的新增查詢刪除。利用模塊實現(xiàn)刪除文件功能。 公司要寫一些為自身業(yè)務量身定制的的組件,要基于Vue,寫完后擴展了一下功能,選擇寫圖片上傳是因為自己之前一直對這個功能比較迷糊,所以這次好好了解了一下。演示在網(wǎng)址打開后的show.gif中。 使用技術:Vu...

    hzx 評論0 收藏0
  • 微信小程序?qū)W習與wepy框架的使用詳解

    摘要:,至此咱們的微信小程序的簡單使用及了解算是分享完了,畢竟個人也是道行有限,沒有鉆研太深,這些只是本人在實際項目開發(fā)過程中用到和總結(jié)的經(jīng)驗,有太多不足或不對的地方,希望大家多多給予指出與改正,咱們一起來共同學習與進步 微信小程序是一種不需要下載安裝即可使用的應用,在國內(nèi)它在企業(yè)推廣中的受歡迎度以及就這兩年的使用及普及熱度,然而就是因為它的備受歡迎度以及越來越被企業(yè)所重視,也就形成了咱們開...

    sf190404 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<