Ajax+formData异步文件上传

前端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());

}

}

时间: 2024-09-30 11:10:18

Ajax+formData异步文件上传的相关文章

异步文件上传组件 Uploader

Uploader是非常强大的异步文件上传组件,支持ajax.iframe.flash三套方案,实现浏览器的全兼容,调用非常简单,内置多套主题支持 和常用插件,比如验证.图片预览.进度条等,广泛应用于淘宝网,比如退款系统.爱逛街.二手.拍卖.我的淘宝.卖家中心.导购中心等. Uploader的特性 支持ajax.flash.iframe三种方案,兼容所有浏览器.(iframe不推荐使用) 多主题支持,可以自己定制主题 丰富的插件支持 支持多选批量上传 支持上传进度显示 支持取消上传 支持图片预览(

关于异步文件上传和文件表单元素的复制、设置和清除

一.解决文件异步上传的方法有3种:1.使用iframe 2.使用FormData(html5新功能)  3.使用flash 1.使用iframe 原来我以为使用iframe是把整个表单复制到iframe里面,然后把iframe里面的表单提交给服务器,这样来实现表单的异步上传.最后我想错了,实现原理比我想的要简单的多.先看一下代码: 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <

JQUERY插件JqueryAjaxFileUplaoder----更简单的异步文件上传

异步上传相信大家都做过类似的功能,JqueryAjaxFileUploader为我们提供了更简单的实现和使用方式.不过既然是JQUERY的插件那么它所依赖的环境大家都懂得.JqueryAjaxFileUploader并不华丽,也没有提供美化文件上传控件的css,它并不像jQuery File Upload(喜欢的同学可以去尝试下),提供了美观的样式和专门的图片预览.多任务上传等等, JqueryAjaxFileUploader 所拥有的很简单,只是异步上传文件的功能,当然这并不排除由你亲自为它披

spring mvc利用MultipartResolver解析Multipart/form-data进行文件上传

之前的表单数据都是文本数据,现记录:利用MultipartResolver进行文件上传. ①首先,需引入commons-fileUpload和commons-io jar包,pom.xml文件的坐标: <properties>      <spring.version>3.2.1.RELEASE</spring.version>  </properties>  <dependencies>          <dependency> 

【分享】兼容ie6-9和现代浏览器以及ios,android,pad等触屏设备的异步文件上传插件

核心代码 /** * 该插件用于兼容ie6-7-8-9及现代浏览器的异步上传文件. * 请注意,在ie6-7-8-9上面的原理是: * 新添加一个表单和一个iframe,然后每次选择都将file输入框复制到该表单上面,然后submit整个表单,这样就可以实现类似ajax提交文件的效果, * 但是有一点是没办法处理的,就是在客户端预览图片及判断文件大小.现代浏览器则可以. */ var AjaxFileInput=function(opts){ var settings={ container:"

使用Anthem.NET 1.5中的FileUpload控件实现Ajax方式的文件上传

Anthem.NET刚刚发布了其最新的1.5版本,其中很不错的一个新功能就是对文件上传功能的Ajax实现.本文将简要介绍一下该功能的使用方法. Anthem.NET的下载与安装 Anthem.NET可以在此下载:http://sourceforge.net/project/showfiles.php?group_id=151897&package_id=168043&release_id=493609 下载之后解压缩至硬盘中的某一目录中,编译项目得到Anthem.dll.然后将其拷贝到We

一个异步文件上传的方式

不是我写的,我看了他的,思路很明确: 实现思路: 在js脚本中动态创建form,动态创建form中的内容,将文件上传的内容以隐藏域的方式提交过去,然后写好回调等. 感觉思路不难,但是我写不出来,感觉需要对于url,http有一定了解,js也ok才可. 代码: 上传的js: // JavaScript Document jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId = 'jUpl

HTML5 FormData实现文件上传

表单提交,文件上传是一个常用又十分麻烦的功能,以前要上传文件通常都是借助插件或者flash来实现,噼里啪啦的加载一大堆东西.自从有了HTML5的FormData后,老板再也不用担心我的上传了. FormData可以把它理解成一个虚拟的表单对象,它只有一个方法append,这个可以在浏览器console一下就知道了.我们可以通过append向FormData里面添加各种需要提交的数据. 你可以先创建一个空的 FormData 对象,然后使用 append() 方法向该对象里添加字段,如下:var

python爬虫:Multipart/form-data POST文件上传详解

简单的HTTP POST 大家通过HTTP向服务器发送POST请求提交数据,都是通过form表单提交的,代码如下: <form method="post"action="http://w.sohu.com" > <inputtype="text" name="txt1"> <inputtype="text" name="txt2"> </form