成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

HTML5+Ajax上傳文件

qieangel2013 / 3549人閱讀

摘要：比起普通的，使用的最大優(yōu)點(diǎn)就是我們可以異步上傳一個(gè)二進(jìn)制文件。方法二一次性上傳多個(gè)文件如果后臺(tái)接口要求單個(gè)文件，就循環(huán)獲取文件信息提交，使用同步上傳。

歡迎交換友鏈 Laker"s Blog--進(jìn)擊的程序媛
Github：https://github.com/younglaker
微博: 江小湖Laker

HTML

input類型設(shè)為file：

如果想上傳多文件，可添加multiple

用accept="MIME_type"限制提交的文件類型，用逗號(hào)隔開的 MIME 類型列表（服務(wù)器端也要最好類型檢測(cè)雙保險(xiǎn)），如：
獲取文件內(nèi)容

JavaScript：

var file = document.getElementById("fileToUpload").files[0];

jQuery：

var file = $("#img_input").prop("files")[0];
上傳

XMLHttpRequest Level 2添加了一個(gè)新的接口FormData。利用FormData對(duì)象，我們可以通過(guò)JavaScript用一些鍵值對(duì)來(lái)模擬一系列表單控件。比起普通的Ajax，使用FormData的最大優(yōu)點(diǎn)就是我們可以異步上傳一個(gè)二進(jìn)制文件。

// 創(chuàng)建
var form_data = new FormData();

// 獲取文件
var file_data = $("#img_input").prop("files")[0];

// 把所以表單信息
form_data.append("id", "001");
form_data.append("name", "test");
form_data.append("img", file_data);

$.ajax({
    type: "POST",
    url: "....",
    dataType : "json",
    processData: false,  // 注意：讓jQuery不要處理數(shù)據(jù)
    contentType: false,  // 注意：讓jQuery不要設(shè)置contentType
    data: form_data
}).success(function(msg) {
    console.log(msg);
}).fail(function(msg) {
    console.log(msg);
});
多文件上傳

方法一 ：一次性上傳多個(gè)文件

如果后臺(tái)接口允許多文件上傳，就把文件存到一個(gè)變量后上傳。

方法二 ：一次性上傳多個(gè)文件

如果后臺(tái)接口要求單個(gè)文件，就循環(huán)獲取文件信息提交，Ajax使用同步上傳async: false。

跨域

JSONP是使用GET方法，無(wú)法發(fā)送文件。可以讓后臺(tái)開啟CORS，Ajax也使用跨域crossDomain: true即可。

$.ajax({
    type: "POST",
    url: "....",
    dataType : "json",
    crossDomain: true,
    processData: false,  // 注意：讓jQuery不要處理數(shù)據(jù)
    contentType: false,  // 注意：讓jQuery不要設(shè)置contentType
    data: form_data
}).success(function(msg) {
    console.log(msg);
}).fail(function(msg) {
    console.log(msg);
});

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

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

相關(guān)文章

  • PHP_Ajax

    摘要：簡(jiǎn)介業(yè)務(wù)做一個(gè)在線投票，給歌手投票。提交到當(dāng)前頁(yè)面的中達(dá)到效果。用戶名密碼注冊(cè)總結(jié)在不使用對(duì)象的情況下，依然可以用來(lái)實(shí)現(xiàn)對(duì)后臺(tái)服務(wù)器的請(qǐng)求，同時(shí)不帶來(lái)頁(yè)面刷新或者跳轉(zhuǎn)。 ajax 簡(jiǎn)介 業(yè)務(wù)：做一個(gè)在線投票，給歌手投票。要求：無(wú)刷新，并且不允許使用XMLHttpRequest對(duì)象.分析:在XHR對(duì)象，沒(méi)有流行之前，已經(jīng)有了無(wú)刷新這種效果的方法. 從http角度看，可以利用204 No...

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

  • 【方法】Html5實(shí)現(xiàn)文件異步上傳

    摘要：簡(jiǎn)介開發(fā)文件上傳功能從來(lái)不是一件愉快的事，異步上傳更是如此，使用過(guò)和的上傳方案，也都感覺(jué)十分的別扭。本文簡(jiǎn)要簡(jiǎn)紹利用的實(shí)現(xiàn)文件的異步上傳，還可以實(shí)現(xiàn)上傳進(jìn)度條和文件大小驗(yàn)證等。服務(wù)端使用的方案進(jìn)行處理。 1 簡(jiǎn)介 開發(fā)文件上傳功能從來(lái)不是一件愉快的事，異步上傳更是如此，使用過(guò)iframe和Flash的上傳方案，也都感覺(jué)十分的別扭。本文簡(jiǎn)要簡(jiǎn)紹利用Html5的FormData實(shí)現(xiàn)文件的異...

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

  • HTML5調(diào)用本地?cái)z像頭畫面，拍照，上傳服務(wù)器

    摘要：圖片數(shù)據(jù)繪制到先構(gòu)造對(duì)象，為，圖片之后繪制到的圖片文件數(shù)據(jù)繪制到還是先轉(zhuǎn)換成一個(gè)，然后構(gòu)造對(duì)象，為，圖片之后繪制到利用上面的函數(shù)，由對(duì)象得到格式的，再參考圖片數(shù)據(jù)繪制到轉(zhuǎn)換為對(duì)象并使用發(fā)送轉(zhuǎn)換為對(duì)象后，可以使用上傳圖像文件。 實(shí)現(xiàn)功能和適用業(yè)務(wù) 采集本地?cái)z像頭獲取攝像頭畫面，拍照保存，上傳服務(wù)器； 前端上傳圖片處理，展示，縮小，裁剪，上傳服務(wù)器 實(shí)現(xiàn)步驟 調(diào)取本地?cái)z像頭（get...

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

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

0條評(píng)論

閱讀需要支付1元查看
<