jQuery jquery表单插件文件上传
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2302344/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery form plugin file upload
提问by mehmet6parmak
i have a problem with jquery form plugin. I try to upload a file asynchronously but it does not submit the form. html markup and javascript code are like below
我有 jquery 表单插件的问题。我尝试异步上传文件，但没有提交表单。html 标记和 javascript 代码如下
<form id="fileUploadForm" method="post" action="Default.aspx" enctype="multipart/form-data">
<input type="text" name="filename" />
<input type="file" id="postedFile" name="postedFile" />
<input type="button" value="Submit" onclick="UploadFile();" />
</form>
$(document).ready(function() {
$('#fileUploadForm').ajaxForm();
});
function UploadFile() {
var options =
{
url:"Default.aspx",
beforeSend: ShowRequest,
success: SubmitSuccesfull,
error:AjaxError
};
$("#fileUploadForm").ajaxSubmit(options);
return false;
}.
I have another test form it has only a textbox in it and it works fine. Also when i comment the input type="file"... line the above form works fine too. What is the problem with input type file? Any Idea?
我有另一个测试表单，它只有一个文本框，并且工作正常。另外，当我评论 input type="file"... 行时，上面的表单也可以正常工作。输入类型文件有什么问题？任何的想法？
回答by Nick Craver
In short:
简而言之：
<input type="file" />
Cannot be submitted via ajax, it has to be a full postback. Traditionally you use an iFrame for this if you want AJAX style behavior. I've used a few solutions to this, without knowing what platform you're on, SWFUploadis usually a good option.
不能通过ajax提交，它必须是一个完整的回发。传统上，如果您想要 AJAX 样式的行为，则为此使用 iFrame。我为此使用了一些解决方案，但不知道您在哪个平台上，SWFUpload 通常是一个不错的选择。
Here's a full document example of a fix:
这是修复的完整文档示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="Javascript/jquery-1.3.2.js"></script>
<script type="text/javascript" src="Javascript/jquery.form.js"></script>
<script type="text/javascript">
$(function() {
$('#fileUploadForm').ajaxForm({
beforeSubmit: ShowRequest,
success: SubmitSuccesful,
error: AjaxError
});
});
function ShowRequest(formData, jqForm, options) {
var queryString = $.param(formData);
alert('BeforeSend method: \n\nAbout to submit: \n\n' + queryString);
return true;
}
function AjaxError() {
alert("An AJAX error occured.");
}
function SubmitSuccesful(responseText, statusText) {
alert("SuccesMethod:\n\n" + responseText);
}
</script>
</head>
<body>
<form id="fileUploadForm" method="POST" action="Default.aspx" enctype="multipart/form-data">
<input type="text" name="filename" />
<input type="file" id="postedFile" name="postedFile" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
