一个页面中含有多个new formdata对象 ajax

问题对人有帮助,内容完整,我也想知道答案
问题没有实际价值,缺少关键内容,没有改进余地
我取了一个id为formUpload的表单,用于上传文件。使用jQuery的ajax发送
var formData = new FormData($("#formUpload")[0]);
生成formData对象的时候为什么要在后面添加[0]
答案对人有帮助,有参考价值
答案没帮助,是错误的答案,答非所问
因为new FormData的参数需要一个HTMLElement类型的数据,而jQuery得到的是个HTMLElement的集合,哪怕只有一个元素。所以需要用[]取其第一个元素。
纠正一下:jQuery是一个伪数组对象,本身是对象,能表现出来数组的特点: 有length属性,能够用下标取值;$(".someClass") // 这个时候将所有匹配到DOM元素对象放在jQuery维护的数组中;$("#id") // 这个时候将所有匹配到DOM元素对象放在jQuery维护的数组中;在数组的特征外,jQuery还可以调用next(), last()等方法(返回结果也还是jQuery对象,jQuery链式功能);
所以:jQuery得到的是个HTMLElement的集合基础上的封装后的对象
答案对人有帮助,有参考价值
答案没帮助,是错误的答案,答非所问
因为new FormData的参数需要一个HTMLElement类型的数据,而jQuery得到的是个HTMLElement的集合,哪怕只有一个元素。所以需要用[]取其第一个元素。
答案对人有帮助,有参考价值
答案没帮助,是错误的答案,答非所问
JQ取得是个数组,js取出和试用得应该是个HTMLElement对象;所以+[0]从jq 得数组里取element得对象;
同步到新浪微博
分享到微博?
你好!看起来你挺喜欢这个内容,但是你还没有注册帐号。 当你创建了帐号,我们能准确地追踪你关注的问题,在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助,记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由:
删除理由:
忽略理由:
推广(招聘、广告、SEO 等)方面的内容
与已有问题重复(请编辑该提问指向已有相同问题)
答非所问,不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因(请补充说明)
我要该,理由是:16:37 提问
Formdata图片传输,java后台解析问题
这是前端代码:
var formdata = new FormData();
formdata.append("files",files);
var json = {"files":files};
type: "post",
url: "http://localhost:8080/Ajax1/practise",
async: true,
data: "files="+formdata,
dataType: "text",
success: function(data) {
alert(data);
error: function() {
alert("登录出错");
java后台要什么解析,通过
String fi = request.getParameter("files");
输出是个对象
[object FormData]
要怎么解析formdata
按赞数排序
DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
List&FileItem& items = upload.parseRequest(request);
System.out.println("1:=========" + items.size());
Map param = new HashMap();
for (Object object : items) {
FileItem fileItem = (FileItem)
System.out.println("2:=========" + fileItem.toString());
System.out.println("3:fileItem.getFieldName():==" + fileItem.getFieldName());
if (fileItem.isFormField()) {
param.put(fileItem.getFieldName(),
fileItem.getString("utf-8"));// 如果你页面编码是utf-8的
System.out.println("4: param.get(fileItem.getFieldName())==="
+ param.get(fileItem.getFieldName()));
String picturename =fileItem.getName();
String path = "D:\\temp\\" +
System.out.println("======================="+path+"==========");
String path2 = "D:\\k\\java开发\\Hbuilder\\ajaxServlet1\\img\\"
+ fileItem.getName();
fileItem.write(new File(path));
慕课网有视频,你可以去看看
其他相关推荐&title&FormData多图上传演示&/title&
&body&     &a href="javascript:newPicture();" &上传新图片&/a&
&input id="picture" type="file" style="display:" multiple="multiple"&
&script type="text/javascript" src="/common/js/jquery.min.js"&&/script&
&script type="text/javascript"&
function newPicture(){
$('#picture').click();
    $('#picture').on('change',function(){
var files= $(this).get(<span style="background-color: #f5f5f5; color: #).
//如果有选择图片则上传图片
var formData= new FormData();
if(files.length&<span style="background-color: #f5f5f5; color: #){
//formData.append("files",files[0]);
for(var i=<span style="background-color: #f5f5f5; color: #;i&files.i++){            //FormData.set&和&append()&的区别在于,如果指定的键已经存在,&FormData.set&会使用新值覆盖已有的值,而&append()&会把新值添加到已有值集合的后面。            //注意:如果你的服务器端是PHP那么为了与php命名习惯一致在名称中需要添加[],如formData.append('files[]',files[i]);
formData.append('files',files[i]);
var xhr= new XMLHttpRequest();
xhr.open('POST', '/uploadImgAlbums');
xhr.onreadystatechange = function(){
if (xhr.readyState== <span style="background-color: #f5f5f5; color: #&& xhr.status== <span style="background-color: #f5f5f5; color: #0){
console.log('上传成功'+xhr.responseText);
//处理其他数据,这里根据需要进行调整
xhr.send(formData);
看完了页面代码,在看下后端的控制器,我后端使用了spring mvc:
@RequestMapping("uploadImgAlbums")
public void albumUploadImgs(@RequestParam(value = "files", required = true) MultipartFile[] multipartFiles,HttpServletRequest req, HttpServletResponse response){
for(MultipartFile multipartFile:multipartFiles){       //打印上传的文件路径
System.out.println(multipartFile.getOriginalFilename());      //打印文件字节数据
      System.out.println(multipartFile.getBytes());   } }
我这里只是简单展示下数据发送到了后端文件上传控制器,剩下的根据项目业务的需求继续进行下去吧。
推荐阅读:
阅读(...) 评论()2017年8月 总版技术专家分月排行榜第一
2016年2月 总版技术专家分月排行榜第二2014年2月 总版技术专家分月排行榜第二2013年4月 总版技术专家分月排行榜第二
2017年9月 Web 开发大版内专家分月排行榜第二2017年8月 Web 开发大版内专家分月排行榜第二2017年7月 Web 开发大版内专家分月排行榜第二2017年5月 Web 开发大版内专家分月排行榜第二2017年4月 Web 开发大版内专家分月排行榜第二2017年3月 Web 开发大版内专家分月排行榜第二2017年1月 Web 开发大版内专家分月排行榜第二2016年11月 Web 开发大版内专家分月排行榜第二2016年9月 Web 开发大版内专家分月排行榜第二2016年8月 Web 开发大版内专家分月排行榜第二2016年7月 Web 开发大版内专家分月排行榜第二2016年6月 Web 开发大版内专家分月排行榜第二2016年5月 Web 开发大版内专家分月排行榜第二2016年4月 Web 开发大版内专家分月排行榜第二2016年2月 Web 开发大版内专家分月排行榜第二2015年9月 Web 开发大版内专家分月排行榜第二2015年7月 Web 开发大版内专家分月排行榜第二2015年6月 Web 开发大版内专家分月排行榜第二2015年4月 Web 开发大版内专家分月排行榜第二2015年3月 Web 开发大版内专家分月排行榜第二2015年2月 Web 开发大版内专家分月排行榜第二
2016年12月 Web 开发大版内专家分月排行榜第三2016年10月 Web 开发大版内专家分月排行榜第三2016年1月 Web 开发大版内专家分月排行榜第三2015年12月 Web 开发大版内专家分月排行榜第三2015年11月 Web 开发大版内专家分月排行榜第三2015年10月 Web 开发大版内专家分月排行榜第三2015年5月 Web 开发大版内专家分月排行榜第三2015年1月 Web 开发大版内专家分月排行榜第三2014年12月 Web 开发大版内专家分月排行榜第三
2017年8月 总版技术专家分月排行榜第一
2016年2月 总版技术专家分月排行榜第二2014年2月 总版技术专家分月排行榜第二2013年4月 总版技术专家分月排行榜第二
2017年9月 Web 开发大版内专家分月排行榜第二2017年8月 Web 开发大版内专家分月排行榜第二2017年7月 Web 开发大版内专家分月排行榜第二2017年5月 Web 开发大版内专家分月排行榜第二2017年4月 Web 开发大版内专家分月排行榜第二2017年3月 Web 开发大版内专家分月排行榜第二2017年1月 Web 开发大版内专家分月排行榜第二2016年11月 Web 开发大版内专家分月排行榜第二2016年9月 Web 开发大版内专家分月排行榜第二2016年8月 Web 开发大版内专家分月排行榜第二2016年7月 Web 开发大版内专家分月排行榜第二2016年6月 Web 开发大版内专家分月排行榜第二2016年5月 Web 开发大版内专家分月排行榜第二2016年4月 Web 开发大版内专家分月排行榜第二2016年2月 Web 开发大版内专家分月排行榜第二2015年9月 Web 开发大版内专家分月排行榜第二2015年7月 Web 开发大版内专家分月排行榜第二2015年6月 Web 开发大版内专家分月排行榜第二2015年4月 Web 开发大版内专家分月排行榜第二2015年3月 Web 开发大版内专家分月排行榜第二2015年2月 Web 开发大版内专家分月排行榜第二
2016年12月 Web 开发大版内专家分月排行榜第三2016年10月 Web 开发大版内专家分月排行榜第三2016年1月 Web 开发大版内专家分月排行榜第三2015年12月 Web 开发大版内专家分月排行榜第三2015年11月 Web 开发大版内专家分月排行榜第三2015年10月 Web 开发大版内专家分月排行榜第三2015年5月 Web 开发大版内专家分月排行榜第三2015年1月 Web 开发大版内专家分月排行榜第三2014年12月 Web 开发大版内专家分月排行榜第三
2017年8月 总版技术专家分月排行榜第一
2016年2月 总版技术专家分月排行榜第二2014年2月 总版技术专家分月排行榜第二2013年4月 总版技术专家分月排行榜第二
匿名用户不能发表回复!|
每天回帖即可获得10分可用分!小技巧:
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN,不得违反国家法律法规。
转载文章请注明出自“CSDN(www.csdn.net)”。如是商业用途请联系原作者。下次自动登录
现在的位置:
& 综合 & 正文
springmvc form多对象映射 数据绑定
多对象绑定
在使用springmvc的时候,有时候我们需要form能提交多个对象,比如我们要上火车,一个用户需要一张票,在设计的时候用户类里面有一个属性是票务(Tickets),在form表单提交的时候需要同时提交用户信息和票务信息,我试验了几次,发现了一种解决办法,这个办法应该是spring设计人员已经考虑了的
&form:form modelAttribute="userInfo,tickets" action="enter" method="post" id="enterForm"&
&label for="phone"&手机号:&/label&
&input type="text" name="userInfo.phone" id="phone" value=""
&label for="trainNumber"&车次:&/label&
&input type="text" name="tickets.trainNumber" id="trainNumber" value=""
&/form:form&
--------------------------------------------------------------------------------------------------------------------------------------------------------
FormController.java
@RequestMapping(value="/",method=RequestMethod.GET)public ModelAndView setForm(Model model){model.addAttribute("userInfo",new UserInfo());model.addAttribute("tickets",new Tickets());return new ModelAndView("index");}
@RequestMapping(value="/enter",method=RequestMethod.POST)public ModelAndView enter(@ModelAttribute("userInfo") UserInfo userInfo,@ModelAttribute("tickets") Tickets tickets){userInfo.setTickets(tickets);return new ModelAndView("main");}
通过这种方式就可以达到提交多个form的目的。
&&&&推荐文章:
【上篇】【下篇】}

我要回帖

更多关于 formdata append 对象 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信