jquery.uploadify 使用过程

时间:2023-03-09 06:51:22
jquery.uploadify 使用过程

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 + "\r\n" +
"文件名称:" + fileObj.name + "\r\n" +
"文件大小:" + fileObj.size + "\r\n" +
"创建时间:" + fileObj.creationDate + "\r\n" +
"最后改动时间:" + fileObj.modificationDate + "\r\n" +
"文件类型:" + 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;
}
}
}