Plupload

    <div style="text-align:center">
        <span>
            <button id="browse" class="btn btn-primary">选择文件</button>
            <button id="start_upload" class="btn btn-primary">开始上传</button>
        </span>
        <table id="file-list" class="table">

        </table>
    </div>
    <script>
        var uploader = new plupload.Uploader({ //实例化一个plupload上传对象
            browse_button: 'browse',
            url: 'Upload.ashx',
            filters: {
                mime_types: [ //只允许上传图片和zip文件
                  { title: "Image files", extensions: "jpg,gif,png" },
                  { title: "Zip files", extensions: "zip" },
                  { title: "MP3", extensions: "mp3" },
                  { title: "VIDEO", extensions: "avi" }
                ],

                max_file_size: '1024000mb', //最大只能上传100MB的文件
                prevent_duplicates: true //不允许选取重复文件
            },
            multi_selection: true,
            //chunk_size: "1024kb",
            flash_swf_url: 'js/Moxie.swf',
            silverlight_xap_url: 'js/Moxie.xap',
        });
        uploader.init(); //初始化

        //绑定文件添加进队列事件
        uploader.bind('FilesAdded', function (uploader, files) {
            for (var i = 0, len = files.length; i < len; i++) {
                var file_name = files[i].name; //文件名
                //构造html来更新UI
                var liStr = '<li id="file-' + files[i].id + '"><p class="file-name">'+ file_name + '</p><p class="progress"></p></li>';

                var html = '<tr><td width="80%">' + liStr + '</td><td width="20%"><span id="num' + files[i].id + '" style="font-weight:700;font-size:32px"></span></td></tr>';

                $(html).appendTo('#file-list');
            }
        });

        //绑定文件上传进度事件
        uploader.bind('UploadProgress', function (uploader, file) {
            $('#file-' + file.id + ' .progress').css('width', file.percent + '%');//控制进度条
            $("#num"+file.id).html(file.percent + "%");
        });

        //上传按钮
        $('#start_upload').click(function () {
            uploader.start(); //开始上传
        });
    </script>

参考文章:
前端上传组件Plupload使用指南

工具和Demo:
plupload-2.1.8.zip
Demo

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值