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

資訊專欄INFORMATION COLUMN

HTML5+Ajax上傳文件

qieangel2013 / 3537人閱讀

摘要:比起普通的,使用的最大優點就是我們可以異步上傳一個二進制文件。方法二一次性上傳多個文件如果后臺接口要求單個文件,就循環獲取文件信息提交,使用同步上傳。

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

HTML

input類型設為file


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

accept="MIME_type"限制提交的文件類型,用逗號隔開的 MIME 類型列表(服務器端也要最好類型檢測雙保險),如:


獲取文件內容

JavaScript:

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

jQuery:

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

XMLHttpRequest Level 2添加了一個新的接口FormData。利用FormData對象,我們可以通過JavaScript用一些鍵值對來模擬一系列表單控件。比起普通的Ajax,使用FormData的最大優點就是我們可以異步上傳一個二進制文件。

// 創建
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不要處理數據
    contentType: false,  // 注意:讓jQuery不要設置contentType
    data: form_data
}).success(function(msg) {
    console.log(msg);
}).fail(function(msg) {
    console.log(msg);
});
多文件上傳

方法一 :一次性上傳多個文件

如果后臺接口允許多文件上傳,就把文件存到一個變量后上傳。

方法二 :一次性上傳多個文件

如果后臺接口要求單個文件,就循環獲取文件信息提交,Ajax使用同步上傳async: false

跨域

JSONP是使用GET方法,無法發送文件。可以讓后臺開啟CORS,Ajax也使用跨域crossDomain: true即可。

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

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

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

相關文章

  • PHP_Ajax

    摘要:簡介業務做一個在線投票,給歌手投票。提交到當前頁面的中達到效果。用戶名密碼注冊總結在不使用對象的情況下,依然可以用來實現對后臺服務器的請求,同時不帶來頁面刷新或者跳轉。 ajax 簡介 業務:做一個在線投票,給歌手投票。要求:無刷新,并且不允許使用XMLHttpRequest對象.分析:在XHR對象,沒有流行之前,已經有了無刷新這種效果的方法. 從http角度看,可以利用204 No...

    MiracleWong 評論0 收藏0
  • 【方法】Html5實現文件異步上傳

    摘要:簡介開發文件上傳功能從來不是一件愉快的事,異步上傳更是如此,使用過和的上傳方案,也都感覺十分的別扭。本文簡要簡紹利用的實現文件的異步上傳,還可以實現上傳進度條和文件大小驗證等。服務端使用的方案進行處理。 1 簡介 開發文件上傳功能從來不是一件愉快的事,異步上傳更是如此,使用過iframe和Flash的上傳方案,也都感覺十分的別扭。本文簡要簡紹利用Html5的FormData實現文件的異...

    justCoding 評論0 收藏0
  • HTML5調用本地攝像頭畫面,拍照,上傳服務器

    摘要:圖片數據繪制到先構造對象,為,圖片之后繪制到的圖片文件數據繪制到還是先轉換成一個,然后構造對象,為,圖片之后繪制到利用上面的函數,由對象得到格式的,再參考圖片數據繪制到轉換為對象并使用發送轉換為對象后,可以使用上傳圖像文件。 實現功能和適用業務 采集本地攝像頭獲取攝像頭畫面,拍照保存,上傳服務器; 前端上傳圖片處理,展示,縮小,裁剪,上傳服務器 實現步驟 調取本地攝像頭(get...

    ShevaKuilin 評論0 收藏0

發表評論

0條評論

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