下面看下ajax實現文件上傳
沒有使用插件
一、單文件上傳
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <title></title> </head> <body> <form id="uploadForm" enctype="multipart/form-data"> 文件:<input id="file" type="file" name="file"/> </form> <button id="upload">上傳文件</button> </body> <script type="text/javascript"> $(function () { $("#upload").click(function () { var formData = new FormData($('#uploadForm')[0]); $.ajax({ type: 'post', url: "http://192.168.1.101:8080/springbootdemo/file/upload", data: formData, cache: false, processData: false, contentType: false, }).success(function (data) { alert(data); }).error(function () { alert("上傳失敗"); }); }); }); </script> </html> 二、多文件上傳
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <title></title> </head> <body> <form id="uploadForm" enctype="multipart/form-data"> 文件:<input type="file" name="file" multiple="multiple"/><br> </form> <button id="upload">上傳文件</button> </body> <script type="text/javascript"> $(function () { $("#upload").click(function () { var formData = new FormData($('#uploadForm')[0]); $.ajax({ type: 'post', url: "http://192.168.1.101:8080/springbootdemo/file/uploadFiles", data: formData, cache: false, processData: false, contentType: false, }).success(function (data) { alert(data); }).error(function () { alert("上傳失敗"); }); }); }); </script> </html> 這個是多選上傳，關鍵是multiple="multiple"這個屬性，另外使用的接口也是多文件上傳的接口。
當然也可以使用單文件上傳的模式，多次選擇就可以了，只不過接口也是iyaoshiyong多文件上傳的接口。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <title></title> </head> <body> <form id="uploadForm" enctype="multipart/form-data"> 文件:<input type="file" name="file"/><br> 文件:<input type="file" name="file"/><br> 文件:<input type="file" name="file"/><br> </form> <button id="upload">上傳文件</button> </body> <script type="text/javascript"> $(function () { $("#upload").click(function () { var formData = new FormData($('#uploadForm')[0]); $.ajax({ type: 'post', url: "http://192.168.1.101:8080/springbootdemo/file/uploadFiles", data: formData, cache: false, processData: false, contentType: false, }).success(function (data) { alert(data); }).error(function () { alert("上傳失敗"); }); }); }); </script> </html>
新聞熱點
疑難解答
圖片精選
