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了，說明白了嗎？