Formdata append file php

Содержание

ebidel / handle_file_upload.php
Загрузка файлов через jQuery AJAX
Отправка одного файла
Код скрипта upload.php
Использование Объектов FormData
Создание объекта FormData
Получение объекта FormData из HTML формы
Отправка файлов при помощи объекта FormData
Отправка форм и файлов при помощи AJAX без использования объекта FormData
See also
Found a content problem with this page?

ebidel / handle_file_upload.php

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

$ fileName = $ _FILES [ ‘afile’ ][ ‘name’ ];

$ fileType = $ _FILES [ ‘afile’ ][ ‘type’ ];

$ fileContent = file_get_contents( $ _FILES [ ‘afile’ ][ ‘tmp_name’ ]);

$ dataUrl = ‘data:’ . $ fileType . ‘;base64,’ . base64_encode( $ fileContent );

$ json = json_encode( array (

‘name’ => $ fileName ,

‘type’ => $ fileType ,

‘dataUrl’ => $ dataUrl ,

‘username’ => $ _REQUEST [ ‘username’ ],

‘accountnum’ => $ _REQUEST [ ‘accountnum’ ]

));

echo $ json ;

Thanks so much 🙂
I was looking for how to use $_FILES with an AJAX post and everywhere they only showed the JavaScript but not how to handle the data in PHP.

Does this work in IE? I havin gissues in IE getting things to work properly with the fd FormData.

hy
«var resp = JSON.parse(this.response);»
whats wrong with this above line in IE ?

below is my code but when i post it to the java server i get nulls on parameters can some one help.

Nicee job using FormData in JavaScript to populate $_FILES variable in php, i was wandering some days ago, why not try to populate $_FILES variable, you did it anyway !

Nice job, thank you very much (y)

Please for days now i have been looking for how to modifiy that code and get it to do a multiple upload. Please can you show how to do a multiple upload with this ?

@kressly Just include multiple files in the FormData.

and if i want to save the image in a carpet or path

as output
i am receiving this . can some one help to resolve my issue @chrisp22 could you find solution

You can find a working implementation of uploading file using XMLHttpRequest here.

Hi All,
Is there a way I can append the image path without using the file input
I have tried formData.append(‘avatar’, avatar.files[0], ‘cc.jpg’); any help please

Awesome, have been looking for this all day!
Thanks!

Thank you very much. Your example help me so much. I looking long time how to upload files to server via xhr. And again, thank you so much.

Thanks a lot, after looking all day long I finally found the right script.

Note to anyone finding this via Google and working with MVC: To use FormData, you’d have to post using xhr.setRequestHeader(«Content-Type»,»multipart/form-data»); — not included above — but then your server-side will throw an exception if you use

which is something it should never do, so I’m convinced FormData can only be used with PHP. Better to get the file into a base64 string (I have an example here: https://stackoverflow.com/questions/37134433/convert-input-file-to-byte-array/49676679#49676679 ), create a JSON object:

add in this after the xhr.open() :
xhr.setRequestHeader(«Content-Type»,»application/json;charset=UTF-8″);

then do xhr.send(JSON.stringify(dataObj)); at the end.

[System.Web.Http.HttpPost]
public virtual ActionResult Post([FromBody]MyModel myModelObject)

You’ll need to have a model:
public class MyModel <
public string afile < get; set; >
public string username < get; set; >
public int accountnum < get; set; >
>

Inside the Post, the parameters should be accessible: string file = myModelObject.afile;

Источник

Загрузка файлов через jQuery AJAX

В преведущей статье был приведен пример отправки файлов через AJAX с помощью плагина «jQuery Form Plugin». Но файлы можно отправить и обычным методом jQuery $.ajax() .

Отправка одного файла

Для примера возьмем поле и элемент div с id=»result» для вывода результата.

Чтобы отправить файл нужно отправить его бинарный данные, для этого есть объект FormData, поддерживается он всеми современными браузерами.

Помимо использования formData, в настройках $.ajax нужно указать параметры contentType: false и processData: false т.к. без них файл не отправится.

Код скрипта upload.php

 $input_name = 'file'; // Разрешенные расширения файлов. $allow = array(); // Запрещенные расширения файлов. $deny = array( 'phtml', 'php', 'php3', 'php4', 'php5', 'php6', 'php7', 'phps', 'cgi', 'pl', 'asp', 'aspx', 'shtml', 'shtm', 'htaccess', 'htpasswd', 'ini', 'log', 'sh', 'js', 'html', 'htm', 'css', 'sql', 'spl', 'scgi', 'fcgi', 'exe' ); // Директория куда будут загружаться файлы. $path = __DIR__ . '/uploads/'; $error = $success = ''; if (!isset($_FILES[$input_name])) < $error = 'Файл не загружен.'; >else < $file = $_FILES[$input_name]; // Проверим на ошибки загрузки. if (!empty($file['error']) || empty($file['tmp_name'])) < $error = 'Не удалось загрузить файл.'; >elseif ($file['tmp_name'] == 'none' || !is_uploaded_file($file['tmp_name'])) < $error = 'Не удалось загрузить файл.'; >else < // Оставляем в имени файла только буквы, цифры и некоторые символы. $pattern = "[^a-zа-яё0-9,~!@#%^-_\$\?\(\)\\[\]\.]"; $name = mb_eregi_replace($pattern, '-', $file['name']); $name = mb_ereg_replace('[-]+', '-', $name); $parts = pathinfo($name); if (empty($name) || empty($parts['extension'])) < $error = 'Недопустимый тип файла'; >elseif (!empty($allow) && !in_array(strtolower($parts['extension']), $allow)) < $error = 'Недопустимый тип файла'; >elseif (!empty($deny) && in_array(strtolower($parts['extension']), $deny)) < $error = 'Недопустимый тип файла'; >else < // Перемещаем файл в директорию. if (move_uploaded_file($file['tmp_name'], $path . $name)) < // Далее можно сохранить название файла в БД и т.п. $success = 'Файл «' . $name . '» успешно загружен.
'; > else < $error = 'Не удалось загрузить файл.'; >> > > // Вывод сообщения о результате загрузки. if (!empty($error)) < $error = '' . $error . '
'; > $data = array( 'error' => $error, 'success' => $success, ); header('Content-Type: application/json'); echo json_encode($data, JSON_UNESCAPED_UNICODE); exit();

Источник

Использование Объектов FormData

Объект FormData позволяет создать набор пар ключ/значение и передать их, используя XMLHttpRequest. Объект FormData предназначен для передачи данных форм, однако может быть использован для передачи пар ключ/значение независимо от форм. Данные передаются в том же формате, как и данные, передаваемые методом submit() формы, с установленной кодировкой enctype=»multipart/form-data» .

Создание объекта FormData

Вы можете самостоятельно создать пустой объект FormData , наполнив его затем данными, используя его метод append() :

var formData = new FormData(); formData.append("username", "Groucho"); formData.append("accountnum", 123456); // число 123456 немедленно преобразуется в строку "123456" // Файл, выбранный пользователем formData.append("userfile", fileInputElement.files[0]); // JavaScript Blob объект var content = 'hey!'; // содержимое нового файла. var blob = new Blob([content],  type: "text/xml">); formData.append("webmasterfile", blob); var request = new XMLHttpRequest(); request.open("POST", "http://foo.com/submitform.php"); request.send(formData);

Примечание: Поля «userfile» и «webmasterfile» оба содержат файлы. Число, переданное полю «accountnum» немедленно преобразуется в строку. Преобразование осуществляется методом FormData.append() (Значение поля может быть Blob , File , или строкой: если значение не является ни Blob, ни File, то оно автоматически преобразуется в строку).

Данный пример показывает создание экземпляра FormData , содержащего поля «username», «accountnum», «userfile» и «webmasterfile». Экземпляр FormData затем отправляется при помощи метода send() объекта XMLHttpRequest . Поле «webmasterfile» является экземпляром класса Blob . Объект класса Blob является файлом-подобным объектом, содержащим «сырые» данные. Определение данных как Blob не является обязательным в нативном javascript. Интерфейс File базируется на Blob , наследуя его функциональность и расширяя его для поддержки файлов в ОС пользователя. Для создания объектов класса Blob используйте Blob() constructor .

Получение объекта FormData из HTML формы

Для создания объекта FormDatа , содержащего данные существующей формы ( ) передайте форму в качестве аргумента при создании объекта FormData:

**Примечание:**FormData будет использовать только те поля ввода, которые используют атрибут name.

var formData = new FormData(someFormElement);

var formElement = document.querySelector("form"); var request = new XMLHttpRequest(); request.open("POST", "submitform.php"); request.send(new FormData(formElement));

Вы так же можете добавить дополнительные данные в объект FormData после его создания и до отправки данных:

var formElement = document.querySelector("form"); var formData = new FormData(formElement); var request = new XMLHttpRequest(); request.open("POST", "submitform.php"); formData.append("serialnumber", serialNumber++); request.send(formData);

Такой приём позволяет включать в форму дополнительную информацию, которая, например, не нуждается в демонстрации пользователю.

Отправка файлов при помощи объекта FormData

Вы так же можете отправлять файлы при помощи FormData . Просто включите с типом file в форму.

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> div>div>

Затем вы сможете отправить выбранный файл следующим образом:

var form = document.forms.namedItem("fileinfo"); form.addEventListener('submit', function(ev)  var oOutput = document.querySelector("div"), oData = new FormData(form); oData.append("CustomField", "This is some extra data"); var oReq = new XMLHttpRequest(); oReq.open("POST", "stash.php", true); oReq.onload = function(oEvent)  if (oReq.status == 200)  oOutput.innerHTML = "Uploaded!"; > else  oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.
"; > >; oReq.send(oData); ev.preventDefault(); >, false);

Примечание: Если для формы указан атрибут method , то будет использован именно этот метод для отправки данных на сервер, а не метод, указанный в вызове open()

Вы так же можете добавить File или Blob непосредственно к объекту FormData :

.append("myfile", myBlob, "filename.txt");

Метод append() принимает 3й опциональный параметр — название файла, которое добавляется в заголовок Content-Disposition при отправке на сервер. Если название файла не указано (или данный параметр не поддерживается) используется имя «blob».

Вы так же можете использовать FormData с jQuery:

var fd = new FormData(document.querySelector("form")); fd.append("CustomField", "This is some extra data"); $.ajax( url: "stash.php", type: "POST", data: fd, processData: false, // Сообщить jQuery не передавать эти данные contentType: false // Сообщить jQuery не передавать тип контента >);

Отправка форм и файлов при помощи AJAX без использования объекта FormData

Если вы заинтересованы в отправке форм и файлов при помощи AJAX без использования FormData, прочитайте /ru/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files