如何用ajax上傳文件

用到兩個(gè)對(duì)象

創(chuàng)新互聯(lián)擁有網(wǎng)站維護(hù)技術(shù)和項(xiàng)目管理團(tuán)隊(duì)，建立的售前、實(shí)施和售后服務(wù)體系，為客戶提供定制化的網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站、網(wǎng)站維護(hù)、成都IDC機(jī)房托管解決方案。為客戶網(wǎng)站安全和日常運(yùn)維提供整體管家式外包優(yōu)質(zhì)服務(wù)。我們的網(wǎng)站維護(hù)服務(wù)覆蓋集團(tuán)企業(yè)、上市公司、外企網(wǎng)站、購(gòu)物商城網(wǎng)站建設(shè)、政府網(wǎng)站等各類型客戶群體，為全球近1000家企業(yè)提供全方位網(wǎng)站維護(hù)、服務(wù)器維護(hù)解決方案。

第一個(gè)對(duì)象：FormData

第二個(gè)對(duì)象：XMLHttpRequest

目前新版的Firefox 與 Chrome 等支持HTML5的瀏覽器完美的支持這兩個(gè)對(duì)象，但I(xiàn)E9尚未支持 FormData 對(duì)象，還在用IE6 ? 只能仰天長(zhǎng)嘆....

有了這兩個(gè)對(duì)象，我們可以真正的實(shí)現(xiàn)Ajax方式上傳文件。

示例代碼：

!DOCTYPE html

html

head

titleHtml5 Ajax 上傳文件/title

script type="text/javascript"

function UpladFile() {

var fileObj = document.getElementByIdx_x_x("file").files[0]; // 獲取文件對(duì)象

var FileController = "../file/save"; // 接收上傳文件的后臺(tái)地址

// FormData 對(duì)象

var form = new FormData();

form.append("author", "hooyes"); // 可以增加表單數(shù)據(jù)

form.append("file", fileObj); // 文件對(duì)象

// XMLHttpRequest 對(duì)象

var xhr = new XMLHttpRequest();

xhr.open("post", FileController, true);

xhr.onload = function () {

alert("上傳完成!");

};

xhr.send(form);

}

/script

/head

body

input type="file" id="file" name="myfile" /

input type="button" onclick="UpladFile()" value="上傳" /

/body

/html

很簡(jiǎn)潔的代碼，便可以達(dá)到Ajax方式上傳文件，上面的代碼中使用input type="file" /這種傳統(tǒng)的選擇文件的方法產(chǎn)生文件對(duì)象，HTML5還支持使用多種更靈活的方式，如拖拽文件到指定的元素上產(chǎn)生。

如何用html5自帶驗(yàn)證 但是用ajax提交

//H5自帶的驗(yàn)證是比較簡(jiǎn)單的驗(yàn)證，不完美，只適合比較簡(jiǎn)單的驗(yàn)證。具體使用方法如下：

//需求：用戶名：不能為空，長(zhǎng)度在6至12之間，內(nèi)容為英文

//HTML

input type="text" id="user" required minlength=6 maxlength=12 pattern="^[a-zA-Z]+$"

//js

var user = document.getElementById("user");

user.onblur = function(){

if(user.validity.valueMissing){

user.setCustomValidity("用戶名為空.");

}else if(user.validity.tooShort){

user.setCustomValidity("用戶名過(guò)短.");

}else if(user.validity.tooLong){

user.setCustomValidity("用戶名過(guò)長(zhǎng).");

}else if(user.validity.patternMismatch){

user.setCustomValidity("用戶名輸入錯(cuò)誤.");

}

}

//required屬性：驗(yàn)證是否為空

//pattern屬性 ：匹配正則

//validity屬性：是H5底層的邏輯提供，原本已經(jīng)存在的。元素通過(guò)elem.validity獲得validityState對(duì)象

//例如可以獲得的對(duì)象有：valueMissing 驗(yàn)證是否為空 返回true或false

//再例如：patternMismatch 驗(yàn)證是否匹配正則 同樣返回 true或false

怎么使用ajax提交？

你可以將我上面的代碼封裝成一個(gè)check方法，用來(lái)檢查表單內(nèi)容是否正確，在用戶點(diǎn)擊提交按鈕的時(shí)候不是直接submit表單，而是觸發(fā)一個(gè)表單提交前驗(yàn)證方法check，驗(yàn)證通過(guò)后，將表單中的元素獲取到，保存在一個(gè)變量中下面以jquery的ajax為例：

var?jsonData={'userName':user.value}

$.ajax({

url:'接口地址'，

type：'post',

dataType:'json',

data:jsonData,

success:function(data){

//發(fā)送成功后的回調(diào)，data包含成功時(shí)后臺(tái)返回的數(shù)據(jù)

},

error:function(res){

//發(fā)送失敗時(shí)的回調(diào)，res包含失敗時(shí)的后臺(tái)返回的數(shù)據(jù)

}

})

//特別要注意一點(diǎn)的是如果要用ajax發(fā)送數(shù)據(jù)，就不要將提交按鈕的type設(shè)置為submit，否則form還是會(huì)自動(dòng)提交

基于HTML5的多圖Ajax上傳的php后臺(tái)接收并獲取圖片寬高等信息

//但是為什么我用file_exists()判斷文件是否存在時(shí)，得到的結(jié)果卻是不存在呢

這句話后面加一句

$file='../uploads/' . $file;

你都把文件存成這個(gè)文件了 還用原來(lái)的文件名判斷能行嗎

后面的錯(cuò)誤也是一樣的

也可以直接把后面兩個(gè)$file改掉

if(!file_exists('../uploads/' . $file)){

$src_info = @getimagesize('../uploads/' . $file);

網(wǎng)站名稱：html5ajax上傳的簡(jiǎn)單介紹
網(wǎng)頁(yè)URL：http://chinadenli.net/article31/dsecspd.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、域名注冊(cè)、搜索引擎優(yōu)化、面包屑導(dǎo)航、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)