使用Html5实现异步上传文件,支持跨域,带有上传进度条

2020-04-21 22:59:40易采站长站整理

                    fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + ‘KB’;   
                document.getElementById(‘fileName’).innerHTML = ‘Name: ‘ + file.name;   
                document.getElementById(‘fileSize’).innerHTML = ‘Size: ‘ + fileSize;   
                document.getElementById(‘fileType’).innerHTML = ‘Type: ‘ + file.type;   
            }   
        }   
  
  
        function uploadFile() {   
            var fd = new FormData();   
            fd.append("fileInput", document.getElementById(‘fileInput’).files[0]);   
            var xhr = new XMLHttpRequest();   
            xhr.upload.addEventListener("progress", uploadProgress, false);   
            xhr.addEventListener("load", uploadComplete, false);   
            xhr.addEventListener("error", uploadFailed, false);   
            xhr.addEventListener("abort", uploadCanceled, false);               
            xhr.open("POST", "http://10.0.0.200:9001/Home/Upload");//修改为自己服务器接口地址   
            //xhr.setRequestHeader("Access-Control-Allow-Origin", "*");//需要在IIS里面配置,就可以跨域请求了   
            //xhr.setRequestHeader("Content-Type", "multipart/form-data");