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

程序员文章站 2022-03-29 21:32:16

近来正为AMS直点播放系统实现WEB页面，其中就是文件上传这个功能，原来实现这个功能都是用的Flash插件上传，但现在FLASH的寿命马上到了，我们马上就不能使用了。所以就只能另辟途径。HTML5的文件上传功能已经诞生好多年了，只是以前兼容性不是很好，所以没有大范围的使用，当前这已经不是什么问题了。现在网上一找一大堆关于这方面的东西，索性整理一下形成一个比较好用的JS插件。看下图：上面就是插件界面，一次可以添加多个文件。可以一次“全部上传”，也可以分别单个上传。上传成功后“上传”按钮......

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

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

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

看下图：

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

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

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

上demo.html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5上传demo</title>
<link rel="stylesheet" type="text/css" href="uploadify.css"/>
<script type="text/javascript" src="jquery-1.5.2.js"></script>
<script type="text/javascript" src="jquery.uploadify.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
    
    $(function(){
    $('#upload').uploadify({
        auto:false,//是否是自动上传， 如果设为TRUE，那么添加文件后会立即上传。
        username:'myane',//这个是FORM中的参数，提交给服务器做上传认证使用
        SESSION_ID:'1234567',//这个是FORM中的参数，提交给服务器做上传认证使用
    //  param:'username:{{$user.USERNAME}},SESSION_ID:{{$sessionid}}',//这个参数目前没有使用，你可以使用，上传时那个解析代码我没有测试，所以我注释掉了，你可以打开去调试一下使用
        multi:true,
        removeTimeout:9999999,//这个是一个删除的时间，当上传完毕后时间到了就会把任务自动删除。
        url:'./upload.php',//这个是接收页面的地址，demo的接收页面是这个

        fileTypeExts:'video/mp4,video/mkv,video/mov',//这个是上传文件类型的指定，不符合的文件不会被添到列表中
        onUploadStart:function(){
        //    alert('开始上传');
            },
        onInit:function(){
        //    alert('初始化');
            },
        onUploadComplete:function(){
            //alert('上传完成');
            }
        });
    });
</script>
</head>

<body>
<div id="upload"></div>
</body>
</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'参数的传递，自己加一个也不难。

本文地址：https://blog.csdn.net/wanghaisheng/article/details/112529397