javaWeb上传图片
上传文件所必要的两个jar包:commons-fileupload.jar、commons-io.jar。
jar包下载:github路径
核心代码:
1 String withPath = req.getServletContext().getRealPath("/");//获取网站的URI根路径(网站资源路径,存内容到这里可以通过浏览器访问) 2 String webPath = req.getContextPath();//获取网站的URL根路径(访问网站跟路径) 3 DiskFileItemFactory factory = new DiskFileItemFactory(); 4 factory.setSizeThreshold(2048 * 500); 5 File file = new File(withPath + "\\temp");// 临时存储文件位置 6 String path = withPath + "\\upload";// 文件保存位置 7 factory.setRepository(file); 8 ServletFileUpload upload = new ServletFileUpload(factory); 9 upload.setSizeMax(1024 * 1024);// 最大的文件文1M(1024KB) 10 List<FileItem> items = upload.parseRequest(req); 11 for (FileItem item : items) { 12 // 如果只上传一个文件那么可以不用循环 13 System.out.println("for---"); 14 if (item.isFormField()) { 15 // 上传的不是文件域 16 jo.put("status", "error"); 17 jo.put("msg", "上传图片失败"); 18 System.out.println( 19 item.getFieldName() + ":" + item.getString()); 20 } 21 else { 22 String fileName = item.getName();// 文件名(包括扩展名) 23 System.out.println("文件名为:" + fileName); 24 jo.put("status", "true"); 25 InputStream in = item.getInputStream(); 26 byte[] buffer = new byte[1024]; 27 int len = 0; 28 String allFileName = path + "\\" + fileName; 29 OutputStream os = new FileOutputStream(allFileName); 30 while ((len = in.read(buffer)) != -1) { 31 os.write(buffer, 0, len); 32 } 33 os.close(); 34 in.close(); 35 jo.put("status", "true"); 36 jo.put("msg", "上传图片成功"); 37 jo.put("imgUrl", webPath + "/upload/" + fileName); 38 } 39 }
2.html
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>上传文件</title> <script type="text/javascript" src="<%=path%>/static/lib/myUtils.js"></script> <script type="text/javascript" src="<%=path%>/static/js/jquery-1.11.1.js"></script> </head> <body> <input type="file"/> <div class="msg"></div> <script type="text/javascript"> $(document).ready(function(){ var img_formats = "jpeg,jpg,bmp,png,gif,ico,tiff,pcx,tga,exif,fpx,svg,psd,cdr,pcd,dxf,ufo,eps,ai,raw,wmf"; var file = $("input[type='file']"); file.change(function(){ var files=this.files; var formData=new FormData(); formData.append('files',files[0]); var img_format = myUtils.file_format(files[0].name); console.log(files[0].name); if(img_format.length > 0){ if(img_formats.indexOf(img_format) >= 0){ var img = myUtils.getFileUrl(files[0]); $.ajax({ url: "<%=path%>/uploadServlet", type: "POST", data: formData, dataType:"json", /** *必须false才会自动加上正确的Content-Type */ contentType: false, /** * 必须false才会避开jQuery对 formdata 的默认处理 * XMLHttpRequest会对 formdata 进行正确的处理 */ processData: false, success: function (data) { console.log(data); if (data.status == "true") { alert(data.msg); $(".msg").html("<img src='"+data.imgUrl+"'/>"); } if (data.status == "error") { alert(data.msg); } $("#imgWait").hide(); }, error: function () { alert("上传失败!"); $("#imgWait").hide(); } }); }else{ $(".msg").text("请上传图片文件");//不是图片文件 } }else{ $(".msg").text("上传的不是一个有效的文件");//文件没有后缀名 } }); }); </script> </body> </html>
注意:上传图片的位置要放在->网站资源路径;而不是本地的资源路径,否则上传之后无法在浏览器中预览图片切记!!!
本人小白,各位大神有好的建议多多提点,一起学习共同进步