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 相关文章推荐
IE与FireFox的兼容性问题分析
Apr 22 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
Sep 27 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
Dec 25 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 Javascript
javascript基本常用排序算法解析
Sep 27 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
Vue导出json数据到Excel电子表格的示例
Dec 04 Javascript
详解vue-cli脚手架中webpack配置方法
Aug 22 Javascript
实现vuex与组件data之间的数据同步更新方式
Nov 12 Javascript
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
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中常用的转义函数
2014/02/28 PHP
PHP发送短信代码分享
2015/08/11 PHP
如何写php守护进程(Daemon)
2015/12/30 PHP
PHP中set_include_path()函数相关用法分析
2016/07/18 PHP
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
Jquery中对数组的操作代码
2011/08/12 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
js 调用百度地图api并在地图上进行打点添加标注
2014/05/13 Javascript
jquery实现在光标位置插入内容的方法
2015/02/05 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
2016/08/01 Javascript
JavaScript制作简单分页插件
2016/09/11 Javascript
jQuery中table数据的值拷贝和拆分
2017/03/19 Javascript
JS设计模式之惰性模式(二)
2017/09/29 Javascript
基于vue.js无缝滚动效果
2018/01/25 Javascript
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
jquery.pager.js实现分页效果
2019/07/29 jQuery
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
Python系统监控模块psutil功能与经典用法分析
2018/05/24 Python
python自定义函数实现一个数的三次方计算方法
2019/01/20 Python
python多线程并发及测试框架案例
2019/10/15 Python
用Python实现校园通知更新提醒功能
2019/11/23 Python
基于FME使用Python过程图解
2020/05/13 Python
python如何保存文本文件
2020/06/07 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
python try...finally...的实现方法
2020/11/25 Python
6种非常炫酷的CSS3按钮边框动画特效
2016/03/16 HTML / CSS
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
C语言面试题
2015/10/30 面试题
商务英语专业应届毕业生求职信
2013/10/28 职场文书
大专毕业生自我鉴定
2013/11/21 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
给妈妈洗脚活动方案
2014/08/16 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript