Объект FormData используется для компиляции данных в пары ключ-значение для отправки данных с помощью XMLHttpRequest. Он в основном используется для отправки данных формы, но также может использоваться для отправки данных с ключом, независимо от формы. Если для атрибута enctype формы установлено значение multipart/form-data, метод формы submit() используется для отправки данных, чтобы отправляемые данные имели одинаковую форму.
Я использовал метод ajaxSubmit, который поставляется с плагином формы jquery для отправки формы.
$('#myForm2').submit(function() {
$(this).ajaxSubmit(function() {
$('#output2').html("提交成功！欢迎下次再来！").show();
});
return false; //阻止表单默认提交
});
Этот метод слишком зависит от библиотеки и будет потреблять много ресурсов на мобильной стороне, поэтому для отправки более целесообразно использовать FormData. FormData также является новым в H5.
== FormData может добавлять входные данные типа файлов HTML, выбранные пользователем, или объекты, подобные файлам JavaScript == Вы также можете прикрепить файлы типа File или Blob непосредственно к объекту FormData следующим образом:
data.append("myfile", myBlob, "filename.txt");
1. Создайте объект FormData через элемент Html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form action="">
<label for="">
姓名: <input type="text" name="name">
</label>
<label for="">
文件：<input id="file" type="file" name="file">
</label>
<label for="">
<input type="button" value="保存">
</label>
<div class="progress"></div>
</form>
<script>
var btn = document.querySelector('[type=button]');
var progress = document.querySelector('.progress')
btn.onclick = function () {
// 文件元素
var file = document.querySelector('[type=file]');
// 通过FormData将文件转成二进制数据
var formData = new FormData();
// 将文件转二进制
formData.append('upload', file.files[0]);
// JavaScript file-like 对象
var content = '<a id="a"><b id="b">hey!</b></a>'; // 新文件的正文...
var blob = new Blob([content], { type: "text/xml"});
formData.append("webmasterfile", blob);
var xhr = new XMLHttpRequest;
xhr.open('post', './file.php');
// 监听上传进度
xhr.upload.onprogress = function (ev) {
// 事件对象
// console.log(ev);
var percent = (ev.loaded / ev.total) * 100 + '%';
console.log(percent);
progress.style.width = percent;
}
xhr.send(formData);
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200) {
//
}
}
}
</script>
</body>
2. Создайте объект FormData через элемент формы Html и отправьте его с помощью ajax.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form enctype="multipart/form-data" method="post" name="fileinfo">
<label>Your email address:</label>
<input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32"
maxlength="64"/><br/>
<label>Custom file label:</label>
<input type="text" name="filelabel" size="12" maxlength="32"/><br/>
<label>File to stash:</label>
<input type="file" name="file" required/>
<input type="submit" value="Stash the file!"/>
</form>
<script src="//cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<script>
var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function (ev) {
ev.preventDefault()
// 文件元素
var fd = new FormData(document.querySelector("form"));
fd.append("CustomField", "This is some extra data");
$.ajax({
url: "./file.php",
type: "POST",
data: fd,
processData: false, // 不处理数据
contentType: false // 不设置内容类型
});
})
</script>
</body>
Заголовок запроса: Content-Type: multipart/form-data; border=----WebKitFormBoundaryVXQzCH5gOtjud1Xu
"--WebKitFormBoundary" плюс 16-битная случайная строка в кодировке Base64 в качестве границы разделения
3. Загрузить с помощью ImagePicker + выборка antd-mobile
import { ImagePicker, WingBlank, SegmentedControl } from 'antd-mobile';
const data = [{
url: 'https://zos.alipayobjects.com/rmsportal/PZUUCKTRIHWiZSY.jpeg',
id: '2121',
}, {
url: 'https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg',
id: '2122',
}];
export default class ImagePickerExample extends React.Component {
state = {
files: data,
multiple: false,
}
onImageChange = (files, type, index) => {
if (type == 'add') {
var file = files[files.length - 1].file
let formData = new FormData();
formData.append("file", file);
files[files.length - 1].url = '../../../../src/white.png'
this.setState({files})
fetch('./file.php', {
method: 'POST',
headers: {},
body: formData,
}).then((response) => response.json()).then((res)=> {
if (res.code == 200) {
files[files.length - 1].url = res.value.fileUrl
}
this.setState({files},function () {
const dom = document.querySelectorAll('.am-image-picker-item')
dom[files.length - 1].className +=' now'
});
}).catch((err)=> {
util.showWarning(err)
});
} else {
this.setState({files});
}
}
render() {
const { files } = this.state;
return (
<div>
<ImagePicker
files={files}
onChange={this.onImageChange}
onImageClick={(index, fs) => console.log(index, fs)}
selectable={files.length < 3}
multiple={false}
/>
</div>
);
}
}
Функция обратного вызова, запускаемая изменением значения файлов onImageChange, типы операций operationType включают добавление, удаление, если это операция удаления, третий параметр представляет собой индекс удаленного изображения.
При оценке type=='add' загрузите изображение, потому что настройка является одиночной загрузкой, поэтому последние данные в массиве файлов - это недавно добавленный файл, который необходимо загрузить.
var file = files[files.length - 1].file
Используйте FormData для инкапсуляции данных
let formData = new FormData();
formData.append("file", file);
Поскольку загрузка занимает время, чтобы улучшить взаимодействие с пользователем, сначала замените адрес на кабину с прозрачным изображением png, чтобы отобразить загрузку.
files[files.length - 1].url = '../../../../src/white.png'
this.setState({files})
Обратите внимание, что при использовании метода выборки вам не нужно задавать заголовок, а напрямую загружать инкапсулированные данные формы в тело.
fetch('./file.php', {
method: 'POST',
headers: {},
body: formData,
})
Нативная мобильная загрузка относится к методу Бога:сегмент fault.com/ah/119000001…