ajax上传文件表单,图片、文件无刷新上传,jquery.form.js的使用

我们在进行一些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);
	}

	
	
}

第一次写博客,写的不太好请大家多多指教。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值