<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS文件上傳</title> <script type="text/javascript" src="../js/jQuery.js"></script> <style type="text/css"> * { margin: 0; padding: 0; } #img { display: block; width: 9.98rem; height: 6rem; border: .01rem solid black; } #file { display: block; margin: -6rem 0 0 0; opacity: 0; width: 10rem; height: 6rem; } #submit { display: block; width: 5rem; height: 2rem; margin: .5rem 2.5rem; font-size: .45rem; text-align: center; line-height: 2rem; } </style> </head> <body> <img id="img" src="" /> <input id="file" type="file" /> <input id="submit" type="button" value="提交文件" /> </body> </html> <script type="text/javascript"> // rem布局 $('html').css('font-size', $(window).width() / 10); // 實例化formData對象 var formData = new FormData(); // 當選取文件時 $('#file').on("change", function() { var fileList = $("#file")[0].files; var src = URL.createObjectURL(fileList[0]); $('#img').attr('src', src); formData.append("file", fileList[0]); }); // 點擊提交上傳時 $("#submit").on('click', function(){ /** * http 請求對象 XMLHttpRequest * XMLHttpRequest.open(請求方式, 請求地址, 是否異步 ) * XMLHttpRequest.onload: 請求響應時調用的方法 * e.target.responseText: 服務器響應的文本內容 */ var httpRequest = new XMLHttpRequest(); httpRequest.open("POST", "http://192.168.0.105/WebTest/FileUploadServlet", true); httpRequest.onload = function(e){ console.log(e.target.responseText); } httpRequest.send(formData); }); </script>
