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实现IE浏览器兼容placeholder效果
Oct 14 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
详解js图片轮播效果实现原理
Dec 17 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
Dec 26 Javascript
详解vue表单验证组件 v-verify-plugin
Apr 19 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 Javascript
基于AngularJS的简单使用详解
Sep 10 Javascript
Angular 5.0 来了! 有这些大变化
Nov 15 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 Javascript
vue表单数据交互提交演示教程
Nov 13 Javascript
Element-UI+Vue模式使用总结
Jan 02 Javascript
Vue学习之组件用法实例详解
Jan 06 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日期控制类实例
2014/12/09 PHP
Yii使用EasyWechat实现小程序获取用户的openID的方法
2020/04/29 PHP
js同时按下两个方向键
2007/12/01 Javascript
遍历DOM对象内的元素属性示例代码
2014/02/08 Javascript
JavaScript中的异常捕捉介绍
2014/12/31 Javascript
javascript运动详解
2015/07/06 Javascript
jQuery可见性过滤选择器用法示例
2016/09/09 Javascript
Vue.js中数组变动的检测详解
2016/10/12 Javascript
纯JS焦点图特效实例(可一个页面多用)
2016/12/07 Javascript
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
2017/11/23 Javascript
vue路由前进后退动画效果的实现代码
2018/12/10 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
JS基于对象的链表实现与使用方法示例
2019/01/31 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
2019/02/18 jQuery
vue实现路由切换改变title功能
2019/05/28 Javascript
使用vue-router在Vue页面之间传递数据的方法
2019/07/15 Javascript
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
JS实现联想、自动补齐国家或地区名称的功能
2020/07/07 Javascript
vue-video-player 断点续播的实现
2021/02/01 Vue.js
解决Python中由于logging模块误用导致的内存泄露
2015/04/23 Python
python使用win32com库播放mp3文件的方法
2015/05/30 Python
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
解决python3 json数据包含中文的读写问题
2018/05/10 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
女性时尚网购:Chic Me
2019/07/30 全球购物
如何利用find命令查找文件
2016/11/18 面试题
护理专业学生的求职信范文
2013/12/11 职场文书
大学生家政服务项目创业计划书
2014/01/30 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
化工见习报告范文
2014/10/31 职场文书
golang中的空slice案例
2021/04/27 Golang