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 都是 大写 , 需要转成 小写 提交