利用FormData提交图片或者文件类型的数据

 

我在做后台管理项目时经常有需要提交二进制类型的数据,但是文件和图片类型的数据不能直接获取值。下面介绍HTML5 FormData 方法介绍以及实现文件上传

FormData 就是 XMLHttpRequest一个对象，利用它来提交表单、模拟表单提交，使用formData进行传递，好处是可以传递文件和图片。

FormData的基本用法：FormData对象，可以把所有表单元素的name与value组成一个queryString，提交到后台。只需要把 form 表单作为参数传入 FormData 构造函数即可：

1、var form = document.getElementById("form1");

2、 var formData = new FormData(form);

这样就可以直接通过ajax 的 send() 方法将 formData 发送到后台。

 

目录

HTML

JS

控制器

---

 

• HTML

利用form表单

<form id="fr">

                       <div class="form-group text-center">

                           <div class="img-box text-center">

                               <img src="" alt="" width="150" height="180" id="imgPicture" />

                               <input type="file" style="margin-left:90px;margin-top:5px;" name="Picture" id="Picture" />

                           </div>

                           <p class="text-center">录入须知