我们在进行一些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的id
function(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 java.net.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 org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.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);
}
}
第一次写博客,写的不太好请大家多多指教。