数码资讯
jQuery插件ajaxfileupload异步上传文件的详细介绍
1。ajaxfileupload是一个jQuery插件,上传文件异步。 我不知道它的任何版本,你不必到处找它。 语法:美元。ajaxfileupload({选项}) 选项参数描述: 1、URL上传处理器的地址 U3000 U3000 2、文件的域,fileelementid需要上传,这是我,ID.
选购提示
关注价格、性能、续航、售后和真实使用场景,理性比较后再下单。
1。ajaxfileupload是一个jQuery插件,上传文件异步。
我不知道它的任何版本,你不必到处找它。
语法:美元。ajaxfileupload({选项})
选项参数描述:
1、URL上传处理器的地址 U3000 U3000
2、文件的域,fileelementid需要上传,这是我,ID.
3、secureuri是安全文件启用,并默认为false。
4,由数据服务器返回的数据类型,它可以是XML,JSON,HTML脚本,如果你不填,jQuery会自动判断。
5,成功提交一个在成功后自动执行的处理函数,而参数数据是服务器返回的数据。
6,错误提交一个不能自动执行的处理函数。
7,数据自定义参数。这个东西很有用,当数据与上传的图片相关时,它被使用。
8,当类型提交自定义参数时,此参数设置为
错误提示:
1、查询语句错误前失踪;
如果出现此错误,则必须检查URL路径是否可以访问。
2、查询语法错误
如果出现此错误,则需要检查处理提交操作的服务器后台处理程序中是否存在语法错误。
3、查询:无效的属性ID错误
如果出现此错误,则必须检查文本域属性ID是否存在。
4、查询XML表达错误遗漏}
如果出现此错误,则需要检查文件名是否一致或不存在。
5、其他自定义错误
您可以使用直接打印变量$错误的方法检查参数是否正确,这比上面的无效提示方便得多。
使用方法uff1a
第一步:首先介绍jQuery和ajaxfileupload plug-in.pay注意顺序,这是不是说,所有的插件都是这样。
复制代码代码如下所示:
第二步:HTML代码:
复制代码代码如下所示:
第三步:js代码
复制代码代码如下所示:
$(函数(){())
$(:按钮)。Click(函数(){)
ajaxfileupload();
})
})
功能ajaxfileupload(){
ajaxfileupload美元。
(
{
网址: / / 上传.aspx/文件上传服务器地址
Secureuri:假 / /需要安全协议,通常设置为false
fileelementid:'file1 ' / /文件上传域ID
DataType:'json ',一般 / /返回类型设置为JSON
成功:函数(数据,状态)服务器成功响应函数
{
$(# img1 )Attr(src。
如果(typeof(数据错误)!= 'undefined){
如果(data.error!=){
警报(数据错误);
{人}
警报(数据,MSG);
}
}
},
错误:函数(数据,状态,E)服务器失败处理响应函数
{
警报(e);
}
}
)
返回false;
}
第四步:后台页面upload.aspx代码:
复制代码代码如下所示:
protected void page_load(object sender,EventArgs e)
{
httpfilecollection文件文件要求;
字符串=字符串。空的;
字符串错误=字符串。空的;
字符串imgurl;
如果(files.count > 0)
{
文件{ 0 }。SaveAs(server.mappath( / )+ system.io.path.getfilename(文件{ 0 }。文件名));
成功!文件大小:+文件{ 0 }。contentlength;
imgurl =/+文件名{ 0 };
字符串资源=错误:{+错误+味精:味精++,imgurl:,+ imgurl +};
答复(写);
响应(完);
}
}
此示例的完整代码下载
MVC版本的一个例子:
控制器代码
复制代码代码如下所示:
公共类的控制器:控制器
{
public ActionResult Index()
{
返回视图();
}
公共的ActionResult上传()
{
httpfilecollection HFC = system.web.httpcontext.current.request.files;
字符串imgpath = ;
如果(hfc.count > 0)
{
imgpath = / testupload+ HFC { 0 }。文件名;
字符串physicalpath = server.mappath(imgpath);
HFC { 0 }。SaveAs(physicalpath);
}
返回的内容(imgpath);
}
}
前视图,HTML和js代码,在成功上传后,返回图片的真实地址并绑定到SRC地址。
复制代码代码如下所示:
$(函数(){())
$(:按钮)。Click(函数(){)
如果($(# file1)。瓦迩()。长> 0){
ajaxfileupload();
}
{其他
警报(请选择图片);
}
})
})
功能ajaxfileupload(){
ajaxfileupload美元。
(
{
URL: /上传文件上传服务器地址
Secureuri: / /假,一般设置为false
fileelementid: / / 'file1的ID属性文件上传空间
DataType:'html ',一般 / /返回类型设置为JSON
成功:函数(数据,状态)服务器成功响应函数
{
警报(数据);
$(# img1 )Attr(src。
如果(typeof(数据错误)!= 'undefined){
如果(data.error!=){
警报(数据错误);
{人}
警报(数据,MSG);
}
}
},
错误:函数(数据,状态,E)服务器失败处理响应函数
{
警报(e);
}
}
)
返回false;
}
最后,上传一个带有参数的图片的实例:控制器代码:
复制代码代码如下所示:
公共类的控制器:控制器
{
public ActionResult Index()
{
返回视图();
}
公共的ActionResult上传()
{
system.web.httpcontext.current.request.form NameValueCollection雷士=;
httpfilecollection HFC = system.web.httpcontext.current.request.files;
字符串imgpath = ;
如果(hfc.count > 0)
{
imgpath = / testupload+ HFC { 0 }。文件名;
字符串physicalpath = server.mappath(imgpath);
HFC { 0 }。SaveAs(physicalpath);
}
注意在第二个第三参数后面写
返回的JSON(新{ ID =雷士。得到(ID),名称=雷士。得到(名称),imgpath1 = imgpath },文本/ HTML,;
}
}
索引视图代码:
复制代码代码如下所示:
$(函数(){())
$(:按钮)。Click(函数(){)
如果($(# file1)。瓦迩()。长> 0){
ajaxfileupload();
}
{其他
警报(请选择图片);
}
})
})
功能ajaxfileupload(){
ajaxfileupload美元。
(
{
URL: /上传文件上传服务器地址
类型:'post,
数据:'123'name:'lunis{编号:}, / /,这个参数是非常严格的,如果不报
Secureuri: / /假,一般设置为false
fileelementid: / / 'file1的ID属性文件上传空间
DataType:'json ',一般 / /返回类型设置为JSON
成功:函数(数据,状态)服务器成功响应函数
{
警报(数据);
$(# img1 )Attr(src。
警报()您对id的请求是+++;
如果(typeof(数据错误)!= 'undefined){
如果(data.error!=){
警报(数据错误);
{人}
警报(数据,MSG);
}
}
},
错误:函数(数据,状态,E)服务器失败处理响应函数
{
警报(e);
}
}
)
返回false;
}
这个实例显示图片的异步上传并弹出自定义传输的参数。
2013年1月28日,调试过程中发现了一个问题,也就是说,作为文件域(),我们必须具有name属性。如果没有名称属性,上传后服务器就不能得到图片。
2013年1月28日,最经典的错误终于找到了原因。目标函数(A,B){ return新e.fn.init(A,B,H)},,H,这是浏览器错误。非常经典。我不知道这是我的版本的或真实的问题。问题的根源是在N上传根找到问题的根源。答案是:数据类型参数必须大写,如:数据类型:'html。
我不知道它的任何版本,你不必到处找它。
语法:美元。ajaxfileupload({选项})
选项参数描述:
1、URL上传处理器的地址 U3000 U3000
2、文件的域,fileelementid需要上传,这是我,ID.
3、secureuri是安全文件启用,并默认为false。
4,由数据服务器返回的数据类型,它可以是XML,JSON,HTML脚本,如果你不填,jQuery会自动判断。
5,成功提交一个在成功后自动执行的处理函数,而参数数据是服务器返回的数据。
6,错误提交一个不能自动执行的处理函数。
7,数据自定义参数。这个东西很有用,当数据与上传的图片相关时,它被使用。
8,当类型提交自定义参数时,此参数设置为
错误提示:
1、查询语句错误前失踪;
如果出现此错误,则必须检查URL路径是否可以访问。
2、查询语法错误
如果出现此错误,则需要检查处理提交操作的服务器后台处理程序中是否存在语法错误。
3、查询:无效的属性ID错误
如果出现此错误,则必须检查文本域属性ID是否存在。
4、查询XML表达错误遗漏}
如果出现此错误,则需要检查文件名是否一致或不存在。
5、其他自定义错误
您可以使用直接打印变量$错误的方法检查参数是否正确,这比上面的无效提示方便得多。
使用方法uff1a
第一步:首先介绍jQuery和ajaxfileupload plug-in.pay注意顺序,这是不是说,所有的插件都是这样。
复制代码代码如下所示:
第二步:HTML代码:
复制代码代码如下所示:
第三步:js代码
复制代码代码如下所示:
$(函数(){())
$(:按钮)。Click(函数(){)
ajaxfileupload();
})
})
功能ajaxfileupload(){
ajaxfileupload美元。
(
{
网址: / / 上传.aspx/文件上传服务器地址
Secureuri:假 / /需要安全协议,通常设置为false
fileelementid:'file1 ' / /文件上传域ID
DataType:'json ',一般 / /返回类型设置为JSON
成功:函数(数据,状态)服务器成功响应函数
{
$(# img1 )Attr(src。
如果(typeof(数据错误)!= 'undefined){
如果(data.error!=){
警报(数据错误);
{人}
警报(数据,MSG);
}
}
},
错误:函数(数据,状态,E)服务器失败处理响应函数
{
警报(e);
}
}
)
返回false;
}
第四步:后台页面upload.aspx代码:
复制代码代码如下所示:
protected void page_load(object sender,EventArgs e)
{
httpfilecollection文件文件要求;
字符串=字符串。空的;
字符串错误=字符串。空的;
字符串imgurl;
如果(files.count > 0)
{
文件{ 0 }。SaveAs(server.mappath( / )+ system.io.path.getfilename(文件{ 0 }。文件名));
成功!文件大小:+文件{ 0 }。contentlength;
imgurl =/+文件名{ 0 };
字符串资源=错误:{+错误+味精:味精++,imgurl:,+ imgurl +};
答复(写);
响应(完);
}
}
此示例的完整代码下载
MVC版本的一个例子:
控制器代码
复制代码代码如下所示:
公共类的控制器:控制器
{
public ActionResult Index()
{
返回视图();
}
公共的ActionResult上传()
{
httpfilecollection HFC = system.web.httpcontext.current.request.files;
字符串imgpath = ;
如果(hfc.count > 0)
{
imgpath = / testupload+ HFC { 0 }。文件名;
字符串physicalpath = server.mappath(imgpath);
HFC { 0 }。SaveAs(physicalpath);
}
返回的内容(imgpath);
}
}
前视图,HTML和js代码,在成功上传后,返回图片的真实地址并绑定到SRC地址。
复制代码代码如下所示:
$(函数(){())
$(:按钮)。Click(函数(){)
如果($(# file1)。瓦迩()。长> 0){
ajaxfileupload();
}
{其他
警报(请选择图片);
}
})
})
功能ajaxfileupload(){
ajaxfileupload美元。
(
{
URL: /上传文件上传服务器地址
Secureuri: / /假,一般设置为false
fileelementid: / / 'file1的ID属性文件上传空间
DataType:'html ',一般 / /返回类型设置为JSON
成功:函数(数据,状态)服务器成功响应函数
{
警报(数据);
$(# img1 )Attr(src。
如果(typeof(数据错误)!= 'undefined){
如果(data.error!=){
警报(数据错误);
{人}
警报(数据,MSG);
}
}
},
错误:函数(数据,状态,E)服务器失败处理响应函数
{
警报(e);
}
}
)
返回false;
}
最后,上传一个带有参数的图片的实例:控制器代码:
复制代码代码如下所示:
公共类的控制器:控制器
{
public ActionResult Index()
{
返回视图();
}
公共的ActionResult上传()
{
system.web.httpcontext.current.request.form NameValueCollection雷士=;
httpfilecollection HFC = system.web.httpcontext.current.request.files;
字符串imgpath = ;
如果(hfc.count > 0)
{
imgpath = / testupload+ HFC { 0 }。文件名;
字符串physicalpath = server.mappath(imgpath);
HFC { 0 }。SaveAs(physicalpath);
}
注意在第二个第三参数后面写
返回的JSON(新{ ID =雷士。得到(ID),名称=雷士。得到(名称),imgpath1 = imgpath },文本/ HTML,;
}
}
索引视图代码:
复制代码代码如下所示:
$(函数(){())
$(:按钮)。Click(函数(){)
如果($(# file1)。瓦迩()。长> 0){
ajaxfileupload();
}
{其他
警报(请选择图片);
}
})
})
功能ajaxfileupload(){
ajaxfileupload美元。
(
{
URL: /上传文件上传服务器地址
类型:'post,
数据:'123'name:'lunis{编号:}, / /,这个参数是非常严格的,如果不报
Secureuri: / /假,一般设置为false
fileelementid: / / 'file1的ID属性文件上传空间
DataType:'json ',一般 / /返回类型设置为JSON
成功:函数(数据,状态)服务器成功响应函数
{
警报(数据);
$(# img1 )Attr(src。
警报()您对id的请求是+++;
如果(typeof(数据错误)!= 'undefined){
如果(data.error!=){
警报(数据错误);
{人}
警报(数据,MSG);
}
}
},
错误:函数(数据,状态,E)服务器失败处理响应函数
{
警报(e);
}
}
)
返回false;
}
这个实例显示图片的异步上传并弹出自定义传输的参数。
2013年1月28日,调试过程中发现了一个问题,也就是说,作为文件域(),我们必须具有name属性。如果没有名称属性,上传后服务器就不能得到图片。
2013年1月28日,最经典的错误终于找到了原因。目标函数(A,B){ return新e.fn.init(A,B,H)},,H,这是浏览器错误。非常经典。我不知道这是我的版本的或真实的问题。问题的根源是在N上传根找到问题的根源。答案是:数据类型参数必须大写,如:数据类型:'html。
声明:本文内容用于数码产品信息整理与选购参考,具体价格、库存、售后政策以官方渠道和电商页面实时信息为准。