Могу ли я использовать следующий код jQuery для загрузки файла методом POST запроса ajax?
$.ajax({
type: "POST",
timeout: 50000,
url: url,
data: dataString,
success: function (data) {
alert('success');
return false;
}
});
Если это возможно, мне нужно заполнить data
часть? Это правильный путь? Я только POST файл на стороне сервера.
Я гуглил, но то, что я нашел, было плагином, а в моем плане я не хочу его использовать. По крайней мере, на данный момент.
javascript
jquery
ajax
post
file-upload
Уилли
источник
источник
Ответы:
Загрузка файла является
невозможна через AJAX.Вы можете загрузить файл, не обновляя страницу с помощью
IFrame
.Вы можете проверить более подробную информацию здесь .
ОБНОВИТЬ
С XHR2 поддерживается загрузка файлов через AJAX. Например, через
FormData
объект, но, к сожалению, он не поддерживается всеми / старыми браузерами.FormData
Поддержка начинается со следующих версий настольных браузеров.Для более подробной информации смотрите ссылку MDN .
источник
enctype
значение"form/multipart"
!Iframes больше не нужны для загрузки файлов через ajax. Я недавно сделал это сам. Проверьте эти страницы:
Использование загрузки файлов HTML5 с AJAX и jQuery
http://dev.w3.org/2006/webapi/FileAPI/#FileReader-interface
Обновил ответ и убрал его. Используйте функцию getSize, чтобы проверить размер, или используйте функцию getType, чтобы проверить типы. Добавлен прогрессбар html и css код.
Как использовать класс Upload
HTML-код Progressbar
Прогрессбар css код
источник
writer(catchFile)
. Что такоеwriter()
?Возможна запись в Ajax и загрузка файла. Я использую
jQuery $.ajax
функцию для загрузки моих файлов. Я пытался использовать объект XHR, но не смог получить результаты на стороне сервера с PHP.Как видите, вы должны создать объект FormData, пустой или из (сериализованный? -
$('#yourForm').serialize())
существующая форма), а затем прикрепить входной файл.Вот дополнительная информация: - Как загрузить файл, используя jQuery.ajax и FormData - Загрузка файлов с помощью jQuery, объект FormData предоставляется без имени файла, запрос GET
Для процесса PHP вы можете использовать что-то вроде этого:
источник
formData.append('file', $('#file')[0].files[0]);
возвращаетсяundefined
и неconsole.log(formData)
имеет ничего, кроме_proto_
var formData = new FormData(); formData.append('file', document.getElementById('file').files[0]); $.ajax({ url : $("form[name='uploadPhoto']").attr("action"), type : 'POST', data : formData, processData: false, // tell jQuery not to process the data contentType: false, // tell jQuery not to set contentType success : function(data) { console.log(data); alert(data); } });
Простая форма загрузки
источник
Я опаздываю на это, но я искал решение для загрузки изображений на основе ajax, и ответ, который я искал, был немного разбросан по всему посту. Решение, на котором я остановился, включало объект FormData. Я собрал основную форму кода, который я собрал. Вы можете увидеть, как это показывает, как добавить настраиваемое поле в форму с помощью fd.append (), а также как обрабатывать данные ответа, когда выполняется запрос ajax.
Загрузить HTML:
В случае, если вы работаете с php, вот способ обработать загрузку, который включает использование обоих пользовательских полей, показанных в приведенном выше html.
upload.php
источник
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https,
почему это так, сэр, яfile://
, а не через веб-сервер? Кроме того, не рекомендуется просто слепо копировать и вставлять код без предварительного понимания. Я бы порекомендовал вам построчно пройти код, чтобы понять, что происходит, прежде чем вводить код в действие.Загрузка AJAX действительно возможна с
XMLHttpRequest()
. Нет необходимости в фреймах. Процесс загрузки может быть показан.Подробности см. В ответе на вопрос https://stackoverflow.com/a/4943774/873282 на вопрос о прогрессе загрузки jQuery и загрузке файла AJAX .
источник
Вот как я получил это работает:
HTML
JS
PHP
источник
$('#file')[0].files[0]
что это какой-то странный обходной путь JS, не требующий надлежащего<form>
Если вы хотите сделать это так:
чем
https://github.com/lgersman/jquery.orangevolt-ampere/blob/master/src/jquery.upload.js
может быть вашим решением.
источник
Больше подробностей в моем блоге: http://blog.manki.in/2011/08/ajax-fie-upload.html .
источник
edit: примечание contentype и данные процесса. Вы можете просто использовать это для загрузки файлов через Ajax ...... отправка ввода не может быть вне элемента формы :)
источник
2019 обновление:
HTML
JS
views.py
источник
Используйте FormData. Это работает очень хорошо :-) ...
источник
Я реализовал выбор нескольких файлов с мгновенным предварительным просмотром и загрузкой после удаления ненужных файлов из предварительного просмотра через ajax.
Подробную документацию можно найти здесь: http://anasthecoder.blogspot.ae/2014/12/multi-file-select-preview-without.html
Демо: http://jsfiddle.net/anas/6v8Kz/7/embedded/result/
jsFiddle: http://jsfiddle.net/anas/6v8Kz/7/
Javascript:
источник
Я обработал их в простом коде. Вы можете скачать рабочую демо здесь
Для вашего случая это очень возможно. Я расскажу вам шаг за шагом, как вы можете загрузить файл на сервер, используя AJAX jquery.
Сначала давайте создадим файл HTML, чтобы добавить следующий элемент файла формы, как показано ниже.
Во-вторых, создайте файл jquery.js и добавьте следующий код для обработки отправки нашего файла на сервер.
Вот и все. Посмотреть больше
источник
Использование FormData - это путь, на который указывают многие ответы. Вот немного кода, который отлично подходит для этой цели. Я также согласен с комментарием о вложении блоков ajax для выполнения сложных обстоятельств. Включая e.PreventDefault (); по моему опыту делает код более кросс-браузер совместимым.
источник
Используя чистый JS это проще
Вот более развитый фрагмент с обработкой ошибок и дополнительной отправкой JSON
Показать фрагмент кода
источник
Да, вы можете, просто используйте javascript, чтобы получить файл, убедившись, что вы читаете файл как URL-адрес данных. Разберите материал перед base64, чтобы фактически получить данные, закодированные в base 64, а затем, если вы используете php или действительно какой-либо внутренний язык, вы можете декодировать данные base 64 и сохранить в файл, как показано ниже
Конечно, вы, вероятно, захотите провести некоторую проверку, например, проверить, с каким типом файла вы имеете дело, и тому подобное, но это идея.
источник
источник
Вы можете использовать метод ajaxSubmit следующим образом :), когда вы выбираете файл, который нужно загрузить на сервер, отправьте его на сервер :)
источник
чтобы загрузить файл, который пользователь отправил как часть формы, используя jquery, пожалуйста, следуйте приведенному ниже коду:
Затем отправьте объект данных формы на сервер.
Мы также можем добавить файл или блоб непосредственно к объекту FormData.
источник
Если вы хотите загрузить файл с помощью AJAX, вот код, который вы можете использовать для загрузки файла.
Вот HTML-код для загрузки файла
источник
Чтобы получить все входные данные формы, включая type = "file", вам нужно использовать объект FormData . вы сможете увидеть содержимое formData в отладчике -> сеть -> заголовки после того, как отправите форму.
источник
источник
Вот идея, о которой я думал:
Иметь форму, в которой вы перемещаете элемент INPUT: File в.
Результат будет опубликован во фрейме, а затем вы можете просто отправить извлеченные данные на нужный уровень тегу изображения, например:
и страница загружается.
Я считаю, что это работает для меня, и в зависимости вы можете сделать что-то вроде:
источник