博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery插件之ajaxFileUpload
阅读量:5243 次
发布时间:2019-06-14

本文共 5891 字,大约阅读时间需要 19 分钟。

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。

是一个异步上传文件的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插件。注意先后顺序,这个不用说了,所有的插件都是这样。

    

  第二步:HTML代码:

    

上传成功啦

  第三步:JS代码

        

    第四步:后台页面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 
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])}}});

转载于:https://www.cnblogs.com/JohnnyYu/p/6230241.html

你可能感兴趣的文章
针对sl的ICSharpCode.SharpZipLib,只保留zip,gzip的流压缩、解压缩功能
查看>>
ASP.NET 3.5构建Web 2.0门户站点
查看>>
PP tables for production order
查看>>
oam系统安装,windows操作系统注册列表影响系统安装
查看>>
[scrum]2011/9/25-----第五天
查看>>
《人月神话》有感,好书,推荐
查看>>
IE浏览器打开chorme浏览器,如何打开其他浏览器
查看>>
GNU 内联汇编
查看>>
【转】代码中特殊的注释技术——TODO、FIXME和XXX的用处
查看>>
php提交表单校验例子
查看>>
man查看帮助命令
查看>>
【SVM】libsvm-python
查看>>
mysql 修改已存在的表增加ID属性为auto_increment自动增长
查看>>
sgu 109 Magic of David Copperfield II
查看>>
C++循环单链表删除连续相邻重复值
查看>>
IIS 7.5 + PHP-5.6.3 + mysql-5.6.21.1(转载)
查看>>
渣渣小本求职复习之路每天一博客系列——Java基础(3)
查看>>
C#调用WIN32 的API函数--USER32.DLL
查看>>
ListView下拉刷新实现
查看>>
Jmeter接口压力测试,Java.net.BindException: Address already in use: connect
查看>>