純js實現最簡單的文件上傳(後臺使用MultipartFile)
阿新 • • 發佈：2017-09-14
post post方式 cnblogs set ner progress round pre max
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>XMLHttpRequest上傳文件</title> <script type="text/javascript"> var xhr; //上傳文件方法 function UpladFile() { var fileObj = document.getElementById("file").files[0]; // js 獲取文件對象var url = "http://127.0.0.1:8080/api/attachment/upload"; // 接收上傳文件的後臺地址 var form = new FormData(); // FormData 對象 form.append("file", fileObj); // 文件對象 xhr = new XMLHttpRequest(); // XMLHttpRequest 對象 xhr.open("post", url, true);//post方式，url為服務器請求地址，true 該參數規定請求是否異步處理。 xhr.onload = uploadComplete; //請求完成 xhr.onerror = uploadFailed; //請求失敗 xhr.send(form); //開始上傳，發送form數據 } //上傳成功響應 function uploadComplete(evt) { //服務斷接收完文件返回的結果 var data = JSON.parse(evt.target.responseText);if(data.success) { alert("上傳成功！"); }else{ alert("上傳失敗！"); } } //上傳失敗 function uploadFailed(evt) { alert("上傳失敗！"); } //取消上傳 function cancleUploadFile(){ xhr.abort(); } </script> </head> <body> <progress id="progressBar" value="0" max="100" style="width: 300px;"></progress> <span id="percentage"></span><span id="time"></span> <br /><br /> <input type="file" id="file" name="myfile" /> <input type="button" onclick="UpladFile()" value="上傳" /> <!--<input type="button" onclick="cancleUploadFile()" value="取消" />--> </body> </html>
純js實現最簡單的文件上傳(後臺使用MultipartFile)