jQuery实现视频大文件上传插件Plupload

Plupload有以下功能和特点：

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

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

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

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

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

官网：http://www.plupload.com/  

视频类型文件上传，支持中途取消上传  

1. var uploader_video = new plupload.Uploader({//创建实例的构造方法  
2.     runtimes: 'gears,html5,html4,silverlight,flash', //上传插件初始化选用那种方式的优先级顺序  
3.     browse_button: ['video_upload_btn'], // 上传按钮  
4.     url: "ajax.php", //远程上传地址  
5.     flash_swf_url: 'js/plugins/plupload/Moxie.swf', //flash文件地址  
6.     silverlight_xap_url: 'js/plugins/plupload/Moxie.xap', //silverlight文件地址  
7.     filters: {  
8.         max_file_size: '10mb', //最大上传文件大小（格式100b, 10kb, 10mb, 1gb）  
9.         mime_types: [//允许文件上传类型  
10.             {title: "files", extensions: "mpg,m4v,mp4,flv,3gp,mov,avi,rmvb,mkv,wmv"}  
11.         ]  
12.     },  
13.     //       chunk_size: "5mb", //分片上传文件时，每片文件被切割成的大小，为数字时单位为字节。也可以使用一个带单位的字符串，如"200kb"。当该值为0时表示不使用分片上传功能  
14.     multi_selection: false, //true:ctrl多文件上传, false 单文件上传  
15.     init: {  
16.         FilesAdded: function(up, files) { //文件上传前  
17.   
18.             $("#video_name_box").css({"display": "inline-block"});  
19.             $("#video_upload_btn").hide();  
20.             $("#video_file_name").text(files[0].name);  
21.             $("#upload_video").removeClass("disabled");  
22.   
23.             $("#upload_video").click(function() {  
24.                 uploader_video.start(); //调用实例对象的start()方法开始上传文件，当然你也可以在其他地方调用该方法  
25.             })  
26.             $("#video_iput").attr("file_id", files[0]['id'])  
27.             //                    console.log(files);  
28.         },  
29.         UploadProgress: function(up, file) { //上传中，显示进度条  
30.             $("#video_loading").show();  
31.             $('#upload_video_area,#video_upload_area').hide();  
32.             var percent = file.percent;  
33.             $("#percent").css({"width": percent + "%"});  
34.             $("#percentnum").text(percent + "%");  
35.             $("#video_success").hide();  
36.   
37.         },  
38.         FileUploaded: function(up, file, info) { //文件上传成功的时候触发  
39.             $("#video_loading").hide();  
40.             $("#video_success").show();  
41.             var data = eval("(" + info.response + ")");//解析返回的json数据  
42.             $("#video_iput").html("<input type='hidden'id='video_file' value='" + data.pic + "'/><input type='hidden'id='video_name' value='" + data.name + "'/>");  
43.         },  
44.         Error: function(up, err) { //上传出错的时候触发  
45.             alert(err.message);  
46.         }  
47.     }  
48. });  
49. uploader_video.init();