上传文件小实例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上傳文件TEST</title>
<style>
.demo{ width:50%; margin:120px auto;}
</style>
</head><body>
<div class="demo"><!--添加滾動條標簽，html5新增--><progress max="100" value="0"></progress><!--表示類型為文件上傳，multiple(html5新增加)表示多個文件，默認單個--><input type="file" class="tempFile" multiple="multiple"/> <button onClick="ajaxSubmit()">提交</button>
</div><script>function ajaxSubmit(){var files =document.querySelector('.tempFile').files;//因為不確定有多少個文件，所以我們使用循環遍歷的方式將文件都傳遞給FormDatavar formdata =new FormData();for(var i=0;i<files.length;i++){var file = files[i];formdata.append('myflie'+i,file);}//發送ajax請求var xhr =new XMLHttpRequest();xhr.onreadystatechange = function(){if(xhr.readyState==4){if(xhr.status==200){console.log(xhr.responseText);}}}//獲得進度條var progressBar = document.querySelector("progress");//上傳回調的進度回調，上傳進度只有有變化，本函數就會自動執行
xhr.upload.onprogress =function(eve){//eve.lengthComputable//表示文件是否已經上傳100%，默認是true,表示沒有100%//上傳100%后變成falseif(eve.lengthComputable){//eve.loaded 表示已經上傳的//eve.total 表示總數
progressBar.value =(eve.loaded/eve.total)*100;
}}//準備發送
xhr.open('post','receive.php',true);xhr.send(formdata);}</script>
</body>
</html>
?
轉載于:https://www.cnblogs.com/royal6/p/10301001.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
- 上一篇： web项目_学生证管理系统
- 下一篇： JVM(一) ---JVM的数据模型