plupload多按钮上传

5.1k 前端 , 一条评论

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="www.awaimai.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="www.awaimai.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="www.awaimai.com">图片3</button>
    </div>
</div>

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

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

  1. id:必须不同。
  2. class:必须为browse_button,与JS代码对应。
  3. data-upload-url:服务器处理上传地址。
  4. data-extensions:允许上传的文件后缀。
  5. data-max-size:允许上传的最大尺寸。
  6. 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,就可以了。

 

参考资料:

  1. plupload多实例实现
  2. 关于plupload的使用心得

1 条评论

A
AAA says: 回复

IE9 并不支持 请问有什么解决办法吗?

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

昵称 *