使用PLupload在同一页面中进行多个不同类型上传解决方案和一次多文件上传的注意事项

首先感谢，http://www.cnblogs.com/2050/p/3913184.html 这篇文章作者。

在使用PLUpload之前个人先封装了一些常用配置，并且将success与error做为配置项绑定到原有事件中，另：由于工作原因，文件都是选中后就直接上传，也同步绑定了FilesAdded 方法，不需要的可以去除.

代码如下：

$.fn.plSingleUpload = function (options) {
    var settings = {
        flash_swf_url: '/scripts/Moxie.swf',
        silverlight_xap_url: '/scripts/Moxie.xap',
        multi_selection: false
    };
    jQuery.extend(settings, options);
    var uploaders = new plupload.Uploader(settings);
    if (settings.success) {
        uploaders.bind('FileUploaded', function (uploader, file, result) {
            var r = result.response;
            var args = [r, uploader, file, result];
            try {
                var data = $.parseJSON(r);
                if (data != null) {
                    args[0] = data;
                }
            }
            catch (e) { }
            settings.success.apply(uploader, args);
        });
    }
    if (settings.error) {
        uploaders.bind('Error', function (uploader, error) {
            settings.error(error.message);
        });
    }
    else {
        uploaders.bind('Error', function (uploader, error) {
            alert("erro :" + error.message);
        });
    }
    uploaders.bind('FilesAdded', function (uploader, files) {
        uploader.start();
    });
    this.each(function () {
        uploaders.setOption('browse_button', this.id);
        uploaders.init();
        uploaders.refresh();
    });
    return uploaders;
};

PLUpload只能有一个实例。如果有多个不同的类型的文件需要上传时需要执行二个步骤，这里拿项目举例。

步骤1：项目中有各种费用需要在一个页面中上传，这里在上传按钮中指定上传类型(data-action=1,2,3,4分别对应4种类型)，再使用一个隐藏的按钮用来实例化PlUpload

            <div class="col-md-8">
                <div class="btn-group form-inline">
                    <button type="button" data-action="4" class="btn btn-default"><i class="glyphicon glyphicon-upload"></i> 承兑到款导入</button>
                    <button type="button" data-action="3" class="btn btn-default"><i class="glyphicon glyphicon-upload"></i> 垫付运费等导入</button>
                    <button type="button" data-action="2" class="btn btn-default"><i class="glyphicon glyphicon-upload"></i> 广告费导入</button>
                    <button type="button" data-action="1" class="btn btn-default"><i class="glyphicon glyphicon-upload"></i> 交行等非工行到款导入</button>
                    <button type="button" id="upload1" class="btn btn-default hidden"><i class="glyphicon glyphicon-upload"></i> 导入</button>
                </div>
            </div>

步骤2：点击不同的按钮时，传递参数，并且点击隐藏按钮，代码如下

<script language="javascript" type="text/javascript" charset="gb2312">
    $(document.body).ready(function () {
        var uploader = $("#upload1").plSingleUpload({
            url: '@Url.Action("ImportExls")',
            success: function (data) {
                if (data.Success) {
                }
                else {
                }
                $.alert(data.Message);
            }
        });
        $("button[data-action]").click(function () {
            var action = $(this).attr("data-action");
            uploader.setOption("multipart_params", { 'action': action });
            $("#upload1").click();
        });
      
    });
</script>

　　

 

一次多文件上传的注意事项 ： plupload上传文件是一个提交成功之后再提交另一个，直至所有文件上传完成，与我们想像中的一次提交不同。意味着在处理上传文件的时候，参数只能使用HttpPostedFileWrapper 而不能用HttpPostedFileWrapper[] ,默认情况下 upload1 将做为上传文件提交时的name进行提交