利用html5的FormData实现文件上传

html代码

<div class="row banner-list">
            <div class="col-md-6 col-image">
              <input type="text" name="image[]" value="" />
              <div class="add-image">{!! __('tycms.upload') !!}</div>
              <input type="file" id="file_field" class="file-field" />
            </div>
            <div class="col-md-4"><input type="url" name="url[]" value="" /></div>
            <div class="col-md-2"><input type="integer" name="sort[]" value="50" /></div>
          </div>

$('#advertModal').on('change', '.banner-list .file-field', (element) => {
    const file = element.currentTarget.files[0]
    const formData = new FormData()
    if (formData == 'undefined') 
    {
      alert('浏览器不支持，请升级浏览器！');
    }
    formData.append('file', file)
    $.ajaxSetup({
      headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }, 
    })
    $.ajax({
      url: "/backend/adverts/taxon_advert",
      type: "POST",       
      data: formData, 
      contentType: false,         
      processData:false,
      success: function(data)
      {
        const res = JSON.parse(data)
        if(res.errno == 0) 
        {
          $(element.currentTarget).prevAll('input[type=text]').val(res.data)
        }
        
      }
    })
  })

后端获取（laravel）

$images = $request->input('image');
      $urls = $request->input('url');
      $sorts = $request->input('sort');

如果需要打印form，使用：

for(data of formData) {
      console.log(data)
    }

构造函数

new FormData (form? : HTMLFormElement)

参数

form (可选)

一个HTML表单元素,可以包含任何形式的表单控件,包括文件输入框.

方法

append()

给当前FormData对象添加一个键/值对.

void append(DOMString name, Blob value, optional DOMString filename);
void append(DOMString name, DOMString value);

参数值

name

字段名称.

value

字段值.可以是,或者一个字符串,如果全都不是,则该值会被自动转换成字符串.

filename

(可选) 指定文件的文件名,当value参数被指定为一个Blob对象或者一个File对象时,该文件名会被发送到服务器上,对于Blob对象来说,这个值默认为"blob".

注:如果你将一个Blob对象作为字段值添加到一个FormData对象中,则在使用Ajax将这个FormData对象提交到服务器上时,提交数据中代表对应文件的文件名的"Content-Disposition"字段的值可能会因浏览器的不同而不同,规范中规定为"blob",Gecko早期实现版本中为空字符串,查看下面的Gecko附注. 注意: (IOS) 默认 filename 都是 大写 , 需要转成 小写 提交