Будь то PHP или другие скрипты на стороне сервера, они предоставляют функцию загрузки файлов, которая относительно проста в реализации. Используя JavaScript для сотрудничества, может быть реализована загрузка файлов AJAX. Хотя сам jquery не предоставляет такие упрощенные функции, есть много плагинов, которые могут быть реализованы. Среди них AjaxFileUpload.js, предоставленный Phpletter.com, является легким плагином, а метод написания очень похож на глобальный метод $ .post (), предоставляемый jQuery, и прост в использовании.
Однако этот плагин слишком упрощен. В дополнение к предоставлению пути к загрузке файлов, он не может передавать дополнительные значения на фоновый сервер. Итак, я изменил скрипт и добавил параметр объекта данных.
1. Принцип
Я использую PHP в качестве скрипта на стороне сервера здесь. Почти каждая книга с меньшим количеством PHP будет упомянуть, как использовать метод move_uploaded_file () для загрузки файлов, я не буду вдаваться в подробности здесь. Я хочу сказать, что использовать принцип загрузки Ajax.
Поскольку я использовал библиотеку jQuery, когда я думаю о Ajax, моя первая реакция - попробовать метод $ .post (), использовать каждый селектор, чтобы получить значение значения в поле файла файла, а затем отправить его на фоновый сервер. Конечно, оказалось, что это было невозможно. (Из -за этой проблемы я также проверил много информации и предоставил много сценариев, таких как ASP в Интернете. Я действительно не знаю, что сказать.)
Вернувшись к теме, на самом деле не сложно загрузить Ajax, и есть много методов. Плагин ajaxfileupload.js для Phpletter.com, упомянутый в этой статье, является способом использования iframes. Это также общий метод при загрузке без обновления страницы без использования сценариев JavaScript. (Этот метод используется для написания журналов в фоне Bo-Blog этого блога)
Плагин ajaxfileupload.js также очень прост. Сначала он использует селектор jQuery для получения значения пути файла в поле загрузки файла, а затем динамически создать iframe и создать новый флажок файла в файле, предоставляя метод сообщения для отправки его на фон. Наконец, вернитесь к результатам на стойке регистрации.
2. Используйте
Использование плагина AjaxFileUpload.js очень просто.
HTML -код на стойке регистрации похож:
<script type = "text/javascript"> $ (#buttonuplod) .click (function () {$. // Возврат Тип данных: Текст, XML, JSON, HTML, SCRITP, JSONP Пять успешных: функция (data) {alert (data.file_infor); ajaxfileupload (); "> upload </button>Фон сценарий doajaxfileupload.php:
<? php $ upfilepath = "../attachment/";,,, $ok=@move_uploaded_file( 000 if ($ ok === false) {echo json_encode ('file_infor' => 'upload fail'); } else {echo json_encode ('file_infor' => 'Загружено успешно'); }?>Для тестирования вы можете сохранить прошедшее значение переменной аналогично следующим:
$ file_info = var_export ($ _ files, true);
$ ok = file_put_contents ("../ Attachment/file_info.txt", $ file_info);
if ($ ok) exit (json_encode ('file_infor' => 'Загружено успешно'));
exit (json_encode ('file_infor' => 'upload fail'));
※ Уведомление
Обратите внимание на отметки в поле файла кода HTML:
1. id = 'img' используется для идентификации FileElementId: «IMG» плагина ajaxfileupload.js. Селектор jQuery будет использовать эту строку для получения значения текстового поля;
2. name = 'img' используется для чтения загруженных данных файла через $ _files ['img'] при отправке на фоновый скрипт через сообщение. Если это значение недоступно, переменная $ _files пуста;
Следовательно, оба эти два значения являются незаменимыми и не могут быть запутаны.
3. Поддерживать дополнительные параметры
Иногда нам нужно обрабатывать загруженные файлы на основе определенных переменных в фоновом режиме. Например, обновите файл. В настоящее время вам нужно передать некоторые дополнительные параметры на одну и ту же этап. Итак, я изменил плагин ajaxfileupload.js:
addOtherRequestStOform: function (form, data) {// добавить дополнительный параметр var riginalelement = $ ('<input type = "hidden" name = "" value = "">'); for (var key in data) {name = key; value = data [Key]; var cloneElement = riginalElement.clone (); cloneelement.attr ({'name': name, 'value': value}); $ (клониэлемент) .appendto (форма); } return form;}, ajaxfileupload: function (s) {// todo внедряет глобальные настройки, позволяя клиенту изменять их для всех запросов, а не только тайм -аут s = jquery.extend ({}, jquery.ajaxsettings, s); var id = new date (). gettime () var form = jQuery.createUploadform (id, s.filelementId); if (s.data) form = jquery.addotherrequeststoform (form, s.data); var io = jquery.createuploadiframe (id, s.secureuri);Красная маркировка - это то, что я добавил. Таким образом, я могу передать дополнительные параметры в разделе HTML на переднем плане через код, как ниже:
URL: 'doajaxfileupload.php', // сервер, на котором вы обрабатываете загрузку файлов
Secureuri: false, // значение идентификатора, соответствующее файлу в коде обработки страницы
Data: {'test': 'test', 'ok': 'ok'}, // передаваем в объекте, а часть содержимого может ввести значение переменной javaScript
FileElementId: 'img',
Сценарий обработки фоновой обработки:
array_push ($ _ files, $ _ request); $ file_info = var_export ($ _ files, true); $ ok = file_put_contents ("../ atchetment/file_info.txt", $ file_info); if ($ ok) exit (json_encode ('file_infor' => 'uclidaly'); if ($ ok); exit (json_encode ('file_infor' => 'upload fail'));Можно видеть, что принцип очень прост, то есть добавить дополнительное содержание объекта данных в форму под iframe, передать его на фоновый скрипт PHP и получить эти значения с такими переменными, как $ _Request.
Содержание File_info.txt, сохраняемое на фоновом выходе, следующим образом:
множество (
'file' =>
множество (
'name' => 'firefox-java.txt',
'type' => 'text/plain',
'tmp_name' => 'd: //tools//xampp//tmp//phped45.tmp',
'error' => 0,
'size' => 250,
),
0 =>
множество (
'test' => 'test',
'ok' => 'ok',
'Phpsessid' => 'e379fd4fb2abca6e802a1302805a5535',
),
)
ajaxfileupload.js:
jQuery.extend ({createUploadiframe: function (id, uri) {// create framevar frameid = 'juploadframe' + id; if (window.activexobject) {var io = document.createElement ('<iframe id = "' + famyid + '" name = "' + frameid + '" />'); 'boolean') {io.src = 'javascript: false';} else if (typeof uri == 'string') {io.src = uri;}} else {var io = document.createElement ('iframe'); io.id = frameid; io.name =} io.style. «Абсолютно»; action = "method =" name = "' + formid +'" id = "' + formid +" " $ (OldElement) .appendto (форма); $ (form) .css ('top', '-1200px'); $ (form) .css ('left', '-1200px'); $ (форма) .appendto ('body'); вернуть форму; }, AddOtherRequestStOform: function (form, data) {// добавить дополнительный параметр var riginelement = $ ('<input type = "hidden" name = "" value = "">'); for (var key in data) {name = key; value = data [Key]; var cloneElement = originalElement.clone (); cloneelement.attr ({'name': name, 'value': value}); $ (клониэлемент) .appendto (форма); } вернуть форму; }, ajaxfileupload: function (s) {// todo внедряет глобальные настройки, позволяя клиенту изменять их для всех запросов, а не только тайм -аут s = jQuery.extend ({}, jQuery.ajaxSettings, s); var id = new date (). gettime () var form = jQuery.createUploadform (id, s.filelementId); if (s.data) form = jquery.addotherrequeststoform (form, s.data); var io = jquery.createuploadiframe (id, s.secureuri); var frameId = 'juploadframe' + id; var formid = 'juploadform' + id; // Смотреть новый набор запросов if (s.global &&! Jquery.active ++) {jquery.event.trigger ("ajaxstart"); } var requestDone = false; // Создать объект запроса var xml = {} if (s.global) jquery.event.trigger ("ajaxsend", [xml, s]); // ждать ответа вернуть var uploadcallback = function (istimeout) {var io = document.getElementById (frameId); try {if (io.contentWindow) {xml.responsetext = io.contentwindow.document.body? Io.contentwindow.document.body.innerhtml. xml.responsexml = io.contentwindow.document.xmldocument? io.contentwindow.document.xmldocument: io.contentwindow.document; } else if (io.contentdocument) {xml.responsetext = io.contentdocument.document.body? io.contentdocument.document.body.innerhtml: null; xml.responsexml = io.contentdocument.document.xmldocument? io.contentdocument.document.xmldocument: io.contentdocument.document; }} catch (e) {jquery.handleerror (s, xml, null, e); } if (xml || istimeout == "timeout") {requestDone = true; var status; try {status = istimeout! = "Timeout"? «Успех»: «Ошибка»; // Убедитесь, что запрос был успешным или notmodifififif (status! = "error") {// обработать данные (запускает XML через httpdata независимо от обратного вызова) var data = jQuery.uploadhttpdata (xml, s.datatype); // Если был указан локальный обратный вызов, запустите его и передайте его dataif (s.success) s.success (data, status); // запустить глобальный обратный вызов (s.global) jquery.event.trigger ("ajaxsuccess", [xml, s]);} elsejquery.handleerr (s, xml, статус); «Ошибка»; jQuery.HandleerRor (s, xml, status, e);} // запрос был завершен (S.Global) jQuery.event.Trigger ("ajaxComplete", [xml, s]); // Обработка глобального AJAX Counterif (S.Global &&! // результат процесса (s.complete) s.complete (xml, status); jquery (io) .unbind () settimeout (function () {try {$ (io) .Remove (); $ (form) .Remove ();} catch (e) {jquery.handleerror (s, xml, null, e);}}, 100) xml = null} // // / / aut -aemout a (s.}}} null} ////muout a (s. s.time> 0) 0). {setTimeout (function () {// Проверьте, чтобы увидеть, будет ли запрос по -прежнему происходить (! запрос, что uploadCallback ("Timeout");}, S.TimeOut); } try {// var io = $ ('#' + crameId); var form = $ ('#' + formid); $ (форма) .attr ('action', s.url); $ (form) .attr ('method', 'post'); $ (form) .attr ('target', frameid); if (form.encoding) {form.encoding = 'Multipart/Form-Data'; } else {form.enctype = 'multipart/form-data';} $ (form) .submit (); } catch (e) {jquery.handleerror (s, xml, null, e); } if (window.attachevent) {document.getElementById (frameId) .attachevent ('Onload', uploadCallback); } else {document.getElementById (frameID) .AddeventListener ('load', uploadCallback, false); } return {abort: function () {}}; }, uploadhttpdata: function (r, type) {var data =! type; data = type == "xml" || данные ? R.Responsexml: R.ResponseText; // Если тип - «скрипт», оцените его в глобальном контексте if (type == "script") jQuery.globaleval (data); // Получить объект JavaScript, если JSON используется. if (type == "json") eval ("data =" + data); // Оценить сценарии в HTML if (type == "html") jQuery ("<div>"). html (data) .evalscripts (); // alert ($ ('param', data). вернуть данные; }})