欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-02 19:21:20
近来正为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