jquery+ajax+servlet实现无刷新图片上传

来源：互联网发布：gcp网络培训编辑：程序博客网时间：2024/04/29 09:46

纠结了我至少有5天的一个小问题，最后还是没有办法依靠ajax的原汁代码来实现，只有借助工具，下面是一个切实可行，简单易懂的例子。

需要借助ajaxfileupload.js来实现ajax图片上传功能。
html部分：
<body>
<input id="img" type="file" name="img">//id和name属性必须都有且同名。。。
<input type="button" onclick="ajaxFileUpload()" value="upload"/>
<span id="filespan"></span>
</body>
js部分：
<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
<script type="text/javascript" src="js/ajaxfileupload.js"></script>
<script type="text/javascript">
function ajaxFileUpload()
{
$.ajaxFileUpload
(
{
url:'upload', //你处理上传文件的服务端
secureuri:false,
fileElementId:'img',//name和id的名字
dataType: 'text',//返回值类型，可以是个简单的text
success: function (data){
$('#filespan').text(data);
}
});
}
</script>
服务器端代码：
package web;

import java.io.*;
import java.util.List;

import javax.servlet.*;
import javax.servlet.http.*;
//使用fileupload组件
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

public class Upload extends HttpServlet {

public void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
// step1,创建DiskFileItemFactory对象
DiskFileItemFactory dfif = new DiskFileItemFactory();
// step2,创建一个解析器
ServletFileUpload sfu = new ServletFileUpload(dfif);
// step3,解析,解析器会分析InputStream，然后将解析的结果封装到相应的FileItem
// 对象里面（一个表单域对应于一个FileItem）
try {
// 只需要调用FileItem对象的方法就可以获得表单中的数据
List<FileItem> items = sfu.parseRequest(request);
for (int i = 0; i < items.size(); i++) {
FileItem item = items.get(i);
ServletContext sctx = getServletContext();
String path = sctx.getRealPath("upload");
String fileName = item.getName();
File file = new File(path + File.separator + "pic"
+ File.separator + fileName);
item.write(file);
}
// json对象
// out.println("{'file_info':'上传成功'}");
//text返回值
out.println("上传成功");
} catch (Exception e) {
System.out.println("upload出问题了");
e.printStackTrace();
}

out.close();
}

}

0 0