利用Plupload来进行前端文件上传

Plupload有以下功能和特点：

1、拥有多种上传方式：HTML5、flash、silverlight以及传统的<input type=”file” />。Plupload会自动侦测当前的环境，选择最合适的上传方式，并且会优先使用HTML5的方式。所以你完全不用去操心当前的浏览器支持哪些上传方式，Plupload会自动为你选择最合适的方式。

2、支持以拖拽的方式来选取要上传的文件

3、支持在前端压缩图片，即在图片文件还未上传之前就对它进行压缩

4、可以直接读取原生的文件数据，这样的好处就是例如可以在图片文件还未上传之前就能把它显示在页面上预览

5、支持把大文件切割成小片进行上传，因为有些浏览器对很大的文件比如几G的一些文件无法上传。

所以说用Plupload进行文件上传可以说是十分的方便，下面我将进行代码演示首先要引入Plupload的js文件这里就不赘述了

<script>部分：

$("#uploader").pluploadQueue({
					runtimes: 'flash,html5,html4,silverlight', // 这里是说用什么技术引擎
					url: '<%=basePath%>jfp_forensics!saveFile.action',// 服务端上传路径
					unique_names: true,// 上传的文件名是否唯一
					file_data_name:'upfile',//指定文件上传时文件域的名称，默认为file
					max_file_size : '200mb', // 文件上传最大限制。
					chunks: {
						size: '200mb',
						send_chunk_number: false
					}, // 上传分块每块的大小，这个值小于服务器最大上传限制的值即可。
					flash_swf_url: '<%=basePath%>public/script/plupload-2.1.1/Moxie.swf', // plupload.flash.swf 的所在路径
					silverlight_xap_url: '<%=basePath%>public/script/plupload-2.1.1/Moxie.xap',   // silverlight所在路径
					dragdrop: true,//拖放
					preinit: {//进行文件上传的操作
						UploadFile: function(up, file) {
							up.settings.multipart_params = {
							 	randomNum : $("#filekey").val(),
							 	ecType : ecTypeTmp,
							 	prNo : prNoTmp
							};
							len++;//上传多个文件时进行判断上传了几个文件
						}
					},
					init: {//这里的初始化方法我是对一些表单数据的保存，文件上传的操作已经在preinit执行了

						UploadComplete : function(up ,files) {
							if(up.state == plupload.STOPPED){
								if(filelen == len){
								$.ajax({
									type: "POST",
									url:'<%=basePath%>jfp_forensics!addForensics.action',
									data:$('#saveform').serialize(),
									dataType:'json',
									success:function(data){
										if(data.success){
											$('#tt').datagrid("reload");
											$('#win').window('close'); // close a window
											alert("保存信息");
										}else{
											alert("保存信息出错");
										}
									}
								});
								len = 0;
								}
								
							}else{
								alert("上传失败");
							}
						}
					}
				});

html部分：

<div id="uploader">
	<p>浏览器不支持 请使用IE8 或者 CHROME浏览器</p>
</div>

//以上就是把Plupload组件初始化，想要保存文件时代码如下 

function doSaveInfo(){
				
				var uploaderTmp = $("#uploader").pluploadQueue();
				var filesCount = uploaderTmp.files;

                               //中间可以插入自己的一些判断
			
				uploaderTmp.start();
				
			}

之后便会把添加的文件传到后台去。以上就是一个简单的利用Plupload上传文件的方法 

下面附上Plupload中文文档的链接以便以后自己查阅：http://www.phpin.net/tools/plupload/