jquery.uploadify 使用过程

时间：2014-04-29 13:45:20 收藏：0 阅读：375

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;
            }
        }
    }

jquery.uploadify 使用过程,码迷,mamicode.com