ajax上傳大文件
Ⅰ jquery ajax 上傳文件怎麼搞
Query Ajax在web應用開發中很常用，它主要包括有ajax,get,post,load,getscript等等這幾種常用無刷新操作方法，接下來通過本文給大家介紹jquery ajax 上傳文件處理方式。
FormData對象
XMLHttpRequest Level 2添加了一個新的介面FormData.利用FormData對象,我們可以通過javaScript用一些鍵值對來模擬一系列表單控制項,我們還可以使用XMLHttpRequest的send()方法來非同步的提交這個」表單」.比起普通的ajax,使用FormData的最大優點就是我們可以非同步上傳一個二進制文件.
所有主流瀏覽器的較新版本都已經支持這個對象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。之前都是用原生js的XMLHttpRequest寫的請求
XMLHttpRequest方式
xhr.open("POST", uri, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// Handle response.
alert(xhr.responseText); // handle response.
}
};
fd.append('myFile', file);
// Initiate a multipart/form-data upload
xhr.send(fd);
其實jquery的ajax也可以支持到的，關鍵是設置：processData 和 contentType 。
ajax方式
var formData = new FormData();
var name = $("input").val();
formData.append("file",$("#upload")[0].files[0]);
formData.append("name",name);
$.ajax({
url : Url,
type : 'POST',
data : formData,
// 告訴jQuery不要去處理發送的數據
processData : false,
// 告訴jQuery不要去設置Content-Type請求頭
contentType : false,
beforeSend:function(){
console.log("正在進行，請稍候");
},
success : function(responseStr) {
if(responseStr.status===0){
console.log("成功"+responseStr);
}else{
console.log("失敗");
}
},
error : function(responseStr) {
console.log("error");
}
});
Ⅱ ajax多文件上傳如何實現進度條
可以找一個上傳插件，如：webupload。
上傳插件可以配置顯示上傳進度，多文件上傳可以同時顯示多個文件的進度條。
如果自己寫的話，需要考慮瀏覽器兼容和文件上傳控制等。
Ⅲ 如何用Ajax實現多文件上傳
jquery 實現多個上傳文件教程：
首先創建解決方案,添加jquery的js和一些資源文件(如圖片和進度條顯示等):
1
2
3
4
5
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函數如下：
1
2
3
4
5
6
7
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.uploadify.v2.1.0.js" type="text/javascript"></script>
<script src="js/jquery.uploadify.v2.1.0.min.js" type="text/javascript"></script>
<script src="js/swfobject.js" type="text/javascript"></script>
<link href="css/uploadify.css" rel="stylesheet" type="text/css" />
</script>
js函數：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script type="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 + "\r\n" +
// "文件名：" + fileObj.name + "\r\n" +
// "文件大小：" + fileObj.size + "\r\n" +
// "創建時間：" + fileObj.creationDate + "\r\n" +
// "最後修改時間：" + fileObj.modificationDate + "\r\n" +
// "文件類型：" + fileObj.type);
// }
'onQueueComplete': function (queueData) {
alert("文件上傳成功！");
return;
}
});
});
頁面中的控制項代碼：
1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
<form id="form1" runat="server">
<div id="fileQueue">
</div>
<div>
<p>
<input type="file" name="uploadify" id="uploadify"/>
<input id="Button1" type="button" value="上傳" onclick="javascript: $('#uploadify').uploadifyUpload()" />
<input id="Button2" type="button" value="取消" onclick="javascript:$('#uploadify').uploadifyClearQueue()" />
</p>
</div>
</form>
</body>
函數主要參數：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(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);
}
});
});
後台一般處理文件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
using System;
using System.Collections.Generic;
using System.Linq;
using System.IO;
using System.Net;
using System.Web;
using System.Web.Services;
namespace fupload
{
/// <summary>
/// Handler1 的摘要說明
/// </summary>
public class Handler1 : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
HttpPostedFile file = context.Request.Files["Filedata"];//對客戶端文件的訪問
string uploadPath = 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");
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
以上方式基本可以實現多文件的上傳，大文件大小是在控制在10M以下/。
Ⅳ 怎麼用ajax實現上傳文件的功能
HTTP File Server
http-file-server是用 python 實現的 HTTP 文件伺服器，支持上傳和下載文件。
運行
$ python file-server.py files 8001
其中第一個參數files是存放文件的路徑，第二個參數8001是 HTTP 伺服器埠。
介面
1. 讀取文件
GET /pathtofile/filename
2. 讀取文件夾下所有文件（已經忽略隱藏文件）
GET /path
返迴文件列表為JSON數組，文件名末尾帶有/的表示是文件夾。filename為文件名，mtime為修改時間。
[{"filename":"f1.txt","mtime":1001},{"filename":"p3/","mtime":1002}]
3. 上傳文件
採用POST方式上傳文件，URL參數中傳參數name表示上傳的文件名，POST內容為文件內容。
POST /upload?name=filename
ajax示例:
// file is a FileReader object
var data = file.readAsArrayBuffer();
var xhr = new XMLHttpRequest();
var url = "http://localhost:8001/upload?name=xxx.md";
xhr.open("post", url, true);
xhr.setRequestHeader("Accept", "application/json, text/javascript, */*; q=0.01");
xhr.onreadystatechange = function() {
if (xhr.readyState==4 && xhr.status==200)
{
console.log(xhr.responseText);
}
}
xhr.send(data);
文件名 filename 可以包含相對路徑。比如：upload?name=md/xxx.md。則上傳至md目錄下。
Ⅳ 如何用ajax上傳文件
引入ajaxfileupload.js
jQuery.extend({
createUploadIframe:function(id,uri)
{
//createframe
varframeId='jUploadFrame'+id;
if(window.ActiveXObject){
vario=document.createElement('<iframeid="'+frameId+'"name="'+frameId+'"/>');
if(typeofuri=='boolean'){
io.src='javascript:false';
}
elseif(typeofuri=='string'){
io.src=uri;
}
}
else{
vario=document.createElement('iframe');
io.id=frameId;
io.name=frameId;
}
io.style.position='absolute';
io.style.top='-1000px';
io.style.left='-1000px';
document.body.appendChild(io);
returnio
},
createUploadForm:function(id,fileElementId)
{
//createform
varformId='jUploadForm'+id;
varfileId='jUploadFile'+id;
varform=$('<formaction=""method="POST"name="'+formId+'"id="'+formId+'"enctype="multipart/form-data"></form>');
varoldElement=$('#'+fileElementId);
varnewElement=$(oldElement).clone();
$(oldElement).attr('id',fileId);
$(oldElement).before(newElement);
$(oldElement).appendTo(form);
//setattributes
$(form).css('position','absolute');
$(form).css('top','-1200px');
$(form).css('left','-1200px');
$(form).appendTo('body');
returnform;
},
addOtherRequestsToForm:function(form,data)
{
//addextraparameter
varoriginalElement=$('<inputtype="hidden"name=""value="">');
for(varkeyindata){
name=key;
value=data[key];
varcloneElement=originalElement.clone();
cloneElement.attr({'name':name,'value':value});
$(cloneElement).appendTo(form);
}
returnform;
},
ajaxFileUpload:function(s){
//TODOintroceglobalsettings,,notonlytimeout
s=jQuery.extend({},jQuery.ajaxSettings,s);
varid=newDate().getTime()
varform=jQuery.createUploadForm(id,s.fileElementId);
if(s.data)form=jQuery.addOtherRequestsToForm(form,s.data);
vario=jQuery.createUploadIframe(id,s.secureuri);
varframeId='jUploadFrame'+id;
varformId='jUploadForm'+id;
//Watchforanewsetofrequests
if(s.global&&!jQuery.active++)
{
jQuery.event.trigger("ajaxStart");
}
varrequestDone=false;
//Createtherequestobject
varxml={}
if(s.global)
jQuery.event.trigger("ajaxSend",[xml,s]);
//Waitforaresponsetocomeback
varuploadCallback=function(isTimeout)
{
vario=document.getElementById(frameId);
try
{
if(io.contentWindow)
{
xml.responseText=io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
xml.responseXML=io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;
}elseif(io.contentDocument)
{
xml.responseText=io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
xml.responseXML=io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
}
}catch(e)
{
jQuery.handleError(s,xml,null,e);
}
if(xml||isTimeout=="timeout")
{
requestDone=true;
varstatus;
try{
status=isTimeout!="timeout"?"success":"error";
//
if(status!="error")
{
//processthedata()
vardata=jQuery.uploadHttpData(xml,s.dataType);
//Ifalocalcallbackwasspecified,fireitandpassitthedata
if(s.success)
s.success(data,status);
//Firetheglobalcallback
if(s.global)
jQuery.event.trigger("ajaxSuccess",[xml,s]);
}else
jQuery.handleError(s,xml,status);
}catch(e)
{
status="error";
jQuery.handleError(s,xml,status,e);
}
//Therequestwascompleted
if(s.global)
jQuery.event.trigger("ajaxComplete",[xml,s]);
//HandletheglobalAJAXcounter
if(s.global&&!--jQuery.active)
jQuery.event.trigger("ajaxStop");
//Processresult
if(s.complete)
s.complete(xml,status);
jQuery(io).unbind()
setTimeout(function()
{ try
{
$(io).remove();
$(form).remove();
}catch(e)
{
jQuery.handleError(s,xml,null,e);
}
},100)
xml=null
}
}
//Timeoutchecker
if(s.timeout>0)
{
setTimeout(function(){
//
if(!requestDone)uploadCallback("timeout");
},s.timeout);
}
try
{
//vario=$('#'+frameId);
varform=$('#'+formId);
$(form).attr('action',s.url);
$(form).attr('method','POST');
$(form).attr('target',frameId);
if(form.encoding)
{
form.encoding='multipart/form-data';
}
else
{
form.enctype='multipart/form-data';
}
$(form).submit();
}catch(e)
{
jQuery.handleError(s,xml,null,e);
}
if(window.attachEvent){
document.getElementById(frameId).attachEvent('onload',uploadCallback);
}
else{
document.getElementById(frameId).addEventListener('load',uploadCallback,false);
}
return{abort:function(){}};
},
uploadHttpData:function(r,type){
vardata=!type;
data=type=="xml"||data?r.responseXML:r.responseText;
//Ifthetypeis"script",evalitinglobalcontext
if(type=="script")
jQuery.globalEval(data);
//GettheJavaScriptobject,ifJSONisused.
if(type=="json")
{
//,
//youhavetodeletethe'<pre></pre>'tag.
//ThepretaginChromehasattribute,sohavetouseregextoremove
vardata=r.responseText;
varrx=newRegExp("<pre.*?>(.*?)</pre>","i");
varam=rx.exec(data);
//thisisthedesireddataextracted
vardata=(am)?am[1]:"";//theonlysubmatchorempty
eval("data="+data);
}
//evaluatescriptswithinhtml
if(type=="html")
jQuery("<div>").html(data).evalScripts();
//alert($('param',data).each(function(){alert($(this).attr('value'));}));
returndata;
}
})2.引入上傳文件所需的jar
7.獲取之後怎麼處理自己看著辦咯，我只能幫到這里了
Ⅵ ajax如何 實現 文件上傳
程序說明
使用說明
實例化時，第一個必要參數是file控制項對象：
newQuickUpload(file);
第二個可選參數用來設置系統的默認屬性，包括
屬性: 默認值//說明
parameter:{},//參數對象
action:"",//設置action
timeout:0,//設置超時(秒為單位)
onReady:function(){},//上傳准備時執行
onFinish:function(){},//上傳完成時執行
onStop:function(){},//上傳停止時執行
onTimeout:function(){}//上傳超時時執行
還提供了以下方法：
upload：執行上傳操作；
stop：停止上傳操作；
dispose：銷毀程序。
varQuickUpload=function(file,options){
this.file=$$(file);
this._sending=false;//是否正在上傳
this._timer=null;//定時器
this._iframe=null;//iframe對象
this._form=null;//form對象
this._inputs={};//input對象
this._fFINISH=null;//完成執行函數
$$.extend(this,this._setOptions(options));
};
QuickUpload._counter=1;
QuickUpload.prototype={
//設置默認屬性
_setOptions:function(options){
this.options={//默認值
action:"",//設置action
timeout:0,//設置超時(秒為單位)
parameter:{},//參數對象
onReady:function(){},//上傳准備時執行
onFinish:function(){},//上傳完成時執行
onStop:function(){},//上傳停止時執行
onTimeout:function(){}//上傳超時時執行
};
return$$.extend(this.options,options||{});
},
//上傳文件
upload:function(){
//停止上一次上傳
this.stop();
//沒有文件返回
if(!this.file||!this.file.value)return;
//可能在onReady中修改相關屬性所以放前面
this.onReady();
//設置iframe,form和表單控制項
this._setIframe();
this._setForm();
this._setInput();
//設置超時
if(this.timeout>0){
this._timer=setTimeout($$F.bind(this._timeout,this),this.timeout*1000);
}
//開始上傳
this._form.submit();
this._sending=true;
},
//設置iframe
_setIframe:function(){
if(!this._iframe){
//創建iframe
variframename="QUICKUPLOAD_"+QuickUpload._counter++,
iframe=document.createElement($$B.ie?"<iframename=""+iframename+"">":"iframe");
iframe.name=iframename;
iframe.style.display="none";
//記錄完成程序方便移除
varfinish=this._fFINISH=$$F.bind(this._finish,this);
//iframe載入完後執行完成程序
if($$B.ie){
iframe.attachEvent("onload",finish);
}else{
iframe.onload=$$B.opera?function(){this.onload=finish;}:finish;
}
//插入body
varbody=document.body;body.insertBefore(iframe,body.childNodes[0]);
this._iframe=iframe;
}
},
//設置form
_setForm:function(){
if(!this._form){
varform=document.createElement('form'),file=this.file;
//設置屬性
$$.extend(form,{
target:this._iframe.name,method:"post",encoding:"multipart/form-data"
});
//設置樣式
$$D.setStyle(form,{
padding:0,margin:0,border:0,
backgroundColor:"transparent",display:"inline"
});
//提交前去掉form
file.form&&$$E.addEvent(file.form,"submit",$$F.bind(this.dispose,this));
//插入form
file.parentNode.insertBefore(form,file).appendChild(file);
this._form=form;
}
//action可能會修改
this._form.action=this.action;
},
//設置input
_setInput:function(){
varform=this._form,oldInputs=this._inputs,newInputs={},name;
//設置input
for(nameinthis.parameter){
varinput=form[name];
if(!input){
//如果沒有對應input新建一個
input=document.createElement("input");
input.name=name;input.type="hidden";
form.appendChild(input);
}
input.value=this.parameter[name];
//記錄當前input
newInputs[name]=input;
//刪除已有記錄
deleteoldInputs[name];
}
//移除無用input
for(nameinoldInputs){form.removeChild(oldInputs[name]);}
//保存當前input
this._inputs=newInputs;
},
//停止上傳
stop:function(){
if(this._sending){
this._sending=false;
clearTimeout(this._timer);
//重置iframe
if($$B.opera){//opera通過設置src會有問題
this._removeIframe();
}else{
this._iframe.src="";
}
this.onStop();
}
},
//銷毀程序
dispose:function(){
this._sending=false;
clearTimeout(this._timer);
//清除iframe
if($$B.firefox){
setTimeout($$F.bind(this._removeIframe,this),0);
}else{
this._removeIframe();
}
//清除form
this._removeForm();
//清除dom關聯
this._inputs=this._fFINISH=this.file=null;
},
//清除iframe
_removeIframe:function(){
if(this._iframe){
variframe=this._iframe;
$$B.ie?iframe.detachEvent("onload",this._fFINISH):(iframe.onload=null);
document.body.removeChild(iframe);this._iframe=null;
}
},
//清除form
_removeForm:function(){
if(this._form){
varform=this._form,parent=form.parentNode;
if(parent){
parent.insertBefore(this.file,form);parent.removeChild(form);
}
this._form=this._inputs=null;
}
},
//超時函數
_timeout:function(){
if(this._sending){this._sending=false;this.stop();this.onTimeout();}
},
//完成函數
_finish:function(){
if(this._sending){this._sending=false;this.onFinish(this._iframe);}
}
}
Ⅶ ajax 多文件上傳
程序說明
使用說明
實例化時，第一個必要參數是file控制項對象：
newQuickUpload(file);
第二個可選參數用來設置系統的默認屬性，包括
屬性: 默認值//說明
parameter:{},//參數對象
action:"",//設置action
timeout:0,//設置超時(秒為單位)
onReady:function(){},//上傳准備時執行
onFinish:function(){},//上傳完成時執行
onStop:function(){},//上傳停止時執行
onTimeout:function(){}//上傳超時時執行
還提供了以下方法：
upload：執行上傳操作；
stop：停止上傳操作；
dispose：銷毀程序。
varQuickUpload=function(file,options){
this.file=$$(file);
this._sending=false;//是否正在上傳
this._timer=null;//定時器
this._iframe=null;//iframe對象
this._form=null;//form對象
this._inputs={};//input對象
this._fFINISH=null;//完成執行函數
$$.extend(this,this._setOptions(options));
};
QuickUpload._counter=1;
QuickUpload.prototype={
//設置默認屬性
_setOptions:function(options){
this.options={//默認值
action:"",//設置action
timeout:0,//設置超時(秒為單位)
parameter:{},//參數對象
onReady:function(){},//上傳准備時執行
onFinish:function(){},//上傳完成時執行
onStop:function(){},//上傳停止時執行
onTimeout:function(){}//上傳超時時執行
};
return$$.extend(this.options,options||{});
},
//上傳文件
upload:function(){
//停止上一次上傳
this.stop();
//沒有文件返回
if(!this.file||!this.file.value)return;
//可能在onReady中修改相關屬性所以放前面
this.onReady();
//設置iframe,form和表單控制項
this._setIframe();
this._setForm();
this._setInput();
//設置超時
if(this.timeout>0){
this._timer=setTimeout($$F.bind(this._timeout,this),this.timeout*1000);
}
//開始上傳
this._form.submit();
this._sending=true;
},
//設置iframe
_setIframe:function(){
if(!this._iframe){
//創建iframe
variframename="QUICKUPLOAD_"+QuickUpload._counter++,
iframe=document.createElement($$B.ie?"<iframename=""+iframename+"">":"iframe");
iframe.name=iframename;
iframe.style.display="none";
//記錄完成程序方便移除
varfinish=this._fFINISH=$$F.bind(this._finish,this);
//iframe載入完後執行完成程序
if($$B.ie){
iframe.attachEvent("onload",finish);
}else{
iframe.onload=$$B.opera?function(){this.onload=finish;}:finish;
}
//插入body
varbody=document.body;body.insertBefore(iframe,body.childNodes[0]);
this._iframe=iframe;
}
},
//設置form
_setForm:function(){
if(!this._form){
varform=document.createElement('form'),file=this.file;
//設置屬性
$$.extend(form,{
target:this._iframe.name,method:"post",encoding:"multipart/form-data"
});
//設置樣式
$$D.setStyle(form,{
padding:0,margin:0,border:0,
backgroundColor:"transparent",display:"inline"
});
//提交前去掉form
file.form&&$$E.addEvent(file.form,"submit",$$F.bind(this.dispose,this));
//插入form
file.parentNode.insertBefore(form,file).appendChild(file);
this._form=form;
}
//action可能會修改
this._form.action=this.action;
},
//設置input
_setInput:function(){
varform=this._form,oldInputs=this._inputs,newInputs={},name;
//設置input
for(nameinthis.parameter){
varinput=form[name];
if(!input){
//如果沒有對應input新建一個
input=document.createElement("input");
input.name=name;input.type="hidden";
form.appendChild(input);
}
input.value=this.parameter[name];
//記錄當前input
newInputs[name]=input;
//刪除已有記錄
deleteoldInputs[name];
}
//移除無用input
for(nameinoldInputs){form.removeChild(oldInputs[name]);}
//保存當前input
this._inputs=newInputs;
},
//停止上傳
stop:function(){
if(this._sending){
this._sending=false;
clearTimeout(this._timer);
//重置iframe
if($$B.opera){//opera通過設置src會有問題
this._removeIframe();
}else{
this._iframe.src="";
}
this.onStop();
}
},
//銷毀程序
dispose:function(){
this._sending=false;
clearTimeout(this._timer);
//清除iframe
if($$B.firefox){
setTimeout($$F.bind(this._removeIframe,this),0);
}else{
this._removeIframe();
}
//清除form
this._removeForm();
//清除dom關聯
this._inputs=this._fFINISH=this.file=null;
},
//清除iframe
_removeIframe:function(){
if(this._iframe){
variframe=this._iframe;
$$B.ie?iframe.detachEvent("onload",this._fFINISH):(iframe.onload=null);
document.body.removeChild(iframe);this._iframe=null;
}
},
//清除form
_removeForm:function(){
if(this._form){
varform=this._form,parent=form.parentNode;
if(parent){
parent.insertBefore(this.file,form);parent.removeChild(form);
}
this._form=this._inputs=null;
}
},
//超時函數
_timeout:function(){
if(this._sending){this._sending=false;this.stop();this.onTimeout();}
},
//完成函數
_finish:function(){
if(this._sending){this._sending=false;this.onFinish(this._iframe);}
}
}
Ⅷ 用ajax上傳最大就是20M，有什麼辦法可以控制上傳文件的大小，傳多大的文件都可以
這個要看你的ajax插件代碼了，應該有個類似：maxFileSize的屬性控制,找到這個屬性值，改大點，或者把這個判斷取消掉
Ⅸ PHP 用AJAX 做多文件上傳
比較推薦使用swfupload上傳代碼，它是把swf和javascript結合起來，做成上傳代碼。功能應該是當前最豐富的。
它可以實現純粹html、javascrip難以逾越的功能：
(1)可以同時上傳多個文件；
(2)類似AJAX的無刷新上傳；
(3)可以顯示上傳進度；
(4)良好的瀏覽器兼容性；
目前QQ空間和博客網站，比較先進的圖片上傳也是基於swf和js代碼結合的做法。
關於swfupload，你可以詳細去網路上看，不重復了。
http://ke..com/view/1332553.htm
Ⅹ PHP 如何用ajax做文件上傳
通過傳統的form表單提交的方式上傳文件：
[html] view plain 在CODE上查看代碼片派生到我的代碼片<form id= "uploadForm" action= "http://localhost:8080/cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data">
<h1 >測試通過Rest介面上傳文件 </h1>
<p >指定文件名： <input type ="text" name="filename" /></p>
<p >上傳文件： <input type ="file" name="file" /></p>
<p >關鍵字1： <input type ="text" name="keyword" /></p>
<p >關鍵字2： <input type ="text" name="keyword" /></p>
<p >關鍵字3： <input type ="text" name="keyword" /></p>
<input type ="submit" value="上傳"/>
</form>
不過傳統的form表單提交會導致頁面刷新，但是在有些情況下，我們不希望頁面被刷新，這種時候我們都是使用Ajax的方式進行請求的。
Ajax的方式進行請求：
[javascript] view plain 在CODE上查看代碼片派生到我的代碼片$.ajax({
url : "http://localhost:8080/STS/rest/user",type : "POST",
data : $( '#postForm').serialize(),
success : function(data) {
$( '#serverResponse').html(data);
},
error : function(data) {
$( '#serverResponse').html(data.status + " : " + data.statusText + " : " + data.responseText);}
});
通常我們提交（使用submit button）時，會把form中的所有表格元素的name與value組成一個queryString，提交到後台。這用jQuery的方法來說，就是serialize。
通過$('#postForm').serialize()可以對form表單進行序列化，從而將form表單中的所有參數傳遞到服務端。
但是上述方式，只能傳遞一般的參數，上傳文件的文件流是無法被序列化並傳遞的。
不過如今主流瀏覽器都開始支持一個叫做FormData的對象，有了這個FormData，我們就可以輕松地使用Ajax方式進行文件上傳了。
關於FormData及其用法
FormData是什麼呢？我們來看看Mozilla上的介紹。
XMLHttpRequest Level 2添加了一個新的介面FormData.利用FormData對象,我們可以通過JavaScript用一些鍵值對來模擬一系列表單控制項,我們還可以使用XMLHttpRequest的send()方法來非同步的提交這個"表單".比起普通的ajax,使用FormData的最大優點就是我們可以非同步上傳一個二進制文件.
所有主流瀏覽器的較新版本都已經支持這個對象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
參見：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/FormDataConstructor
FormData()
想得到一個FormData對象：
var formdata = new FormData();
W3c草案提供了三種方案來獲取或修改FormData。
方案1：創建一個空的FormData對象，然後再用append方法逐個添加鍵值對：
var formdata = new FormData();
formdata.append("name", "呵呵");
formdata.append("url", "http://www..com/");方案2：取得form元素對象，將它作為參數傳入FormData對象中！
var formobj = document.getElementById("form");var formdata = new FormData(formobj);
方案3：利用form元素對象的getFormData方法生成它！
var formobj = document.getElementById("form");var formdata = formobj.getFormData()
Method
FormData.append
本方法用於向已存在的鍵添加新的值，如該鍵不存在，新建之。
語法
formData.append(name, value);
formData.append(name, value, filename);
注: 通過 FormData.append()方法賦給欄位的值若是數字會被自動轉換為字元(欄位的值可以是一個Blob對象,一個File對象,或者一個字元串,剩下其他類型的值都會被自動轉換成字元串).
參數解釋
name
鍵 (key)， 對應表單域
value
表單域的值
filename (optional)
The filename reported to the server (a USVString), when a Blob or File is passed as the second parameter. The default filename for Blob objects is "blob".
FormData.delete
將一對鍵和值從 FormData 對象中刪除。
formData.delete(username);
FormData.get
返回給定鍵的第一個值
formData.append('username', 'Justin');
formData.append('username', 'Chris');
formData.get(username); // "Justin"
FormData.getAll
返回給定鍵的所有值
formData.append('username', 'Justin');
formData.append('username', 'Chris');
formData.getAll(username); // ["Justin", "Chris"]
FormData.has
檢查是否包含給定鍵，返回 true 或 false
formData.has(username);
FormData.set
設置給定鍵的值
formData.set(name, value);
formData.set(name, value, filename);
瀏覽器兼容情況
來自 MDN：
Desktop
FeatureChromeFirfox(Gecko)Intenet ExplorerOperaSafariBasic support7+4.0(2.0)10+12+5+
append with filename(Yes)22.0(22.0)???
delete, get, getAll, has, setBehind FlagNot supportedNot supported(Yes)Not supportedMobile
FeatureAndroidChrome AndroidFirfox Mobile (Gecko)Firfox OS (Gecko)IE MobileOpera MobileSafari MobileBasic support3.0?4.0(2.0)1.0.1?12+?
append with filename??22.0(22.0)1.2???
delete, get, getAll, has, set(Yes)(Yes)Not supportedNot supportedNot supported(Yes)Not supported2015年06月04日發布
Ajax通過FormData上傳文件
1.使用<form>表單初始化FormData對象方式上傳文件HTML代碼
<form id="uploadForm" enctype="multipart/form-data">
<input id="file" type="file" name="file"/>
<button id="upload" type="button">upload</button>
</form>
javascript代碼
$.ajax({
url: '/upload',
type: 'POST',
cache: false,
data: new FormData($('#uploadForm')[0]),
processData: false,
contentType: false
}).done(function(res) {
}).fail(function(res) {});
這里要注意幾點：
processData設置為false。因為data值是FormData對象，不需要對數據做處理。
<form>標簽添加enctype="multipart/form-data"屬性。
cache設置為false，上傳文件不需要緩存。
contentType設置為false，不設置contentType值，因為是由<form>表單構造的FormData對象，且已經聲明了屬性enctype="multipart/form-data"，所以這里設置為false。
上傳後，伺服器端代碼需要使用從查詢參數名為file獲取文件輸入流對象，因為<input>中聲明的是name="file"。
如果不是用<form>表單構造FormData對象又該怎麼做呢？
2.使用FormData對象添加欄位方式上傳文件
HTML代碼
<div id="uploadForm">
<input id="file" type="file"/>
<button id="upload" type="button">upload</button>
</div>
這里沒有<form>標簽，也沒有enctype="multipart/form-data"屬性。
javascript代碼
var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);$.ajax({
url: '/upload',
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false
}).done(function(res) {
}).fail(function(res) {});
這里有幾處不一樣：
append()的第二個參數應是文件對象，即$('#file')[0].files[0]。
contentType也要設置為『false』。
從代碼$('#file')[0].files[0]中可以看到一個<input type="file">標簽能夠上傳多個文件，只需要在<input type="file">里添加multiple或multiple="multiple"屬性。
3.伺服器端讀文件
從Servlet 3.0 開始，可以通過 request.getPart() 或 request.getPars() 兩個介面獲取上傳的文件。