jQuery上传文件使用jQuery的ajax方法（没有插件）
目前我想在不使用任何插件的情况下实现图片上传。
我的上传表单看起来像这样
我的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（不是多部分）而POST内容是空的
是否可以使用jQuery ajax（）方法上传文件，还是应该以其他方式执行此操作？
非常感谢你
jQuery ajax不支持文件上传，手动实现这可能很麻烦。 我建议你看一下jQuery 表单插件。
当然你可以随时查看插件的源代码，看看它是如何实现的，如果你不想包含它（它使用隐藏的iFrame，因为文件不能用AJAX上传），但为什么要这样做，如果你可以使用它直接:-)
以下是您的代码可能如下所示的示例：
$(function() { $('#uploadform').ajaxForm(); });
还可以使上传按钮成为提交按钮：
AJAX或更合适的XMLHttpRequest还不支持文件上传。 有一些解决方法，例如通过上传，但它相当麻烦。 您的时间将更好地用于构建应用程序，而不是重新发明这些解决方案。
但是如果你对内部的工作原理感到好奇，那么请随时查看一些提供此function的插件的源代码。 可以在此链接找到一个非常简单的解释 – http://www.openjs.com/articles/ajax/ajax_file_upload/
基本上，您将表单target更改为在提交，从而避免页面刷新，并模拟AJAX，它不是真正的，但是谁在乎 – 最终用户无法分辨。
基于iframe的上传的最小示例可能如下所示：
$("#upComplete").click(function() { // create a dynamic iframe, or use existing one var iframe = $("
请注意，这不会执行任何响应处理，而只是将图片发送到服务器。 要处理响应，必须为iframe的load事件编写回调。
实际上有一种方法可以使用带有Firefox> 3和Chrome的ajax（xmlhttp）上传文件，也可以在不使用表单和iframe的情况下上传多个文件。 实际上我正在制作一个jQuery插件来做这个，很快我就会发布它。 这是一个简单的例子：
var file=$('').get(0).files[0]; function asyncupload(file) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if ((xhr.status >= 200 && xhr.status <= 200) || xhr.status == 304) { //alert(xhr.responseText); } } }; xhr.upload.onload=function(e) { $('div#axprogress').progressbar("option", "value", 100);; }; xhr.upload.onprogress=function(e) { if (e.lengthComputable) { var perc = Math.round((e.loaded * 100) / e.total); $('div#axprogress').progressbar("option", "value", perc); } }; xhr.open("POST", "upload.php?filename="+file.name,true); xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); xhr.setRequestHeader("X-File-Name", encodeURIComponent(file.name)); xhr.send(file); return xhr; }
要获取服务器端的文件，比如php，必须为upload.php执行此操作：
$input = fopen("php://input", "r"); $temp = tmpfile(); $realSize = stream_copy_to_stream($input, $temp); fclose($input); if ($realSize != $this->getSize()) { return false; } $target = fopen($_GET['filename'], "w"); fseek($temp, 0, SEEK_SET); stream_copy_to_stream($temp, $target); fclose($target);
这是一个简单的想法示例，而不是完整的工作脚本。 希望这可以帮助。 有关详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
虽然您可以自己创建一个multipart/form-data请求主体以包含文件上载字段，但它无法帮助您，因为您无法从文件上载字段中读取客户端文件。
（除了使用FileList接口，但目前只支持Firefox。）
$("#btncatsave").click(function () { var Name = $("#txtName").val(); var formData = new FormData(); var totalFiles = document.getElementById("picfile").files.length; var file = document.getElementById("picfile").files[0]; formData.append("FileUpload", file); formData.append("Name", Name); $.ajax({ type: "POST", url: '/Category_Subcategory/Save_Category', data: formData, dataType: 'json', contentType: false, processData: false, success: function (msg) { alert(msg); }, error: function (error) { alert("errror"); } }); }); [HttpPost] public ActionResult Save_Category() { string Name=Request.Form[1]; if (Request.Files.Count > 0) { HttpPostedFileBase file = Request.Files[0]; } }