html5 file upload and form data by ajax
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 ...
随机推荐
- java设计模式---合成模式2
合成模式属于对象的结构模式,有时又叫做"部分--整体"模式.合成模式将对象组织到树结构中,可以用来描述整体与部分的关系.合成模式可以使客户端将单纯元素与复合元素同等看待. 合成模式 ...
- Android进阶(十一)Android系统架构讲解
如果说一个成功男人的背后会有一个默默支持的女人的话,那么一个优越稳定的平台背后必有一个成熟的系统架构所支撑着.那么,Android的系统架构是怎么样的呢?从下图我们可以从整体上有个大致的了解(图片来源 ...
- Visual Studio 2010多线程编程
随着处理数据量的逐渐增大,串行单核的程序,犹如残灯缺月,无法满足运用需求.大规模集群的出现,解决了这一技术难题.本文旨在探讨如何使用多CPU并行编程,关于CUDA的并行前面文章已有讲述.本文结构分为三 ...
- tomcat的realm域
Realm域,其实可以看成是一个包含了用户及密码的数据库,而且每个用户还会包含了若干角色.也就是包含了用户名.密码.角色三个列的数据记录集合,如下图,最下面椭圆内的包含的整块即可以看成realm域.它 ...
- UIController子类控件 UI_06
1.UIImageView 是用来显示图片的控件,相当于相框,用来显示UIImage对象 //初始化UIImage对象及为其加载图片 //第一种方式 // UII ...
- 详解ebs接口之客户配置文件导入（二）
------------------------------------ -- 1a. Setup the Org_id ------------------------------------ ex ...
- 关于iOS常用的26中公共方法，可copy的代码
1. 获取磁盘总空间大小 //磁盘总空间 + (CGFloat)diskOfAllSizeMBytes{ CGFloat size = 0.0; NSError *error; NSDictionar ...
- OpenCV 轮廓检测
使用OpenCV可以对图像的轮廓进行检测.这是之前用过的代码,挺简单的,回顾一下.主要要进行以下2步操作: 1.cvThreshold():对图像进行二值化处理 2.cvFindContours(): ...
- SpriteBuilder中如何固定两个互不接触的物理物体?
如下图: 这个弹簧装置由3部分组成(从上到下): 弹板 弹簧 弹簧金属底座 其中弹板将固定在弹簧上(但并没有接触,如上图),这就引出一个有趣的问题:怎么样才能将两个独立的物理物体(注意:是物理物体)固 ...
- how tomcat works 读书笔记(一)----------一个简单的web服务器
http协议 若是两个人能正常的说话交流,那么他们间必定有一套统一的语言规则<在网络上服务器与客户端能交流也依赖与一套规则,它就是我们说的http规则(超文本传输协议Hypertext tran ...