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
看下图:
上面就是插件界面,一次可以添加多个文件。 可以一次“全部上传”,也可以分别单个上传。上传成功后“上传”按钮就会消失,可以随时删除上任务。
使用非常简单, 把资源下载后放到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