开发者社区> 源码下载> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

plupload上传视频等大文件

简介: 本文演示了新浪微博plupload上传视频文件,支持格式有mpg,m4v,mp4,flv,3gp,mov,avi,rmvb,mkv,wmv。
+关注继续查看
本文演示了新浪微博plupload上传视频文件,支持格式有mpg,m4v,mp4,flv,3gp,mov,avi,rmvb,mkv,wmv。本文的视频上传分两步,首先选择文件,然后点击上传按钮开始上传,您也可以直接选择文件上传,具体请参考http://www.erdangjiade.com/js/863.html
本案例演示参考下这里: http://www.erdangjiade.com/js/874.html 
效果图片如下:
 
完整代码逻辑如下:
视频类型文件上传,支持中途取消上传
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', //flash文件地址
silverlight_xap_url: 'js/plugins/plupload/Moxie.xap', //silverlight文件地址
filters: {
max_file_size: '10mb', //最大上传文件大小(格式100b, 10kb, 10mb, 1gb)
mime_types: [//允许文件上传类型
{title: "files", extensions: "mpg,m4v,mp4,flv,3gp,mov,avi,rmvb,mkv,wmv"}
]
},
// chunk_size: "5mb", //分片上传文件时,每片文件被切割成的大小,为数字时单位为字节。也可以使用一个带单位的字符串,如"200kb"。当该值为0时表示不使用分片上传功能
multi_selection: false, //true:ctrl多文件上传, 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(); //调用实例对象的start()方法开始上传文件,当然你也可以在其他地方调用该方法
})
$("#video_iput").attr("file_id", files[0]['id'])
// console.log(files);
},
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 + ")");//解析返回的json数据
$("#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();

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
重读vue电商网站16之Upload 上传组件
重读vue电商网站16之Upload 上传组件
35 0
SmartUpload文件上传组件的使用教程
在项目中使用SmartUpload组件可以进行文件的上传和下载操作 使用步骤 1.导入jar包,进行build path操作 2.编写文件上传页面,代码如下    请选择要上传的文件:        3.
883 0
ajaxfileupload实现文件异步上传
首先需要下载js文件,提供一个CSDN的下载地址 http://download.csdn.
839 0
文件上传 webuploader
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/bitree1/article/details/50252565 1、引入资源 使用Web Uploader文件上传需要引入三种资源:JS, CSS, SWF。
1213 0
Uploadify文件上传
一、简介    Uploadify 是一种基于html5 或 flash的多文件上传的jQuery插件。Uploadify可以支持多种定制。它是一种异步的文件上传插件。下载网站为http://www.uploadify.com/。
1359 0
ajaxFileUpload文件上传
一、简介   ajaxFileUpload是一种异步的文件上传控件,通过ajax进行文件上传,并获取上传处理结果。在很多时候我们需要使用到文件上传的功能,但是不需要使用那些强大的上传插件。此时就可以使用ajaxFileUpload。
1024 0
swfupload 上传控件的配置
第一:下载swfupload控件,点击下载:   第二,解压缩后,在项目中添加这四个文件,如图:     然后,在你的js文件中添加这段代码: /** * *定义swfupload配置文件对象 **/ var swfObj = { // Backend Settings upload_url: ".
596 0
+关注
源码下载
本人二当家的,性温和,擅代码,好技术,人谓代码狗,程序猿;河南商丘人氏也,现居上海,曾先后创办,上海什尔网络科技,上海红苹果电脑科技有限公司,上海素商网络科技等;自毕业即誓言:定要搞网络,携思科、华为等路由、交换机以定天下;初涉江湖,身不由己,期间,曾开过水果店,熟食店,亦开过淘
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载