html5带进度多文件大文件上传插件

近来正为AMS直点播放系统实现WEB页面，其中就是文件上传这个功能，原来实现这个功能都是用的Flash插件上传，但现在FLASH的寿命马上到 了， 我们马上就不能使用了。所以就只能另辟途径。

HTML5的文件上传功能已经诞生好多年了，只是以前兼容性不是很好，所以没有大范围的使用，当前这已经不是什么问题了。现在网上一找一大堆关于这方面的东西， 索性整理一下形成一个比较好用的JS插件。

下载资源：https://download.csdn.net/download/wanghaisheng/14122258

看下图：

上面就是插件界面，一次可以添加多个文件。 可以一次“全部上传”，也可以分别单个上传。上传成功后“上传”按钮就会消失，可以随时删除上任务。

使用非常简单， 把资源下载后放到WEB目录下就可以使用了，里面有个DEMO.HTML的测试页。

上demo.html代码

如你发现参数不够用，要增加上传时参数也是可以，看见那个PARAM参数了吧，你就模仿那个格式，向里添加，添加多少都可以，但这个你要自己调试一下，因为我没有用，所以也没有调。

你打开jquery.uploadify.js文件，找到 下面的代码

 // 开始上传
						  xhr.open("POST", self.url, true);
						  var vformdata = new FormData();
						  vformdata.append('Filedata',file);
						  //添加POST 参数 如果想添加自己的参数可以在此添加
						  vformdata.append('mediaposition',$('#mediaposition').val() );
						  vformdata.append('mediawenjian',$('#mediawenjian').val() );
						  vformdata.append('vodname',$('#vod_name').val() );
						  vformdata.append('username',option.username );
						  vformdata.append('SESSION_ID',option.SESSION_ID );
						/*  if(self.param!==""||self.param!==null||self.param!==undefined )                        {
							  var paramArray = self.param.split(",");
							  if(!paramArray){
								  for(var i in paramArray){
										var arr = paramArray[i].split(":");
										if(arr.length == 2){
											vformdata.append(arr[0], arr[1] );
										}								  
								  }
								}  
							}*/

						  xhr.send(vformdata);

你把那个注释的/**/符号去掉，调试一下，只要这里正确就能提交到后台。

当然你也可以像这其中的

vformdata.append('mediaposition',$('#mediaposition').val() );
vformdata.append('mediawenjian',$('#mediawenjian').val() );
vformdata.append('vodname',$('#vod_name').val() );

这三行一样添加，这样你要在页面中添加相应的标签。

还有最后一种方式， 看一下我的 'username'参数的传递，自己加一个也不难。