plupload多按钮上传

Gary

8 年前

plupload可以轻松实现拖动、点击上传等功能，但是没有明确说明，多按钮上传方式（不要告诉我复制粘贴改browse_button这种方式）。

下面，我们就来探索这样的功能，初始化一段plupload代码，实现多个上传按钮。

1 演示和下载

点击查看演示Demo。

点击这里下载完整代码。

2 HTML代码

HTML代码如下：

<div>
    <div class="upload-box">
        <input type="text" name="pic1" value=""/>
        <div class="preview"><img src=""></div>
        <div class="process none">
            <span class="filename"></span>
            <span class="filesize"></span>
            <span class="percent"></span>
        </div>
        <button id="pickfiles1" class="browse_button" data-upload-url="upload.php" data-extensions="jpg,png,gif,bmp" data-max-size="10mb" data-base-url="garymeng.com">图片1</button>
    </div>
    <div class="upload-box">
        <input type="text" name="pic1" value=""/>
        <div class="preview"><img src=""></div>
        <div class="process none">
            <span class="filename"></span>
            <span class="filesize"></span>
            <span class="percent"></span>
        </div>
        <button id="pickfiles2" class="browse_button" data-upload-url="upload.php" data-extensions="jpg,png,gif,bmp" data-max-size="10mb" data-base-url="garymeng.com">图片2</button>
    </div>
    <div class="upload-box">
        <input type="text" name="pic1" value=""/>
        <div class="preview"><img src=""></div>
        <div class="process none">
            <span class="filename"></span>
            <span class="filesize"></span>
            <span class="percent"></span>
        </div>
        <button id="pickfiles3" class="browse_button" data-upload-url="upload.php" data-extensions="jpg,png,gif,bmp" data-max-size="10mb" data-base-url="garymeng.com">图片3</button>
    </div>
</div>

添加图片后显示文件名和文件尺寸，上传过程显示进度在percent中，上传完成后把路径填入input，以供提交。

其中，button中有几个属性会传递给plupload，

id：必须不同。
class：必须为browse_button，与JS代码对应。
data-upload-url：服务器处理上传地址。
data-extensions：允许上传的文件后缀。
data-max-size：允许上传的最大尺寸。
data-base-url：图片预览基地址。

3 JS代码

首先，引入JQuery和plupload.full.min.js文件，

<script type="text/javascript" src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="./plupload/plupload.full.min.js"></script>

然后初始化plupload：

<script type="text/javascript">
    var uploaders = [];
    var initUploaders = function(uploaders) {
        $(".browse_button").each(function() {
            self = $(this);
            var browse_button_id = self.attr('id'),
                base = self.attr('data-base-url'),
                upload_url = self.attr('data-upload-url'),
                max_size = self.attr('data-max-size'),
                file_extensions = self.attr('data-extensions'),

                input = self.siblings('input'),
                process = self.siblings('.process'),
                preview = self.siblings('.preview');

            var flash_swf_url = './plupload/Moxie.swf',
                silverlight_xap_url = './plupload/Moxie.xap';

            var uploader = new plupload.Uploader({
                runtimes: 'html5,flash,silverlight,html4',
                browse_button: browse_button_id,
                url: upload_url,
                flash_swf_url: flash_swf_url,
                silverlight_xap_url: silverlight_xap_url,

                filters: {
                    max_file_size: max_size,
                    mime_types: [
                        {title: "Image files", extensions: file_extensions}
                    ]
                },

                init: {
                    PostInit: function () {
                    },

                    FilesAdded: function (up, files) {
                        plupload.each(files, function (file) {
                            process.attr('id', file.id).removeClass('none');
                            process.find('.filename').html(file.name + ', ');
                            process.find('.filesize').html(plupload.formatSize(file.size) + ', ');
                        });
                        up.start();
                    },

                    UploadProgress: function (up, file) {
                        process.find('.percent').html(file.percent + '%');
                    },

                    FileUploaded: function (up, file, result) {
                        var responseJson = JSON.parse(result.response);
                        var filepath = responseJson.result;
                        input.val(filepath);
                        preview.children('img').attr('src', base + filepath);
                    }
                }
            });

            uploader.init();
            uploaders.push(uploader);
        });
    };
    initUploaders(uploaders);
</script>

每添加一个上传按钮，只需为其添加browse_button的class，就可以了。

参考资料：