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 相关文章推荐
Jquery动态更改一张位图的src与Attr的使用
Jul 31 Javascript
jQuery图片轮播的具体实现
Sep 11 Javascript
前台js调用后台方法示例
Dec 02 Javascript
Js为表单动态添加节点内容的方法
Feb 10 Javascript
JavaScript中几种排序算法的简单实现
Jul 29 Javascript
JavaScript实现99乘法表及隔行变色实例代码
Feb 24 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
Angular2 (RC4) 路由与导航详解
Sep 21 Javascript
前端分页功能的实现以及原理(jQuery)
Jan 22 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
Dec 17 Javascript
uni-app如何实现增量更新功能
Jan 03 Javascript
详细分析JavaScript中的深浅拷贝
Sep 17 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
BOOM vs RR BO5 第二场 2.14
2021/03/10 DOTA
获取Javscript执行函数名称的方法
2006/12/22 Javascript
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
js indexOf()定义和用法
2012/10/21 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
判断一个变量是数组Array类型的方法
2013/09/16 Javascript
node.js中的fs.mkdir方法使用说明
2014/12/17 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
2015/12/03 Javascript
Javascript农历与公历相互转换的简单实例
2016/10/09 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
基于JS对象创建常用方式及原理分析
2017/06/28 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
JavaScript实现二叉树的先序、中序及后序遍历方法详解
2017/10/26 Javascript
详解如何在你的Vue项目配置vux
2018/06/04 Javascript
js计算两个日期间的天数月的实例代码
2018/09/20 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
2019/05/23 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
python计算最小优先级队列代码分享
2013/12/18 Python
python构建深度神经网络(DNN)
2018/03/10 Python
关于python写入文件自动换行的问题
2018/06/23 Python
Python如何使用BeautifulSoup爬取网页信息
2019/11/26 Python
Scrapy模拟登录赶集网的实现代码
2020/07/07 Python
基于 HTML5 WebGL 实现的垃圾分类系统
2019/10/08 HTML / CSS
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
canvas 下载二维码和图片加水印的方法
2018/03/21 HTML / CSS
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
Overload和Override的区别。Overloaded的方法是否可以改变返回值的类型
2013/10/30 面试题
工作自荐信
2013/12/11 职场文书
2014年医学生毕业自我鉴定
2014/03/26 职场文书
邹越感恩父母演讲稿
2014/08/28 职场文书
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
通过Qt连接OpenGauss数据库的详细教程
2021/06/23 PostgreSQL
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL