FromData+progress文件上传进度
2018-07-09 本文已影响0人
新世界的冒险
total - 被转移总字节数
loaded - 已上传字节
lengthComputable - 指定上传总数据大小（上传文件总大小已知）
HTML5 File API
File对象有以下属性：
name - 文件名称（包含任意路径）
type - 文件MIME类型（小写）
size - 文件字节大小
image.png
<!DOCTYPE html>
<html>
<head>
<title>Upload Files using XMLHttpRequest - Minimal</title>
</head>
<body>
<form id="form1" enctype="multipart/form-data" method="post" action="Upload.aspx">
<div class="row">
<label for="fileToUpload">Select a File to Upload</label><br>
<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();">
</div>
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<div class="row">
<input type="button" onclick="uploadFile()" value="Upload">
</div>
<div id="progressNumber"></div>
</form>
<progress value="0" max="100" id="progressNum"></progress>
<script type="text/javascript">
function fileSelected(){
//获取文件对象
var file=document.getElementById("fileToUpload").files[0];
var fileName=document.getElementById("fileName");
var fileSizes=document.getElementById("fileSize");
var fileType=document.getElementById("fileType");
if(file){
var fileSize=0;
//单位换算
if(file.size>1024*1024){
//为获得整数，所以file.size*100
fileSize=(Math.round(file.size*100/(1024*1024))/100).toString()+"MB";
}else{
fileSize=(Math.round(file.size*100/1024)/100).toString()+"KB";
}
//分别获得文件名，文件大小，文件类型
fileName.innerHTML="Name:"+file.name;
fileSizes.innerHTML="Size:"+fileSize;
fileType.innerHTML="Type:"+file.type;
}
}
function uploadFile(){
//H5 FormData对象就模拟一个原始的表单格式的数据，以前上传文件非得要用个form包起来，
//就是和后台约定的一个传输数据格式，FormData就是按照规定的格式，把form中所有表单
//元素的name与value组装成一个queryString，省去你手工拼接的工作，如果用过jquery
//的话，应该知道有个表单序列号的函数，作用和它是一样的，不过FormData还提供了
//更多的操作方法，全部在原型中，自己本身没任何的属性及方法。
var fd = new FormData();
fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
var xhr=new XMLHttpRequest();
// var fd=document.getElementById("form1").getFormData();
//监听事件
xhr.upload.addEventListener("progress",uploadProgress,false);
xhr.addEventListener("load",uploadComplete,false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
//发送文件和表单自定义参数
xhr.open("post","UploadMinimal.aspx");
xhr.send(fd);
}
//上传进度
function uploadProgress(evt){
var proNumber=document.getElementById("progressNumber");
var progressNum=document.getElementById("progressNum");
//显示进度
if(evt.lengthComputable){ //指定上传总数据大小
//loaded上传字节数；total总字节数
var percentComplete=Math.round(evt.loaded * 100 / evt.total);
proNumber.innerHTML=percentComplete.toString()+"%";
progressNum.value=percentComplete;
}else{
proNumber.innerHTML="无法计算";
}
}
//上传响应成功
function uploadComplete(evt) {
/* 当服务器响应后，这个事件就会被触发 */
alert(evt.target.responseText);
}
//上传失败
function uploadFailed(evt) {
alert("上传文件发生了错误尝试");
}
//取消上传
function uploadCanceled(evt) {
alert("上传被用户取消或者浏览器断开连接");
}
</script>
</body>
</html>
