файл загрузки jQuery с помощью ajax метода jQuery (без плагинов)
В настоящее время я хочу реализовать загрузку изображения, не используя плагинов.
Моя форма загрузки похожа на это
<form action="/Member/UploadPicture" enctype="multipart/form-data" id="uploadform" method="post">
<span>
<div class="upload" id="imgUpl">
<h3>Upload profile picture</h3>
<div class="clear5"></div>
<input type="file" name="file" id="file" />
<button class="btn-bl" id="upComplete"><span>Upload</span></button>
</div>
</span>
</form>
И мой код jQuery:
$('#upComplete').click(function () {
$('#up').hide();
$('#upRes').show();
var form = $("#uploadform");
$.ajax({
type: "POST",
url: "/Member/UploadPicture",
data: form.serialize(),
success: function (data) {
alert(data);
}
});
$.fancybox.close();
return false;
});
Если я открываю поджигателя, я вижу, что ajax () метод делает простое сообщение формы (не многослойный), и содержание POST пусто
Действительно ли возможно сделать загрузку файлов с помощью jQuery ajax () метод, или я должен сделать это каким-либо другим способом?
Большое спасибо
3 ответа
jQuery ajax не поддерживает загрузку файлов, и реализация этого вручную может быть обременительной. Я бы посоветовал вам взглянуть на плагин jQuery form .
Конечно, вы всегда можете проверить исходный код плагина, чтобы увидеть, как он реализован, если вы не хотите его включать (он использует скрытый iFrame, поскольку файлы не могут быть загружены с помощью AJAX), но зачем это делать, если вы можете использовать его напрямую: -)
Вот пример того, как может выглядеть ваш код:
$(function() {
$('#uploadform').ajaxForm();
});
также сделайте кнопку загрузки кнопкой отправки:
<button class="btn-bl" id="upComplete" type="submit">
<span>Upload</span>
</button>
AJAX или, точнее, XMLHttpRequest пока не поддерживает загрузку файлов. Есть обходные пути, такие как загрузка через