jQuery.Form實(shí)現(xiàn)Ajax上傳文件同時(shí)設(shè)置headers的方法
廢話不多說(shuō)了，關(guān)于jquery form實(shí)現(xiàn)ajax上傳文件的方法，大家參考一下實(shí)例代碼吧：
<span style="font-family: Arial, Helvetica, sans-serif;">function ajaxSubmitForm() {</span>
var option = {
url : cache.batchImport,
type : 'POST',
dataType : 'json',
headers : {"token" : localStorage.getItem('token')}, //添加請(qǐng)求頭部
success : function(data) {
console.log('success')
},
error: function(data) {
console.log('error');
}
};
$("#userForm").ajaxSubmit(option);
return false; //最好返回false，因?yàn)槿绻粹o類(lèi)型是submit,則表單自己又會(huì)提交一次;返回false阻止表單再次提交
遇到一個(gè)問(wèn)題，要在上傳文件的同時(shí)設(shè)置headers信息，但form表單提交可以上傳文件不能設(shè)置headers，ajax可以設(shè)置headers不能上傳文件，后來(lái)從網(wǎng)上找到了jQuery.form可以實(shí)現(xiàn)，代碼如上。
由于file按鈕不能設(shè)置樣式，要用一個(gè)按鈕來(lái)間接觸發(fā)file，但這在ie上不能實(shí)現(xiàn)，因?yàn)閕e只可以直接觸發(fā)按鈕實(shí)現(xiàn)功能，所以要把file的位置和大小設(shè)置為和button一樣，但透明度設(shè)置為0覆蓋在button達(dá)到直接觸發(fā)控件的要求兼容ie。兼容后樣式在其他瀏覽器上又有問(wèn)題了。
兼容其他瀏覽器樣式代碼如下：
var isIE = navigator.userAgent.indexOf('MSIE')>-1;
if(!isIE){
$('#filePath').css('z-index',-1);
}
以上所述是小編給大家介紹的jQuery.Form實(shí)現(xiàn)Ajax上傳文件同時(shí)設(shè)置headers，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
jQuery插件zoom實(shí)現(xiàn)圖片全屏放大彈出層特效
jQuery zoom是一款能夠查看相冊(cè)大圖的jQuery彈出層插件，點(diǎn)擊相冊(cè)的縮略圖，就會(huì)彈出該相片對(duì)應(yīng)的大圖，并且?guī)в袀€(gè)性的加載動(dòng)畫(huà)，還有上一張下一張按鈕以及關(guān)閉按鈕。使用方法非常簡(jiǎn)單。兼容IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等瀏覽器。2015-04-04
jquery實(shí)現(xiàn)圖片上傳前本地預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)圖片上傳前本地預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05
jquery中封裝了一些ajax請(qǐng)求的方法，很實(shí)用，整理出來(lái)與大家分享下，感興趣的朋友可以參考下哈，希望可以幫助到你2013-03-03
Jquery獲取第一個(gè)子元素簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇Jquery獲取第一個(gè)子元素簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
Jquery焦點(diǎn)與失去焦點(diǎn)示例應(yīng)用
這篇文章主要介紹了Jquery焦點(diǎn)與失去焦點(diǎn)示例應(yīng)用,需要的朋友可以參考下2014-06-06
jquery實(shí)現(xiàn)鼠標(biāo)懸浮彈出氣泡提示框
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)鼠標(biāo)懸浮彈出氣泡提示框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
jquery獲取復(fù)選框checkbox的值實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jquery獲取復(fù)選框checkbox的值實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
翻譯整理的jQuery使用查詢(xún)手冊(cè)...2007-03-03
jQuery實(shí)現(xiàn)異步獲取json數(shù)據(jù)的2種方式
這篇文章主要介紹了jQuery實(shí)現(xiàn)異步獲取json數(shù)據(jù)的2種方式,主要講述了$.getJSON方法與$.ajax方法,非常實(shí)用,需要的朋友可以參考下2014-08-08
本篇文章是對(duì)jQuery中的排序組件進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-06-06