上传文件

需求

实现视频上传播放，仅限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