Html5新特性-formData异步表单提交
来源:互联网 发布:展板设计用什么软件 编辑:程序博客网 时间:2024/06/04 17:47
页面提交内容为两个业务逻辑,分两个程序处理,干脆就弄了两次ajax访问。其中一个ajax内有文件上传,所以便用到了html5的formData。
页面部分只用写input标签即可,类似:
<input id="isSconds" type="file" />
js部分创建formData对象,然后把input内容选中,加进去就行了。
var formData = new FormData();var ipName= $("#isSconds").files[0];//append三参数:1参数名(如为多文件上传,则不能重复),2文件体(用js获取),3文件名(若不写此项则为本来的文件名)formData.append("file1",fileNow[m],"我是自定义的文件名");ajax部分
//ajax部分if(formData!=null){ $.ajax({ url:"接收地址", type : 'POST', data : formData, // 告诉jQuery不要去处理发送的数据 processData : false, // 告诉jQuery不要去设置Content-Type请求头 contentType : false, crossDomain: true, beforeSend:function(){ console.log("上传中……"); }, success : function(data) { if(data==1){ alert("上传成功"); $("input").val(""); $("input[type='button']").attr("value","提 交"); }else{ alert("上传失败,返回信息:"+data); } }, error : function(responseStr) { console.log("error"); } }); }
后端接收,java后端SpringMVC,单文件多文件都可以处理。@RequestMapping("/对应js中的请求接口") public void springUpload(HttpServletRequest request, HttpServletResponse response) { logger.info("文件接收!"); String isOk = "0"; String ip=null; try { // 将当前上下文初始化给 CommonsMutipartResolver (多部分解析器) CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession() .getServletContext()); // 检查form中是否有enctype="multipart/form-data" if (multipartResolver.isMultipart(request)) { // 将request变成多部分request MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request; // 获取multiRequest 中所有的文件名 @SuppressWarnings("rawtypes") Iterator iter = multiRequest.getFileNames(); // 如果目标路径文件夹不存在,则创建文件夹 boolean flag=true; while (iter.hasNext()) { String fileName=null; try { // 一次遍历所有文件 MultipartFile file = multiRequest.getFile(iter.next().toString()); if (file != null) { fileName=file.getOriginalFilename(); String path = FILEDIRECTORY(根目录) + "文件夹/" + fileName; System.out.println(path); File fileDir = new File(path); File fileParent = fileDir.getParentFile(); // 如果文件夹不存在,则创建 if (!fileParent.exists()) { fileParent.mkdirs(); } fileDir.createNewFile(); // 上传 file.transferTo(fileDir); } isOk = "1"; } catch (Exception e) { flag=false; sb.append("_"+fileName); e.printStackTrace(); } } } } catch (Exception e) { e.printStackTrace(); logger.error(e); }finally{ // 上传成功发送“1”,上传失败发送“0” response.getWriter().write(isOk); } }
阅读全文
0 0
- Html5新特性-formData异步表单提交
- FormData异步提交表单
- HTML5新特性:FileReader 和 FormData
- html5表单新特性
- HTML5表单新特性
- html5表单新特性
- html5异步提交文件表单
- 无刷新表单信息提交,使用HTML5新技术FormData
- HTML5的表单新特性
- HTML5的表单新特性
- html5 css3表单新特性
- HTML5表单新特性探究
- HTML5 FormData提交表单-HTML5文件上传-JavaServlet处理文件上传
- jquery FormData异步提交文件
- Ajax利用FormData提交表单
- 使用FormData对象提交表单
- ajax formData 异步上传表单
- HTML5的一些表单新特性
- Android存储挖坑记
- java学习 mysql
- 增强学习(四) ----- 蒙特卡罗方法(Monte Carlo Methods)
- epoll边沿触发和水平触发源码分析
- pthread_join和pthread_detach详解
- Html5新特性-formData异步表单提交
- 奇异值分解(SVD)和图像矩阵的分解测试
- 集合排序
- 删除项目里面所有.svn和.git 文件
- 欢迎使用CSDN-markdown编辑器
- js中数据转换中的NaN属性,isNaN()的用法
- 如何快速转载CSDN中的博客
- java类的设计技巧
- Python第一次采集数据小记