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>