发布于 2016-10-14 05:05:36 | 112 次阅读 | 评论: 0 | 来源: 网友投递
Uploadify JQuery上传插件
Uploadify是JQuery的一个上传插件,是一个易集成的多文件上传解决方案，实现的效果非常不错,带进度显示。
HTML：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>swfupload_ajax_demo</title>
<link href="../css/Member.css" rel="stylesheet" type="text/css" />
<link href="../css/base.css" rel="stylesheet" type="text/css" />
<script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script>
<link href="../js/jquery.uploadify-v2.1.0/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery.uploadify-v2.1.0/swfobject.js"></script>
<script type="text/javascript" src="../js/jquery.uploadify-v2.1.0/jquery.uploadify.v2.1.0.min.js"></script>
<script type="text/javascript">
var swfu;
$(document).ready(function () {
$("#uploadify").uploadify({
‘height‘: 30,
‘onSelect‘: function (e, queueId, fileObj) {
fileObj.name = "mylovemercedes";
alert("唯一标识:" + queueId + "rn" +
"文件名：" + fileObj.name + "rn" +
"文件大小：" + fileObj.size + "rn" +
"创建时间：" + fileObj.creationDate + "rn" +
"最后修改时间：" + fileObj.modificationDate + "rn" +
"文件类型：" + fileObj.type
);
},
‘uploader‘: ‘../js/jquery.uploadify-v2.1.0/uploadify.swf‘,
‘script‘: ‘../Handler/UploadHandler.ashx‘,
‘scriptData‘: { ‘student_id‘: $(‘#hidStudentID‘).val() }, //自定义传递参数
‘method‘: ‘GET‘,
‘cancelImg‘: ‘../js/jquery.uploadify-v2.1.0/cancel.png‘,
‘folder‘: ‘../upload/student_head‘,
‘queueID‘: ‘fileQueue‘,
‘auto‘: false,
‘multi‘: false,
‘width‘: 120,
‘fileExt‘: ‘*.jpg;*.png;*.gif‘,
‘buttonText‘: "upload image",
‘onInit‘: function () { alert("1"); },
‘sizeLimit‘: 102400, //上传文件的大小限制，单位为字节 100k
‘onAllComplete‘: function (event, data) { //当上传队列中的所有文件都完成上传时触发
alert(data.filesUploaded + ‘ 个文件上传成功!‘);
}
});
function uploadpara() {
//自定义传递参数
$(‘#uploadify‘).uploadifySettings(‘scriptData‘, { ‘student_id‘: $(‘#hidStudentID‘).val() });
$(‘#uploadify‘).uploadifyUpload();
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:HiddenField ID="hidStudentID" runat="server" Value="201401030912559732" />
<div id="fileQueue">
</div>
<input type="file" name="uploadify" id="uploadify" />
<p>
<a href="javascript:$(‘#uploadify‘).uploadifyUpload()">上传</a>| <a href="javascript:$(‘#uploadify‘).uploadifyClearQueue()">
取消上传</a>
</p>
<div class="hy_photo_main_frame">
</div>
</form>
</body>
</html>
.UploadHandler.ashx
public class UploadHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Charset = "utf-8";
string student_id = CommonClass.Request.GetRequest<string>("student_id", "");
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("1");
}
else
{
context.Response.Write("0");
}
}
public bool IsReusable
{
get
{
return false;
}
}
}