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的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="data: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);}}

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

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

Android之解决PC端上传http表单格式文件手机解析文件名乱码问题和PC浏览器下载文件的文件名显示乱码问题
1 问题问题1. 手机写socket作为服务器,PC浏览器上传http表单格式文件,然后手机端解析携带中文的文件名我解析是乱码. 问题2. 手机写了socket作为服务器,PC浏览器下载文件,但是浏 ...
html中只能上传文件word,HTML文件表单，接受Word文档(HTML file form, accept Word documents)...
HTML文件表单,接受Word文档(HTML file form, accept Word documents) 我在这里遇到了一个奇怪的问题. (不管怎样,或者我只是忽略了一些非常简单的东西.) 我 ...
ajax提交form表单到数据库(无刷新)
在静态页面提交表单到数据库很简单就是单纯的 <form action="test.php" method="post"> </form> ...
php页面上必须有表单,php – 在同一页面上显示提交的表单响应. (没有重装)
这是使用 suggested example from the JQuery site和 pajaja's答案的工作示例. 解: 将其放在< head>中.你的网页. < scrip ...
php 无刷新上传,php 无刷新上传文件的代码
php 无刷新上传文件. 有兴趣的朋友,可以参考下:php iframe无刷新上传文件的实现代码 . 1.上传页面复制代码代码示例: 无刷新上传文件 function startUpload() ...
利用jquery.form.js实现Ajax无刷新图片上传及预览功能
某些时候当我们做登记页面的时候可能需要上传图片,并实现即时预览的功能. 如果只是预览而不上传,可以使用ImagePreview来实现,方便简单.如果需要上传,那么你也可以使用uploadify无刷新上 ...
ASP.NET工作笔记之一：图片上传预览及无刷新上传
转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...
ajax 表单提交传文件,Ajax提交Form表单及文件上传
刚刚申请下来的博客,写得第一篇.有点小激动,本人以前是一名工业3D设计师突然有些变故做上了JavaWeb开发: 前几天,发现了一些小问题.我在写后台管理页面时,需要上传一张图片.于是我就用很普通的Fo ...
AJAX 提交表单以及文件上传
本文转自:https://www.cnblogs.com/zhuxiaojie/p/4783939.html#autoid-0-0-0 作者:朱小杰前言使用ajax请求数据,很多人都会,比如说: ...

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

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

最新文章

热门文章