使用FormData表单数据对象提交表单及上传图片
来源:互联网 发布:linux开机过程 编辑:程序博客网 时间:2024/06/05 19:39
在H5中利用FormData表单数据对象,可以把form表单中所有表单元素的name与value组成一个请求字符串,提交到后台。可通过js用一些键值对来模拟一系列表单控件,还可以使用XMLHttpRequest的send()方法异步提交表单。
<body><div><h2>无刷新方式收集表单数据</h2><form><p>用户名 : <input type="text" name="username" value="jnjk" /></p><p>密 码 : <input type="password" name="password" value="123456" /></p><p>邮 箱 : <input type="text" name="email" value="jnjk@qq.com" /></p><p>头 像 : <input type="file" name="headimg" value="" /></p><img src="" id="headimg" /><p style="text-align:center;"><input type="submit" value="提交" /></p></form></div></body>
表单中有普通的text字符提交,也有file文件提交,使用FormData对象可以全部获取到表单域数据。
<script type="text/javascript">var fm = document.getElementsByTagName("form")[0];var himg = document.getElementById("headimg");fm.addEventListener("submit",function(e){//使用 FormData 表单数据对象,收集表单数据//var fdata = new FormData(fm);//收集fm的表单信息var fdata = new FormData(this);//收集fm的表单信息var xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){if(xhr.readyState == 4 && xhr.status == 200){var msg = xhr.responseText;eval("var return_obj = "+msg);//将返回的json字符串转化为对象console.log(return_obj);if(return_obj.status){himg.setAttribute('src',return_obj.data.headimg);himg.setAttribute('style','display:block');}else{alert(return_obj.data);}}}xhr.open('post','data.php');xhr.send(fdata);e.preventDefault();//阻止浏览器默认动作});</script>
data.php
<?php$data = $_POST;//普通表单域$file = $_FILES['headimg'];//文件上传if($file['error'] > 0) exit(json_encode(array('status'=>0,'data'=>'文件异常')));$save_path = './upload/'.date('Ymd').'/';if(!is_dir($save_path)){mkdir(iconv("GBK","UTF-8",$save_path),0777,true); }$name = $file['name'];$true_name = $save_path.$name;$upres = move_uploaded_file($file['tmp_name'],$true_name); //修改文件存储位置if($upres){$data['headimg'] = $true_name;echo json_encode(array('status'=>1,'data'=>$data));}else{echo json_encode(array('status'=>0,'data'=>'upload error'));}
阅读全文
0 0
- 使用FormData表单数据对象提交表单及上传图片
- 使用FormData对象提交表单及上传图片
- 使用FormData对象提交表单及上传图片
- 使用FormData对象提交表单及上传图片
- 使用FormData对象提交表单及上传图片
- 使用FormData对象提交表单及上传图片
- 使用FormData对象提交表单及上传图片
- 使用FormData对象提交表单及上传图片
- 使用FormData对象提交表单及上传图片
- ajax 请求后台数据(及使用FormData对象提交表单及上传图片)
- 使用formData对象提交表单并上传图片
- 使用FormData对象提交表单-上传附件
- PHP结合HTML5使用FormData对象提交表单及上传图片
- 使用FormData对象提交表单
- H5用FormData对象提交表单及上传文件
- 使用formData给后台提交表单数据
- 上传文件 使用HTML5的FormData 提交表单和文件数据
- 使用FormData来提交表单同时上传文件到服务端
- 匿名函数和闭包
- neutron-server.service启动失败显示代理报错http://controller:9696/v2.0/agents.json
- ES集群节点宕机导致shard unassigned解决方案
- 搭建Gitlab安装步骤、中文汉化、卸载
- tomCat知识
- 使用FormData表单数据对象提交表单及上传图片
- AngularJs表单提交
- 微信小程序ajax请求
- c语言猜数字小游戏(搞怪版)
- 错误:try using -rpath or -rpath-link
- 解决JDBC操作数据库出现中文乱码的问题
- spring boot 定时器的使用例子
- 如何在Visual Studio2013中添加MSDN帮助文档
- 如何查看zlib的版本号