利用jquery的ajax实现文件上传
生活随笔
收集整理的這篇文章主要介紹了
利用jquery的ajax实现文件上传
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
我們先編寫頁面并導入jquery的包
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-1.8.3.min.js"></script> </head> <body> <input type="file" name="file"><br> <input type="button" value="上傳"><br> </body> </html>然后為它添加相應的ajax代碼，對于jquery如何使用我就不再講解，大家可以去以下網址進行學習：jQuery 教程 | 菜鳥教程 (runoob.com)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-1.8.3.min.js"></script> </head> <body> <input type="file" name="file"><br> <input type="button" value="上傳"><br> </body> </html> <script>$(":button").click(function () {var datas = new FormData();datas.append("file",$(":file").get(0).files[0]);$.ajax({url:"ser01",type:"post",dataType:"json",processData: false,contentType:false,data:datas,success:function (data) {console.log(data)}})}) </script>接下我們編寫后端代碼：
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {DiskFileItemFactory diskFileItemFactory = new DiskFileItemFactory();ServletFileUpload upload = new ServletFileUpload(diskFileItemFactory);try {List<FileItem> fileItems = upload.parseRequest(req);for (FileItem fileItem : fileItems) {if (fileItem.isFormField()){// 是普通表單元素System.out.println("普通表單元素"+fileItem.getName()+"="+fileItem.getString());}else{// 是文件System.out.println("文件："+fileItem.getName()+" 文件流inputStream："+fileItem.getInputStream());int len;byte buffer[] = new byte[1024*10];BufferedInputStream bis = new BufferedInputStream(fileItem.getInputStream());BufferedOutputStream bos = new BufferedOutputStream(new FileOutputStream("E:/"+fileItem.getName()));while ((len=bis.read(buffer))!=-1){bos.write(buffer,0,len);}bos.flush();bis.close();bos.flush();}}Map<String,Object> result = new LinkedHashMap<>();result.put("code","200");result.put("msg","上傳成功");result.put("data","");resp.setContentType("text/html;charset=utf-8");resp.getWriter().write(JSONObject.toJSONString(result));} catch (FileUploadException e) {e.printStackTrace();}}在我們進行調用后，上傳的文件確實在后臺服務器中被接收到了，而且也成功的被寫入到了E盤中
?
?
?
總結
以上是生活随笔為你收集整理的利用jquery的ajax实现文件上传的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 20N20-ASEMI低功耗场效应管20
- 下一篇： 写入grib2++java_科学网—Mi