帶進度條的文件批量上傳插件uploadify

2024-04-27 15:01:52

字體：大中小

來源：轉載

供稿：網友

有時項目中需要一個文件批量上傳功能時，個人認為uploadify是快速簡便的解決方案。

先上效果圖：

一. 下載uploadify

從官網下載uploadify的Flash版本(Flash版本免費，另一版本HTML5版本需要付費)

下載地址： http://www.uploadify.com/download/

下載后直接把文件解壓，然后放在項目中

二. 在項目中使用

在頁面中引入：

    <!--引入Jquery-->    <script src="js/jquery-1.11.3.min.js"></script>    <!--引入uploadify-->    <script type="text/javascript" src="uploadify/jquery.uploadify.js"></script>    <link type="text/CSS" href="uploadify/uploadify.css" rel="stylesheet" />

完整頁面代碼

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title>文件批量上傳Demo</title>    <!--引入Jquery-->    <script src="js/jquery-1.11.3.min.js"></script>    <!--引入uploadify-->    <script type="text/Javascript" src="uploadify/jquery.uploadify.js"></script>    <link type="text/css" href="uploadify/uploadify.css" rel="stylesheet" />    <script type="text/javascript">        $(function () {            var guid = '<%=Request["guid"] %>';            var type = '<%=Request["type"] %>';            if (guid == null || guid == "") {                guid = newGuid();            }            if (type != null) {                type = type + '/';            }            $('#file_upload').uploadify({                'swf': 'uploadify/uploadify.swf',              //FLash文件路徑                'buttonText': '瀏  覽',                        //按鈕文本                'uploader': 'uploadhandler.ashx?guid=' + guid, //處理ASHX頁面                'formData': { 'folder': 'picture', 'isCover': 1 },         //傳參數                'queueID': 'fileQueue',                        //隊列的ID                'queueSizeLimit': 10,                          //隊列最多可上傳文件數量，默認為999                'auto': false,                                 //選擇文件后是否自動上傳，默認為true                'multi': true,                                 //是否為多選，默認為true                'removeCompleted': true,                       //是否完成后移除序列，默認為true                'fileSizeLimit': '0',                          //單個文件大小，0為無限制，可接受KB,MB,GB等單位的字符串值                'fileTypeDesc': 'All Files',                   //文件描述                'fileTypeExts': '*.*',                         //上傳的文件后綴過濾器                'onQueueComplete': function (queueData) {      //所有隊列完成后事件                    alert("上傳完畢！");                },                'onError': function (event, queueId, fileObj, errorObj) {                    alert(errorObj.type + "：" + errorObj.info);                },                'onUploadStart': function (file) {                },                'onUploadSuccess': function (file, data, response) {   //一個文件上傳成功后的響應事件處理                    //var data = $.parseJSON(data);//如果data是json格式                    //var errMsg = "";                }            });        });        function newGuid() {            var guid = "";            for (var i = 1; i <= 32; i++) {                var n = Math.floor(Math.random() * 16.0).toString(16);                guid += n;                if ((i == 8) || (i == 12) || (i == 16) || (i == 20))                    guid += "-";            }            return guid;        }        //執行上傳        function doUpload() {            $('#file_upload').uploadify('upload', '*');        }    </script></head><body>    <form id="form1" runat="server" enctype="multipart/form-data">        <div id="fileQueue" class="fileQueue"></div>        <div>            <input type="file" name="file_upload" id="file_upload" />            <p>                <input type="button" class="shortbutton" id="btnUpload" onclick="doUpload()" value="上傳" />                &nbsp;&nbsp;&nbsp;&nbsp;                <input type="button" class="shortbutton" id="btnCancelUpload" onclick="$('#file_upload').uploadify('cancel')" value="取消" />            </p>            <div id="div_show_files"></div>        </div>    </form></body></html>