html5 file upload and form data by ajax
最近接了一个小活，在短时间内实现一个活动报名页面，其中遇到了文件上传。
我预期的效果是一次ajax post请求，然后在后台java restlet的下面一次解决文件上传和form表单的处理。一次搞定问题。当然这是我的预期，真正实现起来还是不太顺利。
在网上很有很多文件上传的例子（尝试了uploadify，ajaxfileupload），可是很遗憾，在我这里好像都没有成功！
苦于自己的javascript水平太菜，也没有带多的精力来弄，
然后在google的帮助下 在这里，这里，这里的指引下，终于可以实现我要的效果.
ajax post => form + file (formdata) => restlet后台处理
下面具体说说代码部分。
html部分：
<html>
<header>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
</header>
<body>
<h1>*****Upload File with RESTFul WebService*****</h1>
<form id = "myform" >
<fieldset>
<legend>Upload File</legend>
<input type="file" id ="fileToUpload" name="fileToUpload"/><br />
<br /><br />
Party ID<input type="text" id = "partyid" name="partyid" /><br />
<a id="submit" href="javascript:void(0);" >提交</a>
</fieldset>
</form>
<script type="text/javascript">
$("#submit").click( function(){
var partyid = $("#partyid").val();
var fileToUpload = $("#fileToUpload").val();
var options = {
'event': 'xxxx2015',
'info': {
'partyid': partyid,
'fileToUpload': fileToUpload,
}
};
//file upload
console.log($("#myform").serialize())
console.log(fileToUpload)
console.log(partyid)
var formData = new FormData();
formData.append( 'fileToUpload', $( '#fileToUpload' )[0].files[0] );
formData.append( 'partyid', partyid);
$.ajax({
url: '../restful/v1.0/api/app/enroll/upload?token=JA1mqLiXDgcZ0ijJhE9R',
type: "POST",
contentType: false,
cache: false,
processData: false,
data: formData,
dataType: "json",
success: function (res) {
if (res.status) {
alert('注册成功！电子票已发送到你的手机/邮箱');
console.log(res);
} else {
switch (res.message) {
case 'hasApplied':
$('#user_info').text('');
alert('您已报名过此次大会，无需重复报名');
break;
default :
console.log(res.message);
alert('啊哦~图片提交失败，请重启提交');
break;
}
}
}, error: function (res) {
alert('啊哦~图片提交失败，请重启提交');
}
});
});
</script>
</body>
最主要是是ajax中这三行：
contentType: false,
cache: false,
processData: false,
后台代码部分 springmvc + restlet：
public class EnrollFileUploadResource extends ServerResourceBase{
private static Logger logger = Logger.getLogger(EnrollFileUploadResource.class.getName());
private EnrollRegisterService enrollRegisterService;
String parameter="";
@Override
protected void doInit() throws ResourceException {
logger.info("开始执行");
super.doInit();
}
@Post
public Representation createTransaction(Representation entity) {
Representation rep = null;
JSONObject json=new JSONObject();
if (entity != null) {
if (MediaType.MULTIPART_FORM_DATA.equals(entity.getMediaType(), true)) {
// 1/ Create a factory for disk-based file items
DiskFileItemFactory factory = new DiskFileItemFactory();
factory.setSizeThreshold(1000240);
// 2/ Create a new file upload handler
RestletFileUpload upload = new RestletFileUpload(factory);
List<FileItem> items;
try {
Request req = getRequest();
// 3/ Request is parsed by the handler which generates a list of FileItems
items = upload.parseRequest(req);
Map<String, String> props = new HashMap<String, String>();
File file = null;
String filename = null;
for (final Iterator<FileItem> it = items.iterator(); it.hasNext(); ) {
FileItem fi = it.next();
String name = fi.getName();
if (name == null) {
props.put(fi.getFieldName(), new String(fi.get(), "UTF-8"));
} else {
try {
String tempDir = getClass().getClassLoader().getResource("").getPath();
tempDir = tempDir.substring(0,tempDir.lastIndexOf("WEB-INF"));
String osName = System.getProperty("os.name");
if(osName.toLowerCase().indexOf("windows")>-1){
tempDir = tempDir.substring(1, tempDir.length());
}
String uploadingPath = tempDir + "static" + File.separatorChar +"uploading";
File f = new File(uploadingPath);
if (!f.exists()) {
f.mkdirs();
}
String time = new SimpleDateFormat("yyyyMMddHHmmss").format(new Date());
String str=name.substring(name.lastIndexOf("."));
filename = time + RandomUtil.getStringCode(8)+str;
file = new File(uploadingPath+ File.separator+ filename);
fi.getInputStream();
fi.write(file);
props.put("image", filename);
} catch (Exception e) {
e.printStackTrace();
json.put("status", false);
json.put("message","fileUploadFail"); // 已经报过名了
}
}
}
// [...] my processing code
EnrollUser user =new EnrollUser();
user.setEvent(props.get("event"));
user.setUserName(props.get("userName"));
user.setMobile(props.get("mobile"));
。。。
user.setImage(props.get("image"));
user.setCreate_time(TimeUtil.getNowTimeByPattern(TimeUtil.DATE_DEFAULT_PATTERN));
if(enrollRegisterService.hasEnrolled(user))
{
json.put("status",false);
json.put("message","hasApplied"); // 已经报过名了
}
else
{
enrollRegisterService.saveOrUpdateData(user);
json.put("status",true);
json.put("info","成功");
}
} catch (Exception e) {
// The message of all thrown exception is sent back to
// client as simple plain text
getResponse().setStatus(Status.CLIENT_ERROR_BAD_REQUEST);
e.printStackTrace();
rep = new StringRepresentation(e.getMessage(), MediaType.TEXT_PLAIN);
}
} else {
// other format != multipart form data
getResponse().setStatus(Status.CLIENT_ERROR_BAD_REQUEST);
rep = new StringRepresentation("Multipart/form-data required", MediaType.TEXT_PLAIN);
}
} else {
// POST request with no entity.
getResponse().setStatus(Status.CLIENT_ERROR_BAD_REQUEST);
rep = new StringRepresentation("Error", MediaType.TEXT_PLAIN);
}
json.put("status",true);
return new StringRepresentation(json.toString());
}
public void setEnrollRegisterService(EnrollRegisterService enrollRegisterService) {
this.enrollRegisterService = enrollRegisterService;
}
}
完毕。
至于配置springmvc +restlet的配置环境如何，这里就不再说明。
如有问题，欢迎讨论。
html5 file upload and form data by ajax的更多相关文章
-
【转发】Html5 File Upload with Progress
Html5 File Upload with Progress Posted by Shiv Kumar on 25th September, 2010Senior Sof ...
-
jQuery File Upload 单页面多实例的实现
jQuery File Upload 的 GitHub 地址:https://github.com/blueimp/jQuery-File-Upload 插件描述:jQuery File Upload ...
-
jQuery File Upload blueimp with struts2 简单试用
Official Site的话随便搜索就可以去了 另外新版PHP似乎都有问题 虽然图片都可以上传 但是response报错 我下载的是8.8.7木有问题 但是8.8.7版本结合修改main. ...
-
html5 file 上传文件
<body> <header> <h2>Pure HTML5 file upload</h2> </header> <div clas ...
-
Web 前沿——HTML5 Form Data 对象的使用
XMLHttpRequest Level 2 添加了一个新的接口——FormData.利用 FormData 对象,我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件,我们还可以使用 ...
-
HTML5 Form Data 对象的使用
HTML5 Form Data 对象的使用 MDN: https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Object ...
-
[WebAPI] - 使用 Ajax 提交 HTML Form Data 到 WebAPI 的方法
背景 根据HTTP标准,HTTP请求可以使用多种请求方法. HTTP 1.0 定义了三种请求方法:GET.POST 和 HEAD 方法.HTTP 1.1 新增了五种请求方法:OPTIONS.PUT.D ...
-
[整理]Ajax Post请求下的Form Data和Request Payload
Ajax Post请求下的Form Data和Request Payload 通常情况下,我们通过Post提交表单,以键值对的形式存储在请求体中.此时的reqeuest headers会有Conten ...
-
AJAX POST请求中参数以form data和request payload形式在servlet中的获取方式
转载:http://blog.csdn.net/mhmyqn/article/details/25561535 HTTP请求中,如果是get请求,那么表单参数以name=value&name1 ...
随机推荐
-
IIS发布项目 遇到的error
HTTP 错误 403.14 - Forbidden Web 服务器被配置为不列出此目录的内容. 重新注册一下.net framework试试,当然这一步骤也可以排在第一位. 32位的Windows: ...
-
hibernate学习（5）——对象状态与一级缓存
1.对象状态 1.1 状态介绍 hibernate 规定三种状态:瞬时态.持久态.脱管态 瞬时态:transient,session没有缓存对象,数据库也没有对应记录.没有与hibernate关联 ...
-
[bzoj4872]分手是祝愿
Description Zeit und Raum trennen dich und mich. 时空将你我分开.B 君在玩一个游戏,这个游戏由 n 个灯和 n 个开关组成,给定这 n 个灯的初始状态 ...
-
Spring AOP 通过order来指定顺序
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt398 Spring中的事务是通过aop来实现的,当我们自己写aop拦截的时候 ...
-
借助csv用PHP生成excel文件
当你将xml文件改为csv后缀会发现原先的表格结构都变成用逗号隔开的一行一行数据,就像这样 编号,姓名,年龄 001,王宇,28 002,刘三,20 由此看来,如果能将PHP数据输出为这样的格式,然后 ...
-
dnmp(docker的lnmp)安装WordPress之后图片上传问题 问题：图片上传大小问题解决和 报错413 Request Entity Too Large
首先是提示超过图片尺寸和大小, 最后发现都是图片大小的问题, 需要修改php的最大上传size 修改之后查看php配置 已经生效 但是还是报错, 提示返回不是合法的json, 查看控制台, 报错 ...
-
Java编程——学习大纲
Java基础 Java基础--JDK的安装和配置 Java基础--Eclipse使用 Java基础--基本概念.数据类型.运算符 Java扩展--整型和浮点型在计算机中的存储格式 Java基础--流程 ...
-
SQL 性能不佳的几个原因
•不准确的统计数据•差劲的索引•差劲的查询设计 •差劲的执行计划,通常是由不正确的参数引起的•过度阻塞和死锁 •非基于集合的操作•不良数据库设计 •过度碎片 •不能重复使用执行计划 •查询频繁重编译 ...
-
hdu 4865 Peter&;#39;s Hobby
Peter's Hobby Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) To ...
-
哈希表-java
import java.util.HashMap; import java.util.Iterator; public class JavaHashMap { public static void m ...