导读:Plupload有以下功能和特点:1、拥有多种上传方式:HTML5、flash、silverlight以及传统的<input type=file />。Plupload会自动侦测当前的...
Plupload有以下功能和特点:
1、拥有多种上传方式:HTML5、flash、silverlight以及传统的<input type=”file” />。Plupload会自动侦测当前的环境,选择最合适的上传方式,并且会优先使用HTML5的方式。所以你完全不用去操心当前的浏览器支持哪些上传方式,Plupload会自动为你选择最合适的方式。
2、支持以拖拽的方式来选取要上传的文件
3、支持在前端压缩图片,即在图片文件还未上传之前就对它进行压缩
4、可以直接读取原生的文件数据,这样的好处就是例如可以在图片文件还未上传之前就能把它显示在页面上预览
5、支持把大文件切割成小片进行上传,因为有些浏览器对很大的文件比如几G的一些文件无法上传。
官网:
http://www.plupload.com/
视频类型文件上传,支持中途取消上传
- var uploader_video = new plupload.Uploader({
- runtimes: 'gears,html5,html4,silverlight,flash',
- browse_button: ['video_upload_btn'],
- url: "ajax.php",
- flash_swf_url: 'js/plugins/plupload/Moxie.swf',
- silverlight_xap_url: 'js/plugins/plupload/Moxie.xap',
- filters: {
- max_file_size: '10mb',
- mime_types: [
- {title: "files", extensions: "mpg,m4v,mp4,flv,3gp,mov,avi,rmvb,mkv,wmv"}
- ]
- },
-
- multi_selection: false,
- init: {
- FilesAdded: function(up, files) {
-
- $("#video_name_box").css({"display": "inline-block"});
- $("#video_upload_btn").hide();
- $("#video_file_name").text(files[0].name);
- $("#upload_video").removeClass("disabled");
-
- $("#upload_video").click(function() {
- uploader_video.start();
- })
- $("#video_iput").attr("file_id", files[0]['id'])
-
- },
- UploadProgress: function(up, file) {
- $("#video_loading").show();
- $('#upload_video_area,#video_upload_area').hide();
- var percent = file.percent;
- $("#percent").css({"width": percent + "%"});
- $("#percentnum").text(percent + "%");
- $("#video_success").hide();
-
- },
- FileUploaded: function(up, file, info) {
- $("#video_loading").hide();
- $("#video_success").show();
- var data = eval("(" + info.response + ")");
- $("#video_iput").html("<input type='hidden'id='video_file' value='" + data.pic + "'/><input type='hidden'id='video_name' value='" + data.name + "'/>");
- },
- Error: function(up, err) {
- alert(err.message);
- }
- }
- });
- uploader_video.init();