jqueryformjs上传文件
① jquery 多个 上传文件教程
jquery 实现多个上传文件教程：
首先创建解决方案,添加jquery的js和一些资源文件(如图片和进度条显示等):
jquery-1.3.2.min.js
jquery.uploadify.v2.1.0.js
jquery.uploadify.v2.1.0.min.js
swfobject.js
uploadify.css
1、页面的基本代码如下
这里用的是aspx页面(html也是也可的)
页面中引入的js和js函数如下：
<scriptsrc="js/jquery-1.3.2.min.js"type="text/javascript"></script>
<scriptsrc="js/jquery.uploadify.v2.1.0.js"type="text/javascript"></script>
<scriptsrc="js/jquery.uploadify.v2.1.0.min.js"type="text/javascript"></script>
<scriptsrc="js/swfobject.js"type="text/javascript"></script>
<linkhref="css/uploadify.css"rel="stylesheet"type="text/css"/>
</script>
js函数：
<scripttype="text/javascript">
$(document).ready(function(){
$("#uploadify").uploadify({
'uploader':'image/uploadify.swf',//uploadify.swf文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后淡出打开文件对话框
'script':'Handler1.ashx',//script：后台处理程序的相对路径
'cancelImg':'image/cancel.png',
'buttenText':'请选择文件',//浏览按钮的文本，默认值：BROWSE。
'sizeLimit':999999999,//文件大小显示
'floder':'Uploader',//上传文件存放的目录
'queueID':'fileQueue',//文件队列的ID，该ID与存放文件队列的div的ID一致
'queueSizeLimit':120,//上传文件个数限制
'progressData':'speed',//上传速度显示
'auto':false,//是否自动上传
'multi':true,//是否多文件上传
//'onSelect':function(e,queueId,fileObj){
//alert("唯一标识:"+queueId+" "+
//"文件名："+fileObj.name+" "+
//"文件大小："+fileObj.size+" "+
//"创建时间："+fileObj.creationDate+" "+
//"最后修改时间："+fileObj.modificationDate+" "+
//"文件类型："+fileObj.type);
//}
'onQueueComplete':function(queueData){
alert("文件上传成功！");
return;
}
});
});
页面中的控件代码：
<body>
<formid="form1"runat="server">
<divid="fileQueue">
</div>
<div>
<p>
<inputtype="file"name="uploadify"id="uploadify"/>
<inputid="Button1"type="button"value="上传"onclick="javascript:$('#uploadify').uploadifyUpload()"/>
<inputid="Button2"type="button"value="取消"onclick="javascript:$('#uploadify').uploadifyClearQueue()"/>
</p>
</div>
</form>
</body>
函数主要参数：
$(document).ready(function(){
$('#fileInput1').fileUpload({
'uploader':'uploader.swf',//不多讲了
'script':'/AjaxByJQuery/file.do',//处理Action
'cancelImg':'cancel.png',
'folder':'',//服务端默认保存路径
'scriptData':{'methed':'uploadFile','arg1','value1'},
//向后台传递参数,methed,arg1为参数名,uploadFile,value1为对应的参数值,服务端通过request["arg1"]
'buttonText':'UpLoadFile',//按钮显示文字,不支持中文,解决方案见下
//'buttonImg':'图片路径',//通过设置背景图片解决中文问题,就是把背景图做成按钮的样子
'multi':'true',//多文件上传开关
'fileExt':'*.xls;*.csv',//文件过滤器
'fileDesc':'.xls',//文件过滤器详解见文档
'onComplete':function(event,queueID,file,serverData,data){
//serverData为服务器端返回的字符串值
alert(serverData);
}
});
});后台一般处理文件：
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.IO;
usingSystem.Net;
usingSystem.Web;
usingSystem.Web.Services;
namespacefupload
{
///<summary>
///Handler1的摘要说明
///</summary>
publicclassHandler1:IHttpHandler
{
publicvoidProcessRequest(HttpContextcontext)
{
context.Response.ContentType="text/plain";
HttpPostedFilefile=context.Request.Files["Filedata"];//对客户端文件的访问
stringuploadPath=HttpContext.Current.Server.MapPath(@context.Request["folder"])+"\";//服务器端文件保存路径
if(file!=null)
{
if(!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);//创建服务端文件夹
}
file.SaveAs(uploadPath+file.FileName);//保存文件
context.Response.Write("上传成功");
}
else
{
context.Response.Write("0");
}
}
publicboolIsReusable
{
get
{
returnfalse;
}
}
}
}
以上方式基本可以实现多文件的上传，大文件大小是在控制在10M以下/。
② 用jquery如何实现提交表单点击提交之后显示正在上传中，之后显示上传成功的效果
需要准备的材料分别有：电脑、html编辑器、浏览器。
1、首先，打开html编辑器，新建html文件，例如：index.html，并引入jquery。
③ jquery.fileUpload.js文件上传问题
了解，fileuploader方法需要先初始化，然后才能触发上传，并不需要你手动触发change事件
你只需
html
<form>
file:<inputtype="file"id="file"name="file">
</form>
js
$('#file').on('change',function(){
//这里可以做校验，返回false就不会触发下面的上传插件，否则就会触发上传
if(!this.value||this.value.indexOf('.jpg')==-1){
returnfalse;
}
});
//初始化上传插件
$('#file').fileupload({
autoUpload:true,//这里为true，则选中文件后就会自动上传
url:'',
done:$.noop,
fail:$.noop
});
④ 使用jquery.form.js 提交包含附件的表单
如果你是想 ajax提交带文件的表单，那真的没法做，
基本都是用iframe模拟 异步提交的···
jquery.form.js 提交带文件的表单，也是 用iframe模拟 异步提交的
$("#btnUpload").click(function () {
8 if ($("#flUpload").val() == "") {
9 alert("请选择一个图片文件，再点击上传。");
10 return;
11 }
12 $('#UpLoadForm').ajaxSubmit({
13 success: function (html, status) {
14 var result = html.replace("<pre>", "");
15 result = result.replace("</pre>", "");
16 $("#image").attr('src', result);
17 alert(result);
18 }
19 });
20 });
⑤ jQuery.form.js 使用ajaxForm、ajaxSubmit提交表单上传文件后服务器端返回json数据IE浏览器无法解析。
我给你出个招，我在struts1里面用的很好，你把运行完action得到的json对象保存在session里面，然后让这个action跳转到一个jsp页面，之后在这个jsp页面中把他取出来，这样就可以把json对象传给ajax了，说明白了吗？