html5里使用ajax提交含有上传文件的form表单

来源：互联网发布：matlab数学建模算法编辑：程序博客网时间：2024/05/16 07:43

这里会用到html5里的formdata类。

需要添加的js.css：

触发按钮：

<div class="col-sm-12 padding_bottom_20 padding_top_20">
<a href="javascript:void(0)" id="updatefileButton" style="cursor:pointer " class="text_red">如果上述上传附件不能正常使用，可点击此处上传</a><br />
<div style="float:left;display:inline;" id="tip1"></div>
</div>

后端处理代码：

package servlet;
import java.io.File;
import java.io.IOException;
import java.sql.Timestamp;
import java.util.Date;
import java.util.Iterator;
import java.util.List;
import java.util.Properties;
import java.util.UUID;

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.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.springframework.web.context.WebApplicationContext;

import cn.nsl.domain.glob.ReportInfo;
import cn.nsl.web.Application;
import cn.nsl.web.util.WebUtils;

import com.jbetter.spring.orm.ICommonDao;

public class UploadServlet extends HttpServlet {
private static String CX="kjcxwt";
private static String YW="ywjswt";

/**
* Destruction of the servlet. <br>
*/
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}

private String imgSuffix="*.jpg;*.jpeg;*.png;*.gif;*.bmp;*.JPG;*.JPEG;*.PNG;*.GIF;*.BMP;";
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
boolean success=true;

Properties p=WebUtils.getProperties("/system.properties");
String savePath =p.getProperty("savePath");//this.getServletConfig().getServletContext().getRealPath("");
String urlPath=p.getProperty("urlPath");
String uploadType=request.getParameter("uploadType");
String attid=request.getParameter("attid");

String filename="";
savePath+=attid+"/";

File f1 = new File(savePath);
if (!f1.exists()) {
f1.mkdirs();
}
if (!f1.getParentFile().exists()) {
f1.getParentFile().mkdirs();
}

DiskFileItemFactory fac = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(fac);
upload.setHeaderEncoding("utf-8");
List<FileItem> fileList = null;
try {
fileList = upload.parseRequest(request);
} catch (FileUploadException ex) {
return;
}
Iterator<FileItem> it = fileList.iterator();
String name = "",originalName="";
String extName = "";
while (it.hasNext()) {
FileItem item = it.next();
if (item.isFormField()){
if(item.getFieldName().equals("attid")){ //获得表单信息中的非文件的属性值
System.out.println("上传信息中获得的attid:"+item.getString());
attid = item.getString();
}
if (item.getFieldName().equals("uploadType")){
System.out.println("上传信息中获得的uploadType:"+item.getString());
uploadType = item.getString();
}
}else{
name = item.getName();
originalName=name.substring(0,name.lastIndexOf("."));
long size = item.getSize();
String type = item.getContentType();
if (name == null || name.trim().equals("")) {
continue;
}
//扩展名格式：
if (name.lastIndexOf(".") >= 0) {
extName = name.substring(name.lastIndexOf("."));
}
File file = null;
do {
//生成文件名：
name = UUID.randomUUID().toString();
filename=name+extName;//访问url
file = new File(savePath + name + extName);
} while (file.exists());
File saveFile = new File(savePath + name + extName);
try {
item.write(saveFile);
} catch (Exception e) {
e.printStackTrace();
}

}
}

urlPath+=attid+"/"+filename;

WebApplicationContext webctx=Application.WebApp_CONTEXT;
ICommonDao dao=(ICommonDao) webctx.getBean("commonDAOProxy");
ReportInfo rinfo = new ReportInfo();
rinfo.setAttach_title(originalName);
rinfo.setAttach_filename(filename);
rinfo.setAttach_url(savePath+filename);
rinfo.setLocalurl(urlPath);
rinfo.setAttach_uploadtime(new Timestamp(new Date().getTime()));
rinfo.setAttid(attid);
if(WebUtils.isNotNull(request.getParameter("uploadDescribe"))){
rinfo.setDescribes(request.getParameter("uploadDescribe"));
}

if("5".equals(uploadType)){
rinfo.setAttach_type(YW);
}else if("6".equals(uploadType)){
rinfo.setAttach_type(YW);
}else{
rinfo.setAttach_type(CX);
}
rinfo.setFileType(Integer.valueOf(uploadType));

dao.save(rinfo);


String html = "{\"flag\":\"" + String.valueOf(success)
+ "\",\"message\":\"" + "已操作成功" + "\",\"url\":\""
+ urlPath + "\",\"id\":\""
+ rinfo.getId()+"\"}";

response.setCharacterEncoding("UTF-8");
response.getWriter().write(html);
}

/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

doGet(request, response);
}

/**
* Initialization of the servlet. <br>
*
* @throws ServletException if an error occurs
*/
public void init() throws ServletException {
// Put your code here
}
}

web.xml的配置：

需要在web.xml里配置servlet参数

<servlet>
<description>FileServlet</description>
<display-name>FileServlet</display-name>
<servlet-name>FileServlet</servlet-name>
<servlet-class>servlet.UploadServlet</servlet-class>/***后台处理程序***/
</servlet>
<servlet-mapping>
<servlet-name>FileServlet</servlet-name>
<url-pattern>/fileserver/upload</url-pattern>/***前台url使用的路径***/
</servlet-mapping>

阅读全文

0 0