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

··························································

开发工具：Visual Studio 2015

关键技术：C#MVC、FormData

作者：邵亮华

撰写时间：2019-01-16

 

··························································

我在做后台管理项目时经常有需要提交二进制类型的数据,但是文件和图片类型的数据不能直接获取值。下面介绍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">录入须知：上传的图片上限大小为10M！p>

                       div>

                       <div class="form-group">

                           <div class="col-lg-6 text-right">

                               <label class="control-label">姓名label>

                           div>

                           <div class="col-lg-6">

                               <input id="Name" class="form-control" name="Name"/>

                           div>

                       div>

                       <div class="form-group">

                           <div class="col-lg-6 text-right">

                               <label class="control-label">金额label>

                           div>

                           <div class="col-lg-6">

                               <input id="Money" class="form-control" name="Money"/>

                           div>

                       div>

                       <div class="form-group">

                           <div class="col-lg-6 text-right">

                               <label class="control-label">日期label>

                           div>

                           <div class="col-lg-6">

                               <input id="Date" class="form-control" type="date" name="Date"/>

                           div>

                       div>

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

                           <input id="Save" type="button" value="提交" />

                       div>

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

                           <input id="Clean" type="button" value="重置" />

                       div>

                   form>

 

 

 

JS

 

processData设置为false。因为data值是FormData对象，不需要对数据做处理。

标签添加enctype="multipart/form-data"属性。

cache设置为false，上传文件不需要缓存。

contentType设置为false。因为是由表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false。

上传后，服务器端代码需要使用从查询参数名为file获取文件输入流对象，因为中声明的是name="file"。

 

 

 

$("#Save").click(function () {

            //new FormData的参数是一个DOM对象，而非jQuery对象

            var formData = new FormData($("#fr")[0]);

         

            $.ajax({

                url: 'InsterShanZhai',

                type: 'POST',

                data: formData,      // 上传formdata封装的数据

                async: true,

                // 下面三个参数要指定，如果不指定，会报一个JQuery的错误               

                cache: false,         // 不缓存

                contentType: false,  // 不设置内容类型  jQuery不要去设置Content-Type请求头

                processData: false,  // jQuery不要去处理发送的数据

                success: function (data) {            //成功回调

                    if (msg == "新增成功!") {

                        layer.alert(data, { icon: 1, title: '提示' });

 

                    } else {

                        layer.alert(data, { icon: 0, title: '提示' });

                    }

 

                },

当元素遇到错误（没有正确载入）时，发生 error 事件。

error() 方法触发 error 事件，或规定当发生 error 事件时运行的函数

 

                error: function (data) {

                    alert(data);

                }

            });

控制器

由控制器接受数据，如图：