web 文件上传组件 Plupload

Plupload官网：点击打开链接   建议下载最新版本，低版本会出现浏览器兼容问题。

最近公司有个项目需要在web端使用多文件上传功能，刚开始准备使用HTML5来做，但是IE9以下是都不支持的，于是想到了flash，在网上搜了下各种开源的组件，最后决定使用Plupload，下面来介绍一下该组件使用时遇到的一些问题以及解决方案。

  先贴出配置参数：

<script type="text/javascript">
// Initialize the widget when the DOM is ready
$(function() {
    // Setup html5 version
    $("#uploader").pluploadQueue({
        // General settings
         // General settings
        runtimes : ‘html5,flash,silverlight,html4‘,
        url : ‘stroage/upload‘,
        unique_names:false,
        // Maximum file size
       	max_file_size : ‘100mb‘,
        chunk_size: ‘50mb‘,
        multiple_queues :true,
        // Resize images on clientside if we can
        resize : {
            width : 200,
            height : 200,
            quality : 90,
            crop: true // crop to exact dimensions
        },
 
        // Specify what files to browse for
        filters : [
			{ title : "*", extensions : "*" }
        ],
 
        // Rename files by clicking on their titles
        rename: false,
         
        // Enable ability to drag‘n‘drop files onto the widget (currently only HTML5 supports that)
        dragdrop: false,
 
        // Views to activate
        views: {
            list: true,
            thumbs: true, // Show thumbs
            active: ‘thumbs‘
        },
 
        // Flash settings
        flash_swf_url : ‘plupload/js/Moxie.swf‘,
     
        // Silverlight settings
        silverlight_xap_url : ‘plupload/js/Moxie.xap‘
    });
});
</script>

效果图：

   使用2.13版本，上传一个大于1M的文件时候，Plupload自动将我文件名改成了 blob，官方论坛上也有很多人贴出了这个问题，也有不少的解决方案。

1、修改源码

2、不对文件进行分块，将chunk_size设置为0

3、将chunk_size的值设大

我使用前两种方式都未解决问题，最后将chunk_size设置为50mb，完美解决问题，具体原因不得而知。

    使用过程中，想给文件添加上传速率，需要修改源码，不废话，直接上代码

target.prepend(
			‘<div class="plupload_wrapper plupload_scroll">‘ +
				‘<div id="‘ + id + ‘_container" class="plupload_container">‘ +
					‘<div class="plupload">‘+

						‘<div class="plupload_content">‘ +
							‘<div class="plupload_filelist_header">‘ +
								‘<div class="plupload_file_name">‘ + _(‘Filename‘) + ‘</div>‘ +
								‘<div class="plupload_file_action"> </div>‘ +
								‘<div class="plupload_file_status"><span>‘ + _(‘Status‘) + ‘</span></div>‘ +
								‘<div class="plupload_file_size">‘ + _(‘Size‘) + ‘</div>‘ +
								‘<div class="plupload_clearer"> </div>‘ +
							‘</div>‘ +

							‘<ul id="‘ + id + ‘_filelist" class="plupload_filelist"></ul>‘ +

							‘<div class="plupload_filelist_footer">‘ +
								‘<div class="plupload_file_name">‘ +
									‘<div class="plupload_buttons">‘ +
										‘<a href="#" class="plupload_button plupload_add" id="‘ + id + ‘_browse">‘ + _(‘Add Files‘) + ‘</a>‘ +
										‘<a href="#" class="plupload_button plupload_start">‘ + _(‘Start Upload‘) + ‘</a>‘ +
									‘</div>‘ +
									‘<span class="plupload_upload_status"></span>‘ +
								‘</div>‘ +
								‘<div class="plupload_file_action"></div>‘ +
								‘<span style="margin-left: 120px;" class="plupload_total_bytespersec">0kb/sec</span> ‘+
								‘<div class="plupload_file_status"><span class="plupload_total_status">0%</span></div>‘ +
								‘<div class="plupload_file_size"><span class="plupload_total_file_size">0 b</span></div>‘ +
								‘<div class="plupload_progress">‘ +
									‘<div class="plupload_progress_container">‘ +
										‘<div class="plupload_progress_bar"></div>‘ +
									‘</div>‘ +
								‘</div>‘ +
								‘<div class="plupload_clearer"> </div>‘ +
							‘</div>‘ +
						‘</div>‘ +
					‘</div>‘ +
				‘</div>‘ +
				‘<input type="hidden" id="‘ + id + ‘_count" name="‘ + id + ‘_count" value="0" />‘ +
			‘</div>‘
		);

function updateTotalProgress() {
					$(‘span.plupload_total_bytespersec‘, target).html(parseInt(uploader.total.bytesPerSec/1024)+" kb/sec");
					$(‘span.plupload_total_status‘, target).html(uploader.total.percent + ‘%‘);
					$(‘div.plupload_progress_bar‘, target).css(‘width‘, uploader.total.percent + ‘%‘);
					$(‘span.plupload_upload_status‘, target).html(
						o.sprintf(_(‘Uploaded %d/%d files‘), uploader.total.uploaded, uploader.files.length)
					);
				}

下面介绍下Plupload配置参数

filters: {
  mime_types : [ //只允许上传图片和zip文件
    { title : "Image files", extensions : "jpg,gif,png" }, 
    { title : "Zip files", extensions : "zip" }
  ],
  max_file_size : ‘400kb‘, //最大只能上传400kb的文件
  prevent_duplicates : true //不允许选取重复文件
}
					

multipart_params: {
  one: ‘1‘,
  two: ‘2‘,
  three: { //值还可以是一个字面量对象
    a: ‘4‘,
    b: ‘5‘
  },
  four: [‘6‘, ‘7‘, ‘8‘]  //也可以是一个数组
}
					

resize: {
  width: 100,
  height: 100,
  crop: true,
  quality: 60,
  preserve_headers: false
}
					

web 文件上传组件 Plupload

原文：http://blog.csdn.net/u014723529/article/details/46755805