首页 > Web开发 > 详细

Ajax+formData异步文件上传

时间:2017-07-09 20:35:44      阅读:200      评论:0      收藏:0      [点我收藏+]

前端jsp:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    

    <title>ajax文件上传</title>

<script type="text/javascript" src="js/jquery-2.1.1.js"></script>

   <script type="text/javascript">

  function add(){

   var formdata=new FormData($("#frm")[0]);

   $.ajax({

   type:‘post‘,

   url:‘ajaxupload.do‘,

   data:formdata,

   dataType:‘json‘,

   contentType:false,

   processData:false,

   success:function(data){

   var result=data.result;

   if(result==‘1‘){

   alert(‘提交成功!‘);

   }else{

   alert(‘提交失败!‘);

   }

   },

   error:function(){

   alert(‘未知错误!‘);

   }

   });

   }

   </script>

  </head>

  

  <body>

   <form method="post" id="frm">

   <table>

   <tr><td>标题:</td><td><input type="text" name="title" /></td></tr>

   <tr><td>内容:</td><td><input type="text" name="content" /></td></tr>

   <tr><td>附件一:</td><td><input type="file" name="ff" /></td></tr>

   <tr><td>附件二:</td><td><input type="file" name="ff2" /></td></tr>

   <tr><td colspan="2"><input type="button" onclick="add()" value="提交"></td></tr>

   </table> 

   </form>

  </body>

</html>

 

 

后端servlet java代码:

package servlet;

 

import java.io.File;

import java.io.IOException;

import java.io.PrintWriter;

import java.util.List;

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.disk.DiskFileItemFactory;

import org.apache.commons.fileupload.servlet.ServletFileUpload;

import org.json.JSONObject;

 

public class AjaxUploadServlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

this.doPost(request, response);

}

 

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

response.setContentType("text/html");

PrintWriter out = response.getWriter();

DiskFileItemFactory factory=new DiskFileItemFactory();

ServletFileUpload upload=new ServletFileUpload(factory);

JSONObject js=new JSONObject();

String title="";

String content="";

try {

List<FileItem> items=upload.parseRequest(request);

for(FileItem item:items){

if(item.isFormField()){

//只能通过此形式获取普通表单域的值,上传文件,表单form的enctype="multipart/form-data",是以二进制数据流提交数据的。所以没法用request.getParameter("name")来获取提交到后台的普通表单域值。

if("title".equals(item.getFieldName())){

title=item.getString("UTF-8");

}else if("content".equals(item.getFieldName())){

content=item.getString("UTF-8");

}

}else{

String fileName=item.getName();

System.out.println("上传的文件为:"+fileName);

String path=request.getRealPath("/upload");

File f=new File(path+"/"+UUID.randomUUID()+"-"+fileName);

item.write(f);

js.put("result", "1");

}

}

System.out.println("title:"+title+",content:"+content);

} catch (Exception e) {

e.printStackTrace();

}

out.write(js.toString());

}

 

}

 

Ajax+formData异步文件上传

原文:http://www.cnblogs.com/sherry11/p/7142627.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!