jQuery無重新整理上傳之uploadify簡單試用

最後更新：2017-08-11 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：formdata 項目 body 方法檔案外掛程式 bool tpc 精簡

先簡單的侃兩句：貌似已經有兩個月的時間沒有寫過文章了，不過仍會像以前那樣每天至少有一至兩個小時是泡在園子裡看各位大神的文章。前些天在研究“ajax無重新整理上傳”方面的一些外掛程式，用SWFUpload實現了無重新整理上傳的功能，不過個人覺得不是很完美。

昨天在網上找到了一個叫做uploadify的jquery上傳外掛程式，看到園子裡有幾篇文章也是介紹這個外掛程式的，心想何不用這個試試。

不過園子裡的這幾篇文章用到的uploadify還是以前的舊版本uploadify-v2.1.0，我在官網上下載的是uploadify-v3.1版，其中的一些參數以及調用方法也不同了，還好官網有協助文檔。

（唯一感覺不爽的一點就是這個開發包是針對php的，官網並沒有.NET版本，但至少原理都是一樣的，簡單的修改一下就可以了。還是那句話“不僅要知其然，還要知其所以然”，知其所以然了，一切都是浮雲啊）

好了，廢話不多說。先上個，有圖有真相：

一：從官網下載開發包添加到項目中，我對這個開發包做了一個精簡，刪去了那些php方面的檔案：

項目基本結構：

二：添加對css和js檔案的引用：

注意jquery.js檔案和uploadify.js檔案的調用順序。

三：Default.aspx頁面的代碼如下：

<head runat="server">
    <title></title>
    <link href="js/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="js/uploadify/jquery.uploadify-3.1.js" type="text/javascript"></script>
<script type="text/javascript">
        $(function () {
            $("#uploadify").uploadify({
                //指定swf檔案
                ‘swf‘: ‘js/uploadify/uploadify.swf‘,
                //幕後處理的頁面
                ‘uploader‘: ‘UploadHandler.ashx‘,
                //按鈕顯示的文字
                ‘buttonText‘: ‘上傳圖片‘,
                //顯示的高度和寬度，預設 height 30；width 120
                //‘height‘: 15,
                //‘width‘: 80,
                //上傳檔案的類型  預設為所有檔案    ‘All Files‘  ;  ‘*.*‘
                //在瀏覽視窗底部的檔案類型下拉式功能表中顯示的文本
                ‘fileTypeDesc‘: ‘Image Files‘,
                //允許上傳的檔案尾碼
                ‘fileTypeExts‘: ‘*.gif; *.jpg; *.png‘,
                //發送給背景其他參數通過formData指定
                //‘formData‘: { ‘someKey‘: ‘someValue‘, ‘someOtherKey‘: 1 },
                //上傳檔案頁面中，你想要用來作為檔案隊列的元素的id, 預設為false  自動產生,  不帶#
                //‘queueID‘: ‘fileQueue‘,
                //選擇檔案後自動上傳
                ‘auto‘: true,
                //設定為true將允許多檔案上傳
                ‘multi‘: true
            });
        });

    </script>
</head>
<body>
    <div>
        <%--用來作為檔案隊欄區域--%>
        <div id="fileQueue">
        </div>
        <input type="file" name="uploadify" id="uploadify" />
        <p>
            <a href="javascript:$(‘#uploadify‘).uploadify(‘upload‘)">上傳</a>|
            <a href="javascript:$(‘#uploadify‘).uploadify(‘cancel‘)">取消上傳</a>
        </p>
    </div>
</body>
</html>

四：一般處理常式UploadHandler.ashx簡單代碼如下：

public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";            //http://www.cnblogs.com/babycool/
            //接收上傳後的檔案
            HttpPostedFile file = context.Request.Files["Filedata"];
            //其他參數
            //string somekey = context.Request["someKey"];
            //string other = context.Request["someOtherKey"];
            //擷取檔案的儲存路徑
            string uploadPath =
                HttpContext.Current.Server.MapPath("UploadImages" + "\\");
            //判斷上傳的檔案是否為空白
            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-3.1.js中的預設設定並參考官方文檔可得知：

參數不重新指定則保持預設：

swf：uploadify.swf 檔案的相對路徑

uploader：幕後處理程式的相對路徑

buttonText：按鈕顯示的文字

上傳檔案的類型預設為所有檔案 ‘All Files‘ ‘*.*‘

可以通過以下兩參數指定，指定方法見步驟三中的代碼：

fileTypeDesc；fileTypeExts；

auto：為true表示選擇檔案後自動上傳；如果不想自動上傳，需設定為false，並通過

1 <a href="javascript:$(‘#uploadify‘).uploadify(‘upload‘)">上傳</a>|
2 <a href="javascript:$(‘#uploadify‘).uploadify(‘cancel‘)">取消上傳</a>

來指定是上傳還是取消上傳；

multi：設定為true將允許多檔案上傳；

method：提交方式Post 或Get 預設為Post；

queueSizeLimit：當允許多檔案上傳時，設定選擇檔案的個數，預設值為999 ；

另外，取消上傳圖片的路徑是設定在css檔案中的；

其他更多設定可以參考官網的協助文檔。

六：將上傳完成後顯示的Complete顯示為中文

一位園友提出“

英文的Complete不能改成中文”，這可能是之前的版本不能進行修改。我通過查看原始碼 jquery.uploadify-3.1.js找到了上傳完成時顯示的內容：

再參考官方的協助文檔，可以得知，在“

onUploadSuccess” 事件中可以設定上傳完成後所執行的代碼，則修改後的代碼為：

//選擇檔案後自動上傳
                ‘auto‘: true,
                //設定為true將允許多檔案上傳
                ‘multi‘: true,
                //上傳成功後執行
                ‘onUploadSuccess‘: function (file, data, response) {
                    $(‘#‘ + file.id).find(‘.data‘).html(‘ 上傳完畢‘);

}

還有一個需要注意的一點是：一般在設定了選擇上傳檔案路徑時比如只允許上傳*.jpg;*.png;*.gif格式的圖片檔案，則除了指定fileTypeDesc；fileTypeExts；兩個參數外，還要在伺服器端即一般處理常式中再次對上傳檔案的副檔名進行判斷，以防一些使用者跳過用戶端驗證上傳惡意檔案。

下面附上我在部落格園找到的那兩篇介紹uploadify的文章連結，供大家參考：

JQuery上傳外掛程式Uploadify使用詳解

利用外掛程式uploadify完成ajax效果的圖片上傳

並附上uploadify的官方網站

我整理的開發包：整理uploadify-v3.1.NET開發包

當然，這僅僅是一個簡單的試用，具體用到項目中還要考慮很多方面的問題。

歡迎各位大神多多指教，如果該文章對你有協助大家可以一起討論討論。

轉載請註明出處。

jQuery無重新整理上傳之uploadify簡單試用

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More