Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >react中使用formdata获取不了表单上传的文件?

react中使用formdata获取不了表单上传的文件?

提问于 2017-11-24 06:12:51
回答 1关注 0查看 497

"1、在react中有个form表单,包含text,radio和file,可是js代码创建formDate时获取不到file的信息,请问该怎么去获取。

2、代码如下:

render的代码:

<form ref="addForm" className="addForm" id="addForm" enctype="multipart/form-data" method="post">

<div className="formType" >

<label htmlFor="type" className="col-sm-1 control-label">物料类型</label>

<input type="radio" name="type" value="1" checked={this.state.type =="1"} onChange={this.handleChange} />图片

<input type="radio" name="type" value="2" checked={this.state.type =="2"} onChange={this.handleChange} />视频

</div>

<div className="formWidth">

<label htmlFor="materialWidth">物料宽</label>

<input type="text" id="materialWidth" name="width" value={this.state.width} onChange={this.handleChange} placeholder="物料宽度" />

</div>

<div className="formHeight">

<label htmlFor="materialHeight">物料高</label>

<input type="text" id="materialHeight" name="height" value={this.state.height} onChange={this.handleChange} placeholder="物料高度" />

</div>

<div className="formUpload">

<label htmlFor="uploadMaterial">上传文件</label>

<input ref="material" id="uploadMaterial" name="files" type="file" />

</div>

<div className="submit">

<button type="button" className="btn btn-success" onClick={(event)=>{this.handleSubmit(event)}}>提交</button>

</div>

</form>

js的代码:

getInitialState: function() {

    return {

type: "",

width:"",

height:"",

"tab":"explain"

};

  },

handleChange: function(event) {

var newState={};

newState[event.target.name]=event.target.name=="checked"?event.target.checked:event.target.value;

this.setState(newState);

  },

handleSubmit: function(event){

var formDate = new FormData($("#addForm")[0]);

}

回答 1

第三蓝河

发布于 2017-11-24 06:52:30

用了append方法,把上传的文件添加到FormData里面

和开发者交流更多问题细节吧,去 写回答
相关文章
Ajax使用formData提交带图片上传的表单
记录一下今天踩过的坑。。这么个问题居然搞了快两个小时了。ssm框架,前台form带图片上传,因为效验表单数据,所以不能直接submit。
sunonzj
2022/06/21
2.6K0
vue 使用 axios 上传文件 — FormData
在此主要介绍 如何使用 formData 对象上传单文件和多文件,FormData 就是 XMLHttpRequest Level 2 新增的一个对象,利用它来提交表单、模拟表单提交,当然最大的优势就是可以上传二进制文件。
全栈程序员站长
2022/09/07
3.3K0
ajax文件上传-FormData()
HTML: 1 <form action=""> 2 3 <input type="file" id="file1" name=""> 4 5 <br> 6 7 <input type="file" id="file2" name=""> 8 9 <br> 10 11 <input type="button" value="保存"> 12 13
ProsperLee
2018/10/24
5.2K0
ajax文件上传-FormData()
使用FormData对象添加字段方式上传文件
<input type="file" id="file"> var formData = new FormData(); formData.append('file',$('#file')[0].files[0]); $.ajax({     url: '',     type: 'POST',     cache: false,     data: formData,     processData: false,     contentType: false }).done(function(res) { }).fail(function(res) {});
双面人
2019/06/13
2.3K0
表单方式文件上传和获取文件属性
注:form表单里发送除文件外的数据,一般是新建一个type=hidden的input,value=‘需要传的数据’,每发送一个数据就需要一个input(相当于参数)
biaoblog.cn 个人博客
2022/08/11
1.2K0
Ajax文件上传时:Formdata、File、Blob的关系
“Formdata”接口提供了一种表示表单数据的键值对 key/value 的构造方式,并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去。
房东的狗丶
2023/02/17
3.5K0
通过Ajax方式上传文件(input file),使用FormData进行Ajax请求
<div > <input type="file" name="FileUpload" id="FileUpload"> <a class="layui-btn layui-btn-mini" id="btn_uploadimg">上传图片</a> </div> <script type="text/jscript"> $(function () {
纯粹是糖
2018/03/14
6.7K0
form表单中带有文件上传,同时提交
前台JS(easyUI) function EditsubmitForm() { var father = $('#select_category').combobox('getValue'
唐怀瑟
2018/08/30
5.1K0
HTML5 FormData 方法介绍以及实现文件上传
XMLHttpRequest 是一个浏览器接口,通过它,我们可以使得 Javascript 进行 HTTP (S) 通信。XMLHttpRequest 在现在浏览器中是一种常用的前后台交互数据的方式。2008年 2 月,XMLHttpRequest Level 2 草案提出来了,相对于上一代,它有一些新的特性,其中 FormData 就是 XMLHttpRequest Level 2 新增的一个对象,利用它来提交表单、模拟表单提交,当然最大的优势就是可以上传二进制文件。下面就具体介绍一下如何利用 FormData 来上传文件。
全栈程序员站长
2022/11/17
2.2K0
HTML5 FormData 方法介绍以及实现文件上传
formData原生实现图片上传
参考:https://juejin.im/post/5aa01068f265da23970669ce
全栈程序员站长
2022/07/11
2.1K0
node表单文件上传(formidable)实现
在node表单进行上传时候,常规的数据传递没有什么问题,当涉及到文件上传(图片,音视频,文本等)我们发现,接收的仅仅是这个上传的文件名,而非资源本身,这样如何能达到我们的要求呢?此时我们需要引入第三方
十月梦想
2018/08/29
6610
jqm文件上传,上传图片,jqm的表单操作,jqm的ajax的使用,jqm文件操作大全,文件操作demo
最近在论坛中看到,在使用html5中上传图片或文件,出现各种问题。这一方面,我也一直没有做过,今天就抽出了一点时间来学习一下。现在的示例已经ok了,我就给大家分享一下,希望对大家有帮助。 好吧,我们先看看效果截图吧:
业余草
2019/01/21
8970
jqm文件上传,上传图片,jqm的表单操作,jqm的ajax的使用,jqm文件操作大全,文件操作demo
如何使用FormData上传压缩裁剪后的图片Blob对象
在前端页面,我们通常会遇到需要用户上传图片的操作,可能还会在前端进行图片编辑的操作(比如头像的选区裁剪),然后如果图片过大的话,我们还会对图片进行压缩。这些功能我们通常通过Canvas来进行,最后使用Canvas API函数toDataURL来得到图片的Base64字符串,然后当我们要上传到后台的时候,会面临2种选择:
一斤代码
2018/08/21
3.7K0
如何使用FormData上传压缩裁剪后的图片Blob对象
原生js使用FormData上传文件并监听进度(附前后端实现源码)
本文代码及相关素材已经托管到Github仓库, 永久下载地址https://github.com/zhaoolee/Blog/tree/master/form_data_upload_file
zhaoolee
2019/06/14
4.3K0
原生js使用FormData上传文件并监听进度(附前后端实现源码)
XMLHttpRequest2-FormData上传文件方法封装及进度条的实现
版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/article/details/51240496
空空云
2018/09/27
1.1K0
php上传文件完整源码表单
在下面这个脚本中,我们增加了对文件上传的限制。用户只能上传 .gif、.jpeg、.jpg、.png 文件,文件大小必须小于 200 kB:
用户5706463
2019/07/22
3.1K0
React技巧之表单提交获取input值
原文链接:https://bobbyhadz.com/blog/react-get-form-input-value-on-submit[1]
chuckQu
2022/08/19
1.9K0
React技巧之表单提交获取input值
点击加载更多

相似问题

FTP上传不了文件?

71.6K

Nodejs XMLHttpRequest上传文件不能使用Formdata?

018

sqlserver备份文件上传不了怎么办?

1304

实名认证上传不了呀???????????????????

3285

实名认证上传不了证件?

2610
相关问答用户
某公司 | 程序员擅长1个领域
腾讯云TDP | 先锋会员擅长2个领域
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档