Jquery.Uploadify v3.2 使用經驗

時間 2019-11-17

標籤 jquery.uploadify jquery uploadify v3.2 使用經驗欄目 JQuery 简体版

原文原文鏈接

最近項目要用到多文件上傳，HTML裏沒有這個功能，而後上網找到了Uploadify，一個很是不錯的JQuery上傳插件。而後上網找到了個uploadify-v2.1.0版的例子，寫得很好，但是Uploadify v3.2版本有不少方法不同了。只好硬着頭皮去官方網看雞腸文檔,其中還發現官方網下載下來的文件，有個圖片的位置放錯地方了，要本身手動調一下。我還在網上抄了人家的個asp.net的Demo，來跟你們分享一下。 javascript

<head>
    <title>無標題頁</title>
    <link href="../js/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="../js/uploadify/jquery.uploadify.js" type="text/javascript"></script>
    <script type="text/javascript">
	$(function() {
		$('#file_upload').uploadify({
		    'fileTypeDesc' : 'Image Files',
            'fileTypeExts' : '*.gif; *.jpg; *.png',
			'swf'      : '../js/uploadify/uploadify.swf',
			'uploader' : '../js/uploadify/uploadify.ashx',
			'auto'     : false
			// Your options here
		});
	});
	</script>
</head>
<body>
    <div>
        <input type="file" name="file_upload" id="file_upload" />
        <p>
            <a href="javascript:$('#file_upload').uploadify('cancel')">Cancel First File</a>
            |<a href="javascript:$('#file_upload').uploadify('cancel', '*')">Clear the Queue</a>
            |<a href="javascript:$('#file_upload').uploadify('upload', '*')">Upload the Files</a>
        </p>
    </div>
</body>
</html>

uploadify.ashx css

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Charset = "utf-8";

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

        }

本人太懶了，以上代碼純屬Copy html

代碼寫好了，但是發現這裏的 X 按鈕出不來。原來是uploadify-cancel.png圖片路徑問題。下面是個人解決方案。 java

uploadify.css jquery

新建了img文件夾，把uploadify-cancel.png移到img文件夾裏。 c#

以上東西就分享完畢了，能夠IE9裏不行（IE10還沒測）

有木有大俠指點指點一下