软件开发培训班 >> 编程开发 >> JavaScript


ajax上传时参数提交不更新等相关问题

　　本文标签：ajax上传,ajax参数

先前，我从网上下载了一个jQuery的Ajax上传插件，网页的左侧是上传分类，想要实现的一个功能是如此这样的：我本来是打算在服务端根据上传分类建立不同的文件夹来保存文件的，因此这个就需要传一个上传分类参数给后台 。这些上传分类是从数据库读出，用repeater生成的 。当点击其中一个分类时就给他设置一个样式，并且将这个分类的名字保存到一个变量uploadCatlog中 。我可以取到分类并传给后台，但是很奇怪的是只有第一次是正确的，以后的每次参数都不更新 。其实在上传插件的onComplete回调函数中也用到了uploadCatlog，它的值也已经更新了 。我感觉好像这个上传插件只在第一次点击的时候实例化并将参数传给后台，所以以后值都是不变的，应该怎么解决这个问题呢？下面是我的js代码细节：
JavaScript code:
复制代码 代码如下:

<script type="text/javascript">
$(function () {
var uploadCatlog;
//设置母版页导航栏的当前选中样式
$("#menu .nav5").addClass("menu_active").siblings().removeClass("menu_active");
//生成类别菜单样式和导航菜单
$("#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>

后来找到了一个解决方案，那就是：创建实例后就不会变了，可以在onSubmit回调函数中调用SetData方法设置动态参数，如下的代码及注释详情：
JavaScript code:
//可以使用这些方法来配置AJAX的上传
var upload = new AjaxUpload(‘#div_id,{action: ‘upload.php});
//例如当用户选择了一些东西，设置一些参数
upload.setData({ ”catlog”:
ajax的上传参数提交，总是会因为各种各样的错误而出现问题，但是如何来解决问题，怎样使用最好的方法来解决问题，是个值得深究的难题，要想很好的解决编程过程中出现的问题，还是需要自己不断的钻研和学习！