html php表单提交图片上传,PHP结合HTML5使用FormData对象提交表单及上传图片

深藏阁楼爱情的钟 2023-01-16 06:20 159阅读 0赞

原标题：PHP结合HTML5使用FormData对象提交表单及上传图片

FormData 对象，可以把form中所有表单元素的name与value组成一个queryString，提交到后台。在使用Ajax提交时，使用FormData对象可以减少拼接queryString的工作量。

使用FormData对象

1.创建一个FormData空对象，然后使用append方法添加key/value

var formdata = new FormData();

formdata.append('name','fdipzone');

formdata.append('gender','male');

2.取得form对象，作为参数传入到FormData对象

var form = document.getElementById('form1');

var formdata = new FormData(form);

使用FormData提交表单及上传文件：

FormData Demo

< src="//code.jquery.com/jquery-1.11.0.min.js">>

< type="text/java">

>

name:

gender:male female

photo:

server.php

$name = isset($\_POST\['name'\])? $\_POST\['name'\] : '';

$gender = isset($\_POST\['gender'\])? $\_POST\['gender'\] : '';

$filename = time().substr($\_FILES\['photo'\]\['name'\], strrpos($\_FILES\['photo'\]\['name'\],'.'));

$response = array();

if(move\_uploaded\_file($\_FILES\['photo'\]\['tmp\_name'\], $filename))\{

$response\['isSuccess'\] = true;

$response\['name'\] = $name;

$response\['gender'\] = $gender;

$response\['photo'\] = $filename;

\}else\{

$response\['isSuccess'\] = false;

\}

echo json\_encode($response);

?>

更多精彩内容请关注：返回搜狐，查看更多

责任编辑：

发表评论取消回复

表情：

评论列表（有 0 条评论，159人围观）

还没有评论，来说两句吧...

相关阅读

相关 html php表单提交图片上传,PHP结合HTML5使用FormData对象提交表单及上传图片

原标题：PHP结合HTML5使用FormData对象提交表单及上传图片 FormData 对象，可以把form中所有表单元素的name与value组成一个queryStrin

深藏阁楼爱情的钟/ 2023年01月16日 06:20/ 0 赞/ 160 阅读

相关 html表单php数据,php-以HTML表单提交画布数据

如何在PHP CodeIgniter表单中提交Canvas内容？表单上的输入之一是用于绘图或网络摄像头照片的画布. 我创建了一个标签< input name =“ pic

缺乏、安全感/ 2022年11月12日 13:50/ 0 赞/ 242 阅读

相关 html禁止form表单提交表单提交,onsubmit阻止表单提交

在实际开发中往往会遇到检查表单数据的合法性，如果数据不合法，就不让其提交。 Bootstrap 实例 - 提交表单验证 //---> function checksubm

骑猪看日落/ 2022年10月07日 11:57/ 0 赞/ 448 阅读

相关 Ajax表单提交上传文件

Ajax表单提交上传文件： html 部分： <form id="uploadForm" enctype="multipart/form-data">

约定不等于承诺〃/ 2022年07月18日 05:15/ 0 赞/ 252 阅读

相关 ajax 请求后台数据(及使用FormData对象提交表单及上传图片）

js <script type="text/javascript"> $(function(){ $('submit').click(funct

冷不防/ 2022年06月10日 12:43/ 0 赞/ 246 阅读

相关表单提交文件上传

前言表单上传文件是最基本的上传文件方式，虽然现在有很多优秀的上传插件，如：webuploader、uploadify等，但我们还是说一下表单上传。具体内容 1

蔚落/ 2022年06月08日 06:50/ 0 赞/ 450 阅读

相关 vue axios 表单提交上传图片

项目中用的element 的框架，然后在项目有一个添加数据需求是图片可上传，也可不上传，然后问题就是element 中的上传控件在没有图片的时候是不会触发提交的，但接口写的

青旅半醒/ 2022年06月04日 01:57/ 0 赞/ 234 阅读

相关 NodeJS上传表单、图片

ps：这个在之前研究node的express框架+mongodb练习的时候遇到的问题，就是如何把图片进行上传到后台，本案例包括前端页面展示，现在进行了总结 1、先配置上传地

电玩女神/ 2022年05月31日 13:38/ 0 赞/ 219 阅读

相关异步提交表单上传文件

一，引入jquery.min.js以及jquery.form.js插件（jquery.min.js必须是1.9以上版本支持） ![70][] 二，页面添加js代码

绝地灬酷狼/ 2022年05月26日 09:26/ 0 赞/ 285 阅读

相关 ajax版本表单提交（包含图片上传）

html： <input type="file" id="uploadImg"> js： var fd = new FormData();

阳光穿透心脏的1/2处/ 2022年05月24日 05:54/ 0 赞/ 238 阅读