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 弹出登录窗口实现代码
Dec 24 Javascript
JavaScript中的分号插入机制详细介绍
Feb 11 Javascript
jquery+javascript编写国籍控件
Feb 12 Javascript
json传值以及ajax接收详解
May 24 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
Aug 05 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
深入理解Commonjs规范及Node模块实现
May 17 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 Javascript
AngularJs导出数据到Excel的示例代码
Aug 11 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 Javascript
详解vue-router的导航钩子(导航守卫)
Nov 02 Javascript
vue vant中picker组件的使用
Nov 03 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连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
修改Laravel5.3中的路由文件与路径
2016/08/10 PHP
深入解析PHP底层机制及相关原理
2020/12/11 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
uploadify 3.0 详细使用说明
2012/06/18 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
2015/09/17 Javascript
实例解析angularjs的filter过滤器
2016/12/14 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
Vue组件化通讯的实例代码
2017/06/23 Javascript
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
从零开始用electron手撸一个截屏工具的示例代码
2018/10/10 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019/08/28 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
react ant Design手动设置表单的值操作
2020/10/31 Javascript
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python基础教程之Hello World!
2014/08/29 Python
python web框架学习笔记
2016/05/03 Python
Python的爬虫程序编写框架Scrapy入门学习教程
2016/07/02 Python
Python中分支语句与循环语句实例详解
2018/09/13 Python
python flask安装和命令详解
2019/04/02 Python
详解pandas的外部数据导入与常用方法
2019/05/01 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
解决Keras 自定义层时遇到版本的问题
2020/06/16 Python
谷歌浏览器小字体处理方案即12px以下字体
2013/12/17 HTML / CSS
Ibatis中如何提高SQL Map的性能
2013/05/11 面试题
服务中心夜班服务员岗位职责
2013/11/27 职场文书
我们的节日清明节活动方案
2014/03/05 职场文书
市级优秀班主任事迹材料
2014/05/13 职场文书
员工考勤管理制度
2015/08/06 职场文书
react合成事件与原生事件的相关理解
2021/05/13 Javascript
springboot+VUE实现登录注册
2021/05/27 Vue.js
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js
Go语言入门exec的基本使用
2022/05/20 Golang