这次给大家带来jquery插件uploadify使用详解,jquery插件uploadify使用的注意事项有哪些,下面就是实战案例,一起来看一下。
有时项目中需要一个文件批量上传功能时,个人认为uploadify是快速简便的解决方案,分享给大家供大家参考,具体如下
先上效果图:
具体代码如下:
在页面中如下
完整页面代码
<%@ page language="c#" autoeventwireup="true" codefile="default.aspx.cs" inherits="_default" %>
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>文件批量上传demo</title>
<!--引入jquery-->
<script src="js/jquery-1.11.3.min.js"></script>
<!--引入uploadify-->
<script type="text/javascript" src="uploadify/jquery.uploadify.js"></script>
<link type="text/css" href="uploadify/uploadify.css" rel="stylesheet" />
<script type="text/javascript">
$(function () {
var guid = '<%=request["guid"] %>';
var type = '<%=request["type"] %>';
if (guid == null || guid == ) {
guid = newguid();
}
if (type != null) {
type = type + '/';
}
$('#file_upload').uploadify({
'swf': 'uploadify/uploadify.swf', //flash文件路径
'buttontext': '浏 览', //按钮文本
'uploader': 'uploadhandler.ashx?guid=' + guid, //处理ashx页面
'formdata': { 'folder': 'picture', 'iscover': 1 }, //传参数
'queueid': 'filequeue', //队列的id
'queuesizelimit': 10, //队列最多可上传文件数量,默认为999
'auto': false, //选择文件后是否自动上传,默认为true
'multi': true, //是否为多选,默认为true
'removecompleted': true, //是否完成后移除序列,默认为true
'filesizelimit': '0', //单个文件大小,0为无限制,可接受kb,mb,gb等单位的字符串值
'filetypedesc': 'all files', //文件描述
'filetypeexts': '*.*', //上传的文件后缀过滤器
'onqueuecomplete': function (queuedata) { //所有队列完成后事件
alert(上传完毕!);
},
'onerror': function (event, queueid, fileobj, errorobj) {
alert(errorobj.type + : + errorobj.info);
},
'onuploadstart': function (file) {
},
'onuploadsuccess': function (file, data, response) { //一个文件上传成功后的响应事件处理
//var data = $.parsejson(data);//如果data是json格式
//var errmsg = ;
}
});
});
function newguid() {
var guid = ;
for (var i = 1; i 0)
{
#region 获取上传路径
string uploadfolder = getuploadfolder();
#endregion
if (system.io.directory.exists(uploadfolder))
{//如果上传路径存在
httppostedfile file = context.request.files[filedata];
string filepath = path.combine(uploadfolder, file.filename);
file.saveas(filepath);
context.response.write(0);
}
else
{
context.response.write(2);
}
}
}
public bool isreusable {
get {
return false;
}
}
/// <summary>
/// 返回不带后缀的文件名
/// </summary>
/// <param name="filename"></param>
/// <returns></returns>
public static string getfirstfilename(string filename)
{
return path.getfilenamewithoutextension(filename);
}
/// <summary>
/// 获取上传目录
/// </summary>
/// <returns></returns>
public static string getuploadfolder()
{
string rootpath = httpcontext.current.server.mappath(~);
return path.combine(rootpath, test);
}
}
文件上传.net默认有大小限制,像iis限制的30m默认请求大小。如果不想修改iis,又想突破这个大小的限制,比如上传1gb大小的文件。
这是修改web.config即可实现。
<?xml version="1.0" encoding="utf-8"?>
<!--
-->
<configuration>
<system.web>
<compilation debug="true" targetframework="4.0" />
<httpruntime maxrequestlength="1073741824"/>
</system.web>
<!--用于设置文件上传的最大允许大小(单位:bytes)-->
<system.webserver>
<security>
<requestfiltering>
<!--修改服务器允许最大长度(1gb)-->
<requestlimits maxallowedcontentlength="1073741824"/>
</requestfiltering>
</security>
</system.webserver>
</configuration>
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
jquery让浏览器相互跳转传递参数使用详解
jquery基础知识点使用详解
以上就是jquery插件uploadify使用详解的详细内容。