需求
实现视频上传播放,仅限mp4、大小xxmb一下,带进度条,ie兼容到ie9及以上。
结论
能用ajax就用ajax,不能就用submit。ie9没有进度
代码
HTML :
<form id="fileUploadF" method="post" target="file_upload_return"
class="form form-group text-right" enctype="multipart/form-data"
action="http://100.80.136.106:3000/video">
<input type="file" id="fileUpIpt" class="fileUpIpt form-inline"
accept="*/*" name="files" multiple="multiple" />
<input type="hidden" name="qblcId" value="${qblcId}" />
</form>
<iframe id="file_upload_return" border="none" width="0" height="0"
name="file_upload_return"></iframe>
<div class="progress_wrap">
<div id="porcessBar">sss</div>
</div>
JS:
//监听是否上传新的文件
$("#fileUpIpt").change(function(){
if($(this).val() != ""){
try{//尝试直接使用异步上传
var formData = new FormData(document.getElementById("fileUploadF"));
ajaxFileUpload(formData);
return false;
}catch(err){
//如果不支持异步上传则使用表单提交
var form = document.getElementById("fileUploadF");
form.submit();
$("#file_upload_return").load(function(){//获取iframe中的内容
var body = $(window.frames['file_upload_return'].document.body);
var datas = eval('(' + body[0].textContent + ')');
console.log(JSON.stringify(datas));
});
}
}
})
//ajax文件上传主函数
function ajaxFileUpload(datas){
$.ajax({
type: "post",
url: "http://100.80.136.106:3000/video",
// async: true,
data: datas,
contentType: 'application/x-www-form-urlencoded',
processData: false,
xhr: function(){
var xhrObj = $.ajaxSettings.xhr();
if(onprogress && xhrObj.upload) {
xhrObj.upload.addEventListener("progress" , onprogress, false);
return xhrObj;
}
},
success: function(res){
}
});
}
// 附件上传情况 ,这个方法大概0.05-0.1秒执行一次
function onprogress(evt){
$(".progress_wrap").show();
var loaded = evt.loaded; //已经上传大小情况
var tot = evt.total; //附件总大小
var per = Math.floor(100*loaded/tot); //已经上传的百分比
if(per==100){
console.log("上传成功! 正在处理请稍后...",function(){
$(".progress_wrap").hide();
});
}
console.log(per);
$("#porcessBar").html( per +"%" );
$("#porcessBar").css("width" , per +"%");
}
注意
- 不能使用trigger ,会拒绝访问。可以弄个透明到定位上。
- load要写在submit下面。不然会报语法错误。
- 后端接口返回的格式要是text/plain或text/html 。不然会提示下载
https://www.cnblogs.com/websharehome/p/8526336.html
https://blog.csdn.net/weixin_40848550/article/details/82697225