我们在进行一些web开发时，有时会需要上传文件，图片等等的功能。这篇文章记录一下我实现用ajax实现无刷新上传图片的方法。
我们先要了解一下ajax，在前后端分离的开发环境中ajax被广泛的用原来前后端的数据交互，但是ajax有一个弊端就是只能传输json格式的文件，所以我们用ajax来实现文件上传时会无法把文件信息完整的传给后台，所以为了实现无刷新上传，需要一个js的插件，他提供了关于ajax form上传的很多方法。这就是jquery.form.js。
下面就是关键实现代码。
html
<script type="text/javascript" src="js/jquery.form.js"></script>//引入jquery.form.js//ajxa<script type="text/javascript">function fileupload() {$("#fileform").ajaxSubmit( //fileform为Form的idfunction(data) {//data后台返回的数据$("#upload-img").attr("src","http://127.0.0.1:8080/qrcode/upload/"+ data);}});</script>//表单<div ><img border="0" id="upload-img" src="images/default_head_image.png"alt="" width="90" height="90"></img><form action="ImgUpload" method="post" enctype="multipart/form-data"id="fileform"><div class="upload pointer" id="upload-btn"><div class="uploadClick">上传</div><input type="file" id="file" class="uploadfile" name="fileName"onchange="fileupload()" style="margin-left: -39.5px;" /></div></form></div>
java后台
import java.io.BufferedReader;import java.io.File;import java.io.IOException;import java.io.InputStream;import java.io.InputStreamReader;import .URLDecoder;import java.util.List;import java.util.UUID;import javax.servlet.ServletContext;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import mons.fileupload.FileItem;import mons.fileupload.disk.DiskFileItemFactory;import mons.fileupload.servlet.ServletFileUpload;public class ImgUpload extends HttpServlet {protected void service(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {req.setCharacterEncoding("utf-8");resp.setContentType("text/html;charset=utf-8");DiskFileItemFactory factory = new DiskFileItemFactory();ServletFileUpload sfu = new ServletFileUpload(factory);sfu.setFileSizeMax(1024 * 1080);String fileName = "";String path = "";try {List<FileItem> items = sfu.parseRequest(req);System.out.println(items.size());for (int i = 0; i < items.size(); i++) {FileItem item = items.get(i);if (!item.isFormField()) {ServletContext sctx = getServletContext();path = sctx.getRealPath("/upload");System.out.println(path);fileName = UUID.randomUUID() + ".png";;System.out.println(fileName);fileName = fileName.substring(fileName.lastIndexOf("/") + 1);File file = new File(path + "\\" + fileName);if (!file.exists()) {item.write(file);}}}} catch (Exception e) {e.printStackTrace();}resp.getWriter().print(fileName);}}
第一次写博客，写的不太好请大家多多指教。
