FE
HTML
Базовые настройки:
<form enctype="multipart/form-data">
<input id="file" type="file" multiple="multiple" name="file" accept="...">
<input type="submit" value="上传">
</form>
Свойство enctype формы
Атрибут enctype управляет MIME-кодировкой формы и имеет три атрибута:
| стоимость | описывать |
|---|---|
| application/x-www-form-urlencoded | Кодировать все символы перед отправкой (по умолчанию) |
| multipart/form-data | Нет кодировки символов, используется для оформления специальных типов передаваемых данных, таких как mp3, jpg |
| text/plain | передача обычного текста |
Поэтому для передачи полных данных файла требуетсяmultipart/form-dataАтрибуты.
Input
value
Имя файла, указанное пользователем, сохраняется.
type="file"
Установите тип ввода в файл.
multiple="multiple"
Можно выбрать несколько вариантов, а не один.
accept="..."
Устанавливает MIME_type необязательных файлов. Нажатие кнопки «Выбрать файл» после настройки отобразит файлы, соответствующие установленному MIME_type по умолчанию (для совместимости). Можно искать тип MIME, соответствующий конкретному типу файла. Вот типы, которые я использую:
| тип файла | MIME-тип |
|---|---|
| .txt | text/plain |
| application/pdf | |
| .doc | application/msword |
| .docx | application/vnd.openxmlformats-officedocument.wordprocessingml.document |
| .xls | application/vnd.ms-excel |
| .ppt | application/vnd.ms-powerpoint |
| .pptx | application/vnd.openxmlformats-officedocument.presentationml.presentation |
Эффект
Слишком некрасиво, чтобы терпеть...
CSS
За интерфейсом по умолчанию следует кнопка выбора файла, за которой следует текстовая область с именем файла.Кнопка выбора файла не может быть отредактирована. Метод, который я изменил, заключается в том, чтобы скрыть поле ввода, а затем установить метку метки, чтобы активировать кнопку выбора файла, когда пользователь щелкает метку метки.
<label for="file">选择文件</label>
Эффект
JS
При использовании from для отправки браузер отправляет на сервер содержимое выбранного файла, а не только имя файла.
из соображений безопасности,
<input type="file">То есть элемент загрузки файла не позволяет авторам HTML или программистам JavaScript указывать имя файла по умолчанию. Атрибут значения HTML игнорируется, и для таких элементов атрибут значения доступен только для чтения, что означает, что только пользователь может ввести имя файла. Элемент file-upload запускает обработчик события onchange, когда пользователь выбирает или редактирует имя файла.
Использование отправки формы приведет к обновлению страницы, и это не очень хорошо, поэтому использование AJAX для загрузки файлов является хорошим выбором. Но это требует, чтобы мы сами организовали контент, отправляемый через POST-запрос.
Объект FormData
Объект FormData можно использовать для сборки набора пар ключ/значение для отправки запросов с помощью XMLHttpRequest. Отправка данных формы может быть более гибкой и удобной, поскольку ее можно использовать независимо от формы. Если вы установите тип кодирования формы как multipart/form-data, формат данных, передаваемых через FormData, будет таким же, как формат данных, передаваемых формой через метод submit(). - Веб-документы MDN
Создайте объект FormData
let formData = new FormData();
Добавить поле файла к созданному объекту
let myFile = document.getElementById('file');
// myFile.file[0]为第一个文件（单选）,多个文件（多选）则要循环添加
formData.append('myFile', myFile.files[0]);
console.log(myFile.files[0]);
Единицей атрибута размера является байт (byte), то есть b.
Добавить настраиваемые поля
formData.append('username', 'simmzl');
AJAX отправить
let request = new XMLHttpRequest();
request.open("POST", "http://foo.com/foo.php");
request.send(formData);
Не использовать объекты FromData
Без использования объекта FormData вам необходимо сериализовать и отправить форму через AJAX:Using nothing but XMLHttpRequest
PHP
перенимать
глобальный массив$_FILES, первый параметр — входное имя формы, а второй нижний индекс — «имя», «тип», «размер», «имя_tmp» или «ошибка». Соответствующие ограничения могут быть сделаны на основе этих свойств, таких какОграничьте размер файла, тип файла и т. д..
| стоимость | описывать |
|---|---|
| name | имя файла |
| type | MIME-тип файла |
| size | размер файла в байтах |
| tmp_name | Полученный файл PHP будет сохранен как временный файл, если вам нужно сохранить его по указанному пути, вам нужно переместить временный файл. |
| error |
1-7представляет 7 различных категорий ошибок и0представляет успех |
ошибка:Успех: 0 (UPLOAD_ERR_OK) потерпеть неудачу:
- Превышен размер загружаемого файла конфигурации
- Превышен размер загружаемого файла, установленный формой
- Часть файла загружена
- Файлы не загружены
- Временный каталог не найден
- файл не доступен для записи
- Загрузка файла прервана расширением для PHP
проверять
Загруженный файл отправляется через POST,is_uploaded_file(file)Функция может определить, был ли указанный файл загружен через HTTP POST, и возвращает логическое значение.
Эту функцию можно использовать, чтобы гарантировать, что злоумышленник не сможет обманным путем получить доступ к файлам, к которым у него в противном случае не должно быть доступа, например /etc/passwd. Эта проверка особенно важна, если загруженный файл может привести к тому, что его содержимое будет отображаться пользователю или другим пользователям системы.
спасти
Загруженный файл временно хранится в tmp_name и должен использоватьсяmove_uploaded_file(file,newlocation)Переместите загруженный файл по указанному пути и верните логическое значение.
if( move_uploaded_file($tmp_name, $destination) ) {
echo "文件上传成功";
}else{
echo "文件移动失败";
}
удалять
использоватьunlink(filepath)Удалить файл, параметром является путь к файлу.
Расширенная функция
Конечно, в дополнение к четырем основным операциям получения, проверки, сохранения и удаления вы также можете добавить такие функции, как сохранение пути к файлу в базу данных и формирование списка файлов, в зависимости от ваших потребностей.
Первоначально опубликовано вblog.simmzl.cn