ajax上傳時參數(shù)提交不更新等相關(guān)問題
更新時間：2012年12月11日 10:18:54 作者：
我感覺好像這個上傳插件只在第一次點擊的時候?qū)嵗?shù)傳給后臺，所以以后值都是不變的，應(yīng)該怎么解決這個問題呢
先前，我從網(wǎng)上下載了一個jQuery的Ajax上傳插件，網(wǎng)頁的左側(cè)是上傳分類，想要實現(xiàn)的一個功能是如此這樣的：我本來是打算在服務(wù)端根據(jù)上傳分類建立不同的文件夾來保存文件的，因此這個就需要傳一個上傳分類參數(shù)給后臺。這些上傳分類是從數(shù)據(jù)庫讀出，用repeater生成的。當(dāng)點擊其中一個分類時就給他設(shè)置一個樣式，并且將這個分類的名字保存到一個變量uploadCatlog中。我可以取到分類并傳給后臺，但是很奇怪的是只有第一次是正確的，以后的每次參數(shù)都不更新。其實在上傳插件的onComplete回調(diào)函數(shù)中也用到了uploadCatlog，它的值也已經(jīng)更新了。我感覺好像這個上傳插件只在第一次點擊的時候?qū)嵗?shù)傳給后臺，所以以后值都是不變的，應(yīng)該怎么解決這個問題呢？下面是我的js代碼細(xì)節(jié)：
JavaScript code:
<script type="text/javascript">
$(function () {
var uploadCatlog;
//設(shè)置母版頁導(dǎo)航欄的當(dāng)前選中樣式
$("#menu .nav5").addClass("menu_active").siblings().removeClass("menu_active");
//生成類別菜單樣式和導(dǎo)航菜單
$("#kllst li").click(function () {
$(this).addClass("currentli").siblings().removeClass();
uploadCatlog = $(this).text();
});
var btnUpload = $('#upload');
var status = $('#status');
btnUpload.click(function () {
if (uploadCatlog == undefined) {
status.text("必須先選擇上傳文件的類別！").addClass('error');
return false;
}
new AjaxUpload(btnUpload, {
action: 'handler/doUpload.ashx',
name: 'uploadfile',
onSubmit: function (file, ext) {
if (!(ext && /^(doc|docx|xls)$/.test(ext))) {
status.text('只支持WORD,EXCEL格式上傳！').addClass('error');
return false;
}
status.text('正在上傳，請稍候...');
},
data: { "catlog": uploadCatlog },
onComplete: function (file, response) {
status.text('').removeClass('error');
if (response == "success") {
var fimgtype;
if (file.indexOf(".doc") != -1 || file.indexOf(".docx") != -1) {
fimgtype = "word";
}
if (file.indexOf(".xls") != -1) {
fimgtype = "excel";
}
$('<li></li>').appendTo('#files').html('<img src="images/' + fimgtype + '.png" alt="" /><br />[' + uploadCatlog + ']' + file).addClass('success');
} else {
$('<li></li>').appendTo('#files').text(file).addClass('error');
}
}
});
});
});
</script>
后來找到了一個解決方案，那就是：創(chuàng)建實例后就不會變了，可以在onSubmit回調(diào)函數(shù)中調(diào)用SetData方法設(shè)置動態(tài)參數(shù)，如下的代碼及注釋詳情：
JavaScript code:
//可以使用這些方法來配置AJAX的上傳
var upload = new AjaxUpload(‘#div_id',{action: ‘upload.php'});
//例如當(dāng)用戶選擇了一些東西，設(shè)置一些參數(shù)
upload.setData({ ”catlog”:
ajax的上傳參數(shù)提交，總是會因為各種各樣的錯誤而出現(xiàn)問題，但是如何來解決問題，怎樣使用最好的方法來解決問題，是個值得深究的難題，要想很好的解決編程過程中出現(xiàn)的問題，還是需要自己不斷的鉆研和學(xué)習(xí)！
JavaScript code:
復(fù)制代碼 代碼如下:
<script type="text/javascript">
$(function () {
var uploadCatlog;
//設(shè)置母版頁導(dǎo)航欄的當(dāng)前選中樣式
$("#menu .nav5").addClass("menu_active").siblings().removeClass("menu_active");
//生成類別菜單樣式和導(dǎo)航菜單
$("#kllst li").click(function () {
$(this).addClass("currentli").siblings().removeClass();
uploadCatlog = $(this).text();
});
var btnUpload = $('#upload');
var status = $('#status');
btnUpload.click(function () {
if (uploadCatlog == undefined) {
status.text("必須先選擇上傳文件的類別！").addClass('error');
return false;
}
new AjaxUpload(btnUpload, {
action: 'handler/doUpload.ashx',
name: 'uploadfile',
onSubmit: function (file, ext) {
if (!(ext && /^(doc|docx|xls)$/.test(ext))) {
status.text('只支持WORD,EXCEL格式上傳！').addClass('error');
return false;
}
status.text('正在上傳，請稍候...');
},
data: { "catlog": uploadCatlog },
onComplete: function (file, response) {
status.text('').removeClass('error');
if (response == "success") {
var fimgtype;
if (file.indexOf(".doc") != -1 || file.indexOf(".docx") != -1) {
fimgtype = "word";
}
if (file.indexOf(".xls") != -1) {
fimgtype = "excel";
}
$('<li></li>').appendTo('#files').html('<img src="images/' + fimgtype + '.png" alt="" /><br />[' + uploadCatlog + ']' + file).addClass('success');
} else {
$('<li></li>').appendTo('#files').text(file).addClass('error');
}
}
});
});
});
</script>
后來找到了一個解決方案，那就是：創(chuàng)建實例后就不會變了，可以在onSubmit回調(diào)函數(shù)中調(diào)用SetData方法設(shè)置動態(tài)參數(shù)，如下的代碼及注釋詳情：
JavaScript code:
//可以使用這些方法來配置AJAX的上傳
var upload = new AjaxUpload(‘#div_id',{action: ‘upload.php'});
//例如當(dāng)用戶選擇了一些東西，設(shè)置一些參數(shù)
upload.setData({ ”catlog”:
ajax的上傳參數(shù)提交，總是會因為各種各樣的錯誤而出現(xiàn)問題，但是如何來解決問題，怎樣使用最好的方法來解決問題，是個值得深究的難題，要想很好的解決編程過程中出現(xiàn)的問題，還是需要自己不斷的鉆研和學(xué)習(xí)！
相關(guān)文章
這篇文章主要介紹了javascript中return的作用，有需要的朋友可以參考一下2013-12-12
這篇文章介紹了ES6中對象的用法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-05-05
詳解在網(wǎng)頁上通過JS實現(xiàn)文本的語音朗讀
這篇文章主要介紹了在網(wǎng)頁上通過JS實現(xiàn)文本的語音朗讀，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Javascript學(xué)習(xí)筆記之函數(shù)篇（六） : 作用域與命名空間
本文主要講述了javascript中作用域和命名空間的區(qū)別，十分的詳細(xì)，這里推薦給大家，希望小伙伴能有所收獲2014-11-11
深入理解JavaScript系列（37）：設(shè)計模式之享元模式詳解
這篇文章主要介紹了深入理解JavaScript系列（37）：設(shè)計模式之享元模式詳解,享元模式（Flyweight）,運行共享技術(shù)有效地支持大量細(xì)粒度的對象,避免大量擁有相同內(nèi)容的小類的開銷(如耗費內(nèi)存),使大家共享一個類(元類),需要的朋友可以參考下2015-03-03
定義了一個新的函數(shù), 你實際上聲明了一個新的類, 而這個函數(shù)本身就相當(dāng)于類的構(gòu)造函數(shù)，下面為大家展示創(chuàng)建一個新類的兩種不同方式2014-08-08
Javascript圖像處理—亮度對比度應(yīng)用案例
上一篇文章，我們講解了圖像處理中的卷積操作和平滑（也就是模糊）處理，這篇文章我們進(jìn)行亮度和對比度的變化,有需要的朋友可以參考下2013-01-01
js腳本學(xué)習(xí) 比較實用的基礎(chǔ)...2006-09-09
當(dāng)任意一個塊級元素的寬度或高度被顯式指定，它應(yīng)當(dāng)只確定這個可見元素自身(內(nèi)容區(qū))的寬度或高度，而padding, border和margin隨后被應(yīng)用2012-12-12
你真的了解JavaScript嗎？...2007-02-02