ajax上传时参数提交不更新等相关问题_基础知识

先前,我从网上下载了一个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的上传参数提交,总是会因为各种各样的错误而出现问题,但是如何来解决问题,怎样使用最好的方法来解决问题,是个值得深究的难题,要想很好的解决编程过程中出现的问题,还是需要自己不断的钻研和学习!

时间: 2024-11-08 20:16:09

ajax上传时参数提交不更新等相关问题_基础知识的相关文章

javascript定义变量时加var与不加var的区别_基础知识

一.外部的为全局,内部的为局部变量. 二.加var为局部变量(在方法内),不加var为全局变量(当方法内有一次使用后) 复制代码 代码如下: <script type="text/javascript"> var golbe="global"; test(); function test(){      var local="local";     document.write(golbe);     document.write(l

cordova 拍照上传时设置的一些参数的具体说明

问题描述 cordova 拍照上传时设置的一些参数的具体说明 下面这段代码,getPicture 里面的quality .destinationType .correctOrientation这些都是用来设置什么的??? targetWidth 和 targetHeight 是固定照片的大小吗 ??? navigator.camera.getPicture(onPhotoSuccess, onPhotoFail, { quality: 70, destinationType: destinati

使用ajaxfileupload.js实现ajax上传文件php版_jquery

 无论是PHP,还是其他的服务端脚本都提供了文件上传功能,实现起来也比较简单.而利用JavaScript来配合,即可实现Ajax方式的文件上传.虽然jQuery本身没有提供这样的简化函数,但有不少插件可以实现.其中,Phpletter.com提供的ajaxfileupload.js是一个轻量的插件,而且编写方式与jQuery提供的全局方法$.post()非常相似,简单易用. 不过,该插件实在太简化了,除了可提供需上传文件的路径外,也就不能传递额外的值到后台服务端.所以,我修改了一下该脚本,增加个

基于HTML5的可预览多图片Ajax上传_AJAX相关

一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如flash文件需与页面同父文件夹,JavaScript文件大小也很可观. 我之前曾翻译编辑过一篇"Ajax Upload多文件上传插件"的文章,此插件的亮点是使用隐藏的iframe框架页面模拟ajax上传,但是,实际上,还是一次只能上传1张图片,可以多次上传而已. HTML5是个好东东,其中

基于HTML5的可预览多图片Ajax上传

一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如flash文件需与页面同父文件夹,JavaScript文件大小也很可观. 我之前曾翻译编辑过一篇"Ajax Upload多文件上传插件"的文章,此插件的亮点是使用隐藏的iframe框架页面模拟ajax上传,但是,实际上,还是一次只能上传1张图片,可以多次上传而已. HTML5是个好东东,其中

Ajax上传文件进度条Codular

现在,人们喜欢在浏览网页时做一些其他事情而不离开该网页,这通常是通过ajax来实现.大多数情况,人们使用jQuery来实现,但是随着浏览器的进步,人们比不需要这么做.这里我们将介绍如何在不离开页面的情况下将文件上传到服务器,我们将使用与我们之前的文章中使用的相同的后端PHP代码. 该脚本将上传文件至服务器,同时显示上传进度,并最终返回上传文件的链接地址.在某些情况下,你可能想要返回上传文件的id或者其他的应用信息. Note: 该代码不支持较老的ie浏览器,通过Can I use我们只支持ie1

方法-多个file上传事件触发提交

问题描述 多个file上传事件触发提交 我想在文件上传后,将文件提交到后台保存,当只有一个file控件时是没问题的,但我添加多个file控件后,除了初始的file控件,其他的死活提交不了,jquery的submit方法根本不执行,请教大神. 贴上代码,具体的内容我就不写了,因为开发机器上不了网,内容为手敲 //校验上传的文件是否符合规范(具体内容省略了) function CheckExt(){ ....... ....... saveFile(); } function saveFile(){

Ajax上传实现根据服务器端返回数据进行js处理的方法_AJAX相关

本文实例讲述了Ajax上传实现根据服务器端返回数据进行js处理的方法.分享给大家供大家参考.具体如下: Ajax上传说白了还是使用form表单提交,在当前页面加一个iframe,将提交的内容跳转到iframe中,造成一种页面无刷新的错觉. 以前也做过上传,基本是是使用commons-fileupload组件,基本的步骤是使用servlet处理完上传之后,使用PrintWrite的对象实例输出显示内容,可以是直接输出内容,也可以是输出script进行操作如 复制代码 代码如下: response.

详解Ajax和form+iframe 实现文件上传的方法(两种方式)_AJAX相关

自从有html5之后,文件上传变的非常简单.很方便的解决了项目中需要用到的文件上传功能.HTML5支持多图片上传,而且支持ajax上传,而且支持上传之前图片的预览,而且支持图片拖拽上传,而且还是纯粹利用file控件实现,JS代码寥寥,想不让人称赞都难啊! HTML5Ajax上传 html5的上传实现,是需要file控件以及XMLHttpRequest请求.下面是我封装的一个上传插件: function fileUpload(options) { var opts = options || {};