首页 > 代码库 > FormData 对象的使用
FormData 对象的使用
XMLHttpRequest Level 2 添加了一个新的接口—— FormData。利用 FormData 对象,我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件,我们还可以使用 XMLHttpRequest 的 send() 方法来异步的提交表单,通过FormData对象可以组装一组用 XmlHttpRequest 发送请求的键/值对。它可以更灵活方便的发送表单数据,因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ,则通过FormData传输的数据格式和表单通过 submit() 方法传输的数据格式相同,与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件。
代码上来先:
$(function() { $(‘#upload‘).click(ajaxUpload); }); function ajaxUpload() { var file1 = $(‘#file1‘)[0].files[0]; var file2 = $(‘#file2‘)[0].files[0]; // 创建内存中的表单对象 var form = new FormData(); form.append(‘file1‘, file1); form.append(‘file2‘, file2); $.ajax({ url : ‘account/upload.do‘, data : form, type : ‘post‘, dataType : ‘json‘, contentType : false, processData : false, success : function(obj) { //这里的obj.state来自于JsonResult的成员变量 //0为正常,1为异常 if (obj.state == 0) { $(‘#result‘).html("成功"); } else { $(‘#result‘).html("出现了小错误"); } } }); }
其中 JsonResult 是自定义的一个返回 Json格式的 Java类,在 action中对于异步请求返回的是 Json格式的字符串。
html 部分代码:
Ajax UpLoad: <br> <input id="file1" type="file"> <br> <input id="file2" type="file"> <br> <input type="button" value="submit" id="upload" /> <!-- 展示返回信息 --> <div id="result"></div>
后台 Controller处理代码:【类名上写了映射 @RequestMapping("/account")】
/** * 文件上传 * @param file1 * @param file2 * @return * @throws IllegalStateException * @throws IOException */ @RequestMapping("/upload.do") @ResponseBody public Object upload(MultipartFile file1, MultipartFile file2) throws IllegalStateException, IOException { // Spring MVC 中可以利用MultiPartFile接收上传的文件 // 文件中的一切数据都可以从MultiPartFile对象中找到 // 获取上传文件的原始文件名 String f1 = file1.getOriginalFilename(); String f2 = file2.getOriginalFilename(); System.out.println(f1); System.out.println(f2); // 保存上传文件的三种方法: // 1. transferTo(目标文件) 将上传文件直接保存到目标文件,可以处理大文件 // 2. file1.getBytes() 获取文件的全部字节,读取到内存中,适合处理小文件 // 3. file1.getInputStream() 获取上传文件的流,适合处理大文件 // 第一种保存文件 File dir = new File("C:/demo"); dir.mkdir(); File fl1 = new File(dir, f1); File fl2 = new File(dir, f2); // file1.transferTo(fl1); // file2.transferTo(fl2); // 第三种保存文件 InputStream in = file1.getInputStream(); FileOutputStream out = new FileOutputStream(fl1); int b; while ((b = in.read()) != -1) { out.write(b); } in.close(); out.close(); InputStream in2 = file2.getInputStream(); FileOutputStream out2 = new FileOutputStream(fl2); byte[] buff = new byte[8 * 1024]; // 8k缓冲区 int b2; while ((b2 = in2.read(buff)) != -1) { out2.write(buff, 0, b2); } out2.close(); in2.close(); return new JsonResult(true); }
FormData 对象的使用
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。