基于plupload多文件上传

<html>

<head>

    <title>文件上传</title>

    <link href="jquery.ui.plupload.css" rel="stylesheet" type="text/css" />

    <link href="jquery-ui.css" rel="stylesheet" />

    <link href="jbox.css" rel="stylesheet" />

    <script type="text/javascript" src="jquery-1.8.0.min.js"></script>

    <script type="text/javascript" src="jquery-ui.min.js"></script>

    <script type="text/javascript" src="browserplus.min.js"></script>

    <script type="text/javascript" src="plupload.full.min.js"></script>

    <script type="text/javascript" src="zh_CN.js"></script>

    <script type="text/javascript" src="jquery.ui.plupload.js"></script>

    <script type="text/javascript" src="jquery.jBox-2.3.min.js"></script>

    <script type="text/javascript" src="jquery.jBox-zh-CN.js"></script>

    <script type="text/javascript">

        var fileList = [];

        $(function () {

            $("#uploader").plupload({

                runtimes: "html5,flash,silverlight,html4",

                url: "/UploadFile/Upload", // 服务端上传路径

                max_file_size: "200mb", // 文件上传最大限制。

                chunk_size: "200mb", // 上传分块每块的大小,这个值小于服务器最大上传限制的值即可。

                // 文件类型限制

                filters: [

                    { title: "所有文件", extensions: "*" }

                ],

                rename: true,

                sortable: true,

                dragdrop: true,

                views: {

                    list: true,

                    thumbs: true,

                    active: "thumbs"

                },

                buttons: {

                    stop: false

                },

                // Flash文件 的所在路径

                flash_swf_url: "~/Content/plupload/js/Moxie.swf",

                // silverlight文件所在路径

                silverlight_xap_url: "~/Content/plupload/js/Moxie.xap",

                multipart: true,

                init: {

                    UploadComplete: function (up, files) {

                        jBox.tip("上传完成!", "info");

                    },

                    FileUploaded: function (up, files, result) {

                        var data = JSON.parse(result.response);

                        if (Array.isArray(data)) {

                            for (var i = 0; i < data.length; i++) {

                                fileList.push(data[i]);

                            }

                        } else {

                            fileList.push(data);

                        }

                    }

                }

            });

        });

        var getUploadedFiles = function(callback) {

            if (callback) {

                callback(fileList);

            }

        };

        var GetList = function () {

            return fileList;

        }

    </script>

    <style>

        .tip {

            font-size: 13px;

            color: #ff7f50;

            padding: 15px 0;

        }

        .plupload_file_rename, .plupload_file_namespan {

            height: 17px;

            font-size: 14px;

            font-weight: normal;

        }

        .plupload_content {

            overflow-x: hidden;

        }

        .plupload_view_thumbs .plupload_file_size {

            text-align: center;

        }

        .plupload_droptext {

            color: gray;

        }

        .jbox-content {

            overflow: hidden;

        }

        .plupload_container, .plupload_header, .plupload_filelist_footer, .plupload_filelist_header {

            border-color: #ddd;

        }

        .plupload_header, .plupload_filelist_header {

            border-top: none !important;

            border-left: none !important;

            border-right: none !important;

        }

        .plupload_filelist_footer {

            border-bottom: none;

            border-left: none;

            border-right: none;

        }

        .plupload_view_list .plupload_file {

            height: 2.7rem !important;

            border-left: none !important;

            border-right: none !important;

            border-top-style: none !important;

        }

        .plupload_view_list .plupload_file:first-child {

            border-top-style: solid !important;

        }

        .plupload_view_thumbs .plupload_file {

            background-color: #fff !important;

        }

        .plupload_file_rename {

            font-size: 0.85rem;

            padding: 0;

        }

        .plupload_view_list .plupload_file_action {

            right: 10px !important;

        }

        .plupload_logo {

            width: 22px;

            height: 22px;

            position: absolute;

            top: 17px;

            left: 15px;

        }

        .plupload_header_title {

            position: absolute;

            top: 10px;

            color: #25A6E8;

            left: 45px;

        }

        .plupload_header_text {

            left: 142px;

            position: absolute;

            top: 20px;

            color: #999;

        }

        .plupload_add {

            background: #4CAD72 !important;

            color: #fff !important;

            border-style: none !important;

            margin-right: 0.4rem;

        }

        .plupload_start {

            background: #21AAEC !important;

            color: #fff !important;

            border-style: none !important;

        }

        .plupload_add .ui-button-text, .plupload_start .ui-button-text {

            padding-left: 0.75rem;

            padding-right: 0.75rem;

        }

        .plupload_add .ui-icon, .plupload_start .ui-icon {

            display: none;

        }

    </style>

</head>

<body style="padding: 20px">

<div id="uploader">

    <p>

        你的浏览器没有Flash支持,请安装最新的Flash!

    </p>

</div>

<div class="tip">

    <p>

        提示:单个文件大小不可超过 <b>200</b> M!

    </p>

</div>

</body>

</html>



效果图:

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 我的公共CSS文件@import "normalize.css";/begin主页面//begin主页面/body...
    蓝色海洋_1982阅读 1,208评论 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,748评论 1 45
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 3,205评论 0 11
  • 不会用代码框,所以看着有些乱套,,,,html部分 <!DOCTYPE html> 迅雷看看 ...
    这就是个帅气的名字阅读 1,563评论 0 0
  • 我多想做一颗太阳 普照大地 让大地每个角落都充满光明 我多想做一轮明月 皎洁万里 有时 我也想做一颗小星星 有一份...
    旖旎i阅读 343评论 16 18