jquery表单插件文件上传 [英] Jquery form plugin file upload
问题描述
我尝试异步上传文件，但不提交表单。
html标记和javascript代码如下
< form id =fileUploadFormmethod =postaction =Default.aspxenctype =multipart / form-data>
< input type =textname =filename/>
< input type =fileid =postedFilename =postingFile/>
< input type =buttonvalue =Submitonclick =UploadFile（）; />
< / form>
$ b $（document）.ready（function（）{
$（'＃fileUploadForm'）。ajaxForm（）;
}）;
函数UploadFile（）{
var options =
{
url：Default.aspx，
beforeSend：ShowRequest，
成功：SubmitSuccesfull，
错误：AjaxError
};
$（＃fileUploadForm）。ajaxSubmit（options）;
返回false;
}。
我有另一个测试表单，它只有一个文本框，它工作正常。另外，当我评论输入类型=文件...行上面的表单工作正常。输入类型文件有什么问题？
任何想法？
简单地说：
< input type =file/>
无法通过ajax提交，它必须是完整的回传。传统上，如果你想要AJAX风格的行为，你可以使用iFrame。我已经使用了一些解决方案，不知道你在哪个平台上， SWFUpload 通常是很好的
以下是一个完整的文档示例：
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< title>< / title>
< script type =text / javascriptsrc =Javascript / jquery-1.3.2.js>< / script>
< script type =text / javascriptsrc =Javascript / jquery.form.js>< / script>
< script type =text / javascript>
$（$ {
$（'＃fileUploadForm'）。ajaxForm（{
beforeSubmit：ShowRequest，
成功：SubmitSuccesful，
错误：AjaxError
}）;
}）;
函数ShowRequest（formData，jqForm，options）{
var queryString = $ .param（formData）;
alert（'BeforeSend method：\\\
\\\
关于提交：\\\
\\\
'+ queryString）;
返回true;
函数AjaxError（）{
alert（发生AJAX错误）;
函数SubmitSuccesful（responseText，statusText）{
alert（SuccesMethod：\\\
\\\
+ responseText）;
}
< / script>
< / head>
< body>
< form id =fileUploadFormmethod =POSTaction =Default.aspxenctype =multipart / form-data>
< input type =textname =filename/>
< input type =fileid =postedFilename =postingFile/>
< input type =submitvalue =Submit/>
< / form>
< / body>
< / html>
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
<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?
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, SWFUpload is usually a good option.
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>
这篇关于jquery表单插件文件上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
