现在我想实现图片上传,而不使用任何插件.
我的上传表单看起来像这样
<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;
});
如果我打开firebug,我可以看到ajax()方法做简单的表单(不是多部分),POST内容是空的
是否可以使用jQuery ajax()方法进行文件上传,还是以其他方式进行上传？
非常感谢你
解决方法
jQuery ajax不支持文件上传并手动实现这一点可能很麻烦.我建议你看看jQuery
form插件.
当然,你可以随时查看插件的源代码,看看如果你不想包含它,它是如何实现的(它使用一个隐藏的iFrame,因为文件不能用AJAX上传),但是为什么要这样做呢？它直接:-)
以下是您的代码可能如下所示的示例：
$(function() {
$('#uploadform').ajaxForm();
});
也使上传按钮一个提交按钮：
<button class="btn-bl" id="upComplete" type="submit">
<span>Upload</span>
</button>
