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


Posted in Javascript onDecember 11, 2012

先前,我从网上下载了一个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的上传参数提交,总是会因为各种各样的错误而出现问题,但是如何来解决问题,怎样使用最好的方法来解决问题,是个值得深究的难题,要想很好的解决编程过程中出现的问题,还是需要自己不断的钻研和学习!
Javascript 相关文章推荐
onkeydown事件解决按回车键直接提交数据的需求
Apr 11 Javascript
JS中eval函数的使用示例
Jul 21 Javascript
简单的Jquery全选功能
Nov 07 Javascript
将form表单中的元素转换成对象的方法适用表单提交
May 02 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
Jan 10 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
May 21 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
Feb 22 Javascript
vue中倒计时组件的实例代码
Jul 06 Javascript
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
如何基于vue-cli3.0构建功能完善的移动端架子
Apr 24 Javascript
vuex 动态注册方法 registerModule的实现
Jul 03 Javascript
如何解决日期函数new Date()浏览器兼容性问题
Sep 11 Javascript
jQuery(非HTML5)可编辑表格实现代码
Dec 11 #Javascript
jQuery使用数组编写图片无缝向左滚动
Dec 11 #Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
Dec 10 #Javascript
ajax不执行success回调而是执行了error回调
Dec 10 #Javascript
解决js正则匹配换行问题实现代码
Dec 10 #Javascript
解决jquery异步按一定的时间间隔刷新问题
Dec 10 #Javascript
怎样在JavaScript里写一个swing把数据插入数据库
Dec 10 #Javascript
You might like
深入php list()函数的详解
2013/06/05 PHP
php生成图形(Libchart)实例
2013/11/06 PHP
php共享内存段示例分享
2014/01/20 PHP
CodeIgniter与PHP5.6的兼容问题
2015/07/16 PHP
PHP大文件分片上传的实现方法
2018/10/28 PHP
深入解析PHP底层机制及相关原理
2020/12/11 PHP
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
2012/03/01 Javascript
js 限制input只能输入数字、字母和汉字等等
2013/12/18 Javascript
javascript的alert box在java中如何显示多行
2014/05/18 Javascript
JS实现5秒钟自动封锁div层的方法
2015/02/20 Javascript
基于JavaScript实现一定时间后去执行一个函数
2015/12/14 Javascript
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
2017/04/20 Javascript
vue 实现的树形菜的实例代码
2018/03/19 Javascript
使用javascript做在线算法编程
2018/05/25 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
layui监听select变化,以及设置radio选中的方法
2019/09/24 Javascript
Python中的类与对象之描述符详解
2015/03/27 Python
介绍Python中的一些高级编程技巧
2015/04/02 Python
在Python中使用PIL模块处理图像的教程
2015/04/29 Python
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
python编写Logistic逻辑回归
2020/12/30 Python
Python魔法方法详解
2019/02/13 Python
对python中的try、except、finally 执行顺序详解
2019/02/18 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
SheIn俄罗斯:时尚女装网上商店
2017/02/28 全球购物
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
职业生涯规划书基本格式
2014/01/06 职场文书
党员教师群众路线思想汇报范文
2014/10/28 职场文书
2015年财务部年度工作总结
2015/05/19 职场文书
高中体育课教学反思
2016/02/16 职场文书
python基础之停用词过滤详解
2021/04/21 Python
Java elasticsearch安装以及部署教程
2021/06/28 Java/Android