jquery的uploadify插件實現的批量上傳V3.2.1版


你需要如下配置(包括引入文件)HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="JS/jquery-1.8.3.js"></script>
    <script src="uploadify/jquery.uploadify.min.js"></script>
    <script src="uploadify/jquery.uploadify.js"></script>
    <link href="uploadify/uploadify.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <script type="text/javascript">
            $(function () {
                $('#file_upload').uploadify({
                    'swf': '/uploadify/uploadify.swf',//必須
                    'uploader': 'UploadHandler.ashx',//處理上傳圖片的后台地址
                    'cancelImg': 'image/ico/uploadify-cancel.png',//取消的圖片
                    'auto': false//設為false 可以禁止自動上傳,默認true
                    // Put your options here
                });
            });
        </script>
        <input type="file" name="file_upload" id="file_upload" />
         <a href="javascript:$('#file_upload').uploadify('upload','SWFUpload_0_1')">上傳</a>| 
      <a href="javascript:$('#file_upload').uploadify('stop','SWFUpload_0_3')">取消上傳</a>
    </form>
</body>
</html>

upload方法是上傳方法,第二個參數是指上傳指定的某一個,寫法固定,只有后面的0-1或者0—3可以改動代表的某一個,如果多個,需要逗號分離,如:

SWFUpload_0_1,SWFUpload_0_3

后台寫法:
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //context.Response.Write("Hello World");

            HttpPostedFile file = context.Request.Files["Filedata"];
            string uploadPath =
                HttpContext.Current.Server.MapPath("\\word") + "\\";

            if (file != null)
            {
                if (!Directory.Exists(uploadPath))
                {
                    Directory.CreateDirectory(uploadPath);
                }
                file.SaveAs(uploadPath + file.FileName);
                //存入數據庫的操作可以在此處添加。。。。。。


                //下面這句代碼缺少的話,上傳成功后上傳隊列的顯示不會自動消失
                context.Response.Write("1");
            }
            else
            {
                context.Response.Write("0");
            }  
        }

 


官方API地址:
http://www.uploadify.com/documentation/
中文API地址:
http://www.mamicode.com/info-detail-506696.html
樣例圖:

有興趣的同學可以看看官方網站


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM