ajaxFileUpload.js 很多同名的,因為做出來一個很容易。
我用的是這個:https://github.com/carlcarl/AjaxFileUpload
下載地址在這里:http://files.cnblogs.com/files/kissdodog/ajaxfileupload_JS_File.rar
AjaxFileUpload.js並不是一個很出名的插件,只是別人寫好的放出來供大家用,原理都是創建隱藏的表單和iframe然后用JS去提交,獲得返回值。
當初做了個異步上傳的功能,選擇它因為它的配置方式比較像jQuery的AJAX,我很喜歡。
評論里面說到的不行。那是因為我們用的不是同一個js。我上github搜AjaxFileUpload出來很多類似js。
ajaxFileUpload是一個異步上傳文件的jQuery插件
傳一個不知道什么版本的上來,以后不用到處找了。
語法:$.ajaxFileUpload([options])
options參數說明:
1、url 上傳處理程序地址。
2,fileElementId 需要上傳的文件域的ID,即<input type="file">的ID。
3,secureuri 是否啟用安全提交,默認為false。
4,dataType 服務器返回的數據類型。可以為xml,script,json,html。如果不填寫,jQuery會自動判斷。
5,success 提交成功后自動執行的處理函數,參數data就是服務器返回的數據。
6,error 提交失敗自動執行的處理函數。
7,data 自定義參數。這個東西比較有用,當有數據是與上傳的圖片相關的時候,這個東西就要用到了。
8, type 當要提交自定義參數時,這個參數要設置成post
錯誤提示:
1,SyntaxError: missing ; before statement錯誤
如果出現這個錯誤就需要檢查url路徑是否可以訪問
2,SyntaxError: syntax error錯誤
如果出現這個錯誤就需要檢查處理提交操作的服務器后台處理程序是否存在語法錯誤
3,SyntaxError: invalid property id錯誤
如果出現這個錯誤就需要檢查文本域屬性ID是否存在
4,SyntaxError: missing } in XML expression錯誤
如果出現這個錯誤就需要檢查文件name是否一致或不存在
5,其它自定義錯誤
大家可使用變量$error直接打印的方法檢查各參數是否正確,比起上面這些無效的錯誤提示還是方便很多。
使用方法:
第一步:先引入jQuery與ajaxFileUpload插件。注意先后順序,這個不用說了,所有的插件都是這樣。
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script src="ajaxfileupload.js" type="text/javascript"></script>
第二步:HTML代碼:
<body>
<p><input type="file" id="file1" name="file" /></p>
<input type="button" value="上傳" />
<p><img id="img1" alt="上傳成功啦" src="" /></p>
</body>
第三步:JS代碼
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script src="ajaxfileupload.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(":button").click(function () {
ajaxFileUpload();
})
})
function ajaxFileUpload() {
$.ajaxFileUpload
(
{
url: '/upload.aspx', //用於文件上傳的服務器端請求地址
secureuri: false, //是否需要安全協議,一般設置為false
fileElementId: 'file1', //文件上傳域的ID
dataType: 'json', //返回值類型 一般設置為json
success: function (data, status) //服務器成功響應處理函數
{
$("#img1").attr("src", data.imgurl);
if (typeof (data.error) != 'undefined') {
if (data.error != '') {
alert(data.error);
} else {
alert(data.msg);
}
}
},
error: function (data, status, e)//服務器響應失敗處理函數
{
alert(e);
}
}
)
return false;
}
</script>
第四步:后台頁面upload.aspx代碼:
protected void Page_Load(object sender, EventArgs e)
{
HttpFileCollection files = Request.Files;
string msg = string.Empty;
string error = string.Empty;
string imgurl;
if (files.Count > 0)
{
files[0].SaveAs(Server.MapPath("/") + System.IO.Path.GetFileName(files[0].FileName));
msg = " 成功! 文件大小為:" + files[0].ContentLength;
imgurl = "/" + files[0].FileName;
string res = "{ error:'" + error + "', msg:'" + msg + "',imgurl:'" + imgurl + "'}";
Response.Write(res);
Response.End();
}
}
修復版本:
jQuery.extend({createUploadIframe:
function
(d,b){
var
a=
"jUploadFrame"
+d;
var
c=
'<iframe id="'
+a+
'" name="'
+a+
'" style="position:absolute; top:-9999px; left:-9999px"'
;
if
(window.ActiveXObject){
if
(
typeof
b==
"boolean"
){c+=
' src="'
+"javascript:
false
"+'"
'}
else
{
if
(
typeof
b==
"string"
){c+=
' src="'
+b+
'"'
}}}c+=
" />"
;jQuery(c).appendTo(document.body);
return
jQuery(
"#"
+a).get(0)},createUploadForm:
function
(a,j,d){
var
h=
"jUploadForm"
+a;
var
c=
"jUploadFile"
+a;
var
b=jQuery(
'<form action="" method="POST" name="'
+h+
'" id="'
+h+
'" enctype="multipart/form-data"></form>'
);
if
(d){
for
(
var
e
in
d){
if
(d[e].name!=
null
&&d[e].value!=
null
){jQuery(
'<input type="hidden" name="'
+d[e].name+
'" value="'
+d[e].value+
'" />'
).appendTo(b)}
else
{jQuery(
'<input type="hidden" name="'
+e+
'" value="'
+d[e]+
'" />'
).appendTo(b)}}}
var
f=jQuery(
"#"
+j);
var
g=jQuery(f).clone();jQuery(f).attr(
"id"
,c);jQuery(f).before(g);jQuery(f).appendTo(b);jQuery(b).css(
"position"
,
"absolute"
);jQuery(b).css(
"top"
,
"-1200px"
);jQuery(b).css(
"left"
,
"-1200px"
);jQuery(b).appendTo(
"body"
);
return
b},ajaxFileUpload:
function
(k){k=jQuery.extend({},jQuery.ajaxSettings,k);
var
a=
new
Date().getTime();
var
b=jQuery.createUploadForm(a,k.fileElementId,(
typeof
(k.data)==
"undefined"
?
false
:k.data));
var
i=jQuery.createUploadIframe(a,k.secureuri);
var
h=
"jUploadFrame"
+a;
var
j=
"jUploadForm"
+a;
if
(k.global&&!jQuery.active++){jQuery.event.trigger(
"ajaxStart"
)}
var
c=
false
;
var
f={};
if
(k.global){jQuery.event.trigger(
"ajaxSend"
,[f,k])}
var
d=
function
(l){
var
p=document.getElementById(h);
try
{
if
(p.contentWindow){f.responseText=p.contentWindow.document.body?p.contentWindow.document.body.innerHTML:
null
;f.responseXML=p.contentWindow.document.XMLDocument?p.contentWindow.document.XMLDocument:p.contentWindow.document}
else
{
if
(p.contentDocument){f.responseText=p.contentDocument.document.body?p.contentDocument.document.body.innerHTML:
null
;f.responseXML=p.contentDocument.document.XMLDocument?p.contentDocument.document.XMLDocument:p.contentDocument.document}}}
catch
(o){jQuery.handleError(k,f,
null
,o)}
if
(f||l==
"timeout"
){c=
true
;
var
m;
try
{m=l!=
"timeout"
?
"success"
:
"error"
;
if
(m!=
"error"
){
var
n=jQuery.uploadHttpData(f,k.dataType);
if
(k.success){k.success(n,m)}
if
(k.global){jQuery.event.trigger(
"ajaxSuccess"
,[f,k])}}
else
{jQuery.handleError(k,f,m)}}
catch
(o){m=
"error"
;jQuery.handleError(k,f,m,o)}
if
(k.global){jQuery.event.trigger(
"ajaxComplete"
,[f,k])}
if
(k.global&&!--jQuery.active){jQuery.event.trigger(
"ajaxStop"
)}
if
(k.complete){k.complete(f,m)}jQuery(p).unbind();setTimeout(
function
(){
try
{jQuery(p).remove();jQuery(b).remove()}
catch
(q){jQuery.handleError(k,f,
null
,q)}},100);f=
null
}};
if
(k.timeout>0){setTimeout(
function
(){
if
(!c){d(
"timeout"
)}},k.timeout)}
try
{
var
b=jQuery(
"#"
+j);jQuery(b).attr(
"action"
,k.url);jQuery(b).attr(
"method"
,
"POST"
);jQuery(b).attr(
"target"
,h);
if
(b.encoding){jQuery(b).attr(
"encoding"
,
"multipart/form-data"
)}
else
{jQuery(b).attr(
"enctype"
,
"multipart/form-data"
)}jQuery(b).submit()}
catch
(g){jQuery.handleError(k,f,
null
,g)}jQuery(
"#"
+h).load(d);
return
{abort:
function
(){}}},uploadHttpData:
function
(r,type){
var
data=!type;
if
(!type){data=r.responseText}
if
(type==
"xml"
){data=r.responseXML}
if
(type==
"script"
){jQuery.globalEval(data)}
if
(type==
"json"
){data=r.responseText;
var
start=data.indexOf(
">"
);
if
(start!=-1){
var
end=data.indexOf(
"<"
,start+1);
if
(end!=-1){data=data.substring(start+1,end)}}eval(
"data = "
+data)}
if
(type==
"html"
){jQuery(
"<div>"
).html(data).evalScripts()}
return
data},handleError:
function
(b,d,a,c){
if
(b.error){b.error.call(b.context||b,d,a,c)}
if
(b.global){(b.context?jQuery(b.context):jQuery.event).trigger(
"ajaxError"
,[d,b,c])}}});