带进度条的文件批量上传插件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>