jQuery上传文件,然后正常提交表单
我希望我能理解这个问题。
我目前正在使用 jQuery 表单插件 + 验证,效果很好。
但我想要完成的是,
1,上传一个临时文件以便在下一步中进行操作
2,文件上传后,正常提交表单以进入下一步(一个新文件)。
所以我百分百确定如何实现这一点,我目前使用这段代码。
$("#fileUpload").validate({
submitHandler: function(form) {
$(form).ajaxSubmit({
beforeSubmit: function() {
$('input').attr("disabled", true);
$("#uploadResponse").show('slow');
$('#uploadResponse').append("<img src='images/icons/ajax-loader.gif' />");
},
success: function(responseText, statusText, xhr, form) {
$('input[type=submit]').attr("disabled", false);
$('input[type=file]').attr("disabled", true);
},
error: function (responseText, statusText, xhr, form) {
alert("Oops... Looks like there has been a problem.");
}
});
}
});
对于我的表格
<div id="uploadResponse" style="display: none;"> File Uploading, this can take a few minutes... </div>
<form action='page.ImportContacts2.php' name="mergeCSV" id="fileUpload" method="post" enctype="multipart/form-data" >
File: <input id="getCSV" name="getCSV" class="required" type="file">
Delimiter Type:
<select id="delimiter" name="delimiter">
<option value="1" selected="selected">Comma</option>
<option value="2">Tab</option>
</select>
Enclosure Type:
<select id="enclosure" name="enclosure">
<option value="1" selected="selected">Double Quotes (")</option>
<option value="2">Single Quotes (\')</option>
</select>
<button type="submit" name="SubmitCSV" id="SubmitCSV" value="SubmitCSV" class="csvCol3Button buttonSmall">Upload File</button>
</form>
I hope that I can make sense of this question.
I currently am using jQuery Form Plugin + Validation which works great.
But what I am trying to accomplish is,
1, Upload a temp-file for manipulating in the next step
2, Once file has been uploaded, submit the form normally to go to the next step (a new file).
So i'm just a 100% sure how to accomplish that, I currently use this code.
$("#fileUpload").validate({
submitHandler: function(form) {
$(form).ajaxSubmit({
beforeSubmit: function() {
$('input').attr("disabled", true);
$("#uploadResponse").show('slow');
$('#uploadResponse').append("<img src='images/icons/ajax-loader.gif' />");
},
success: function(responseText, statusText, xhr, form) {
$('input[type=submit]').attr("disabled", false);
$('input[type=file]').attr("disabled", true);
},
error: function (responseText, statusText, xhr, form) {
alert("Oops... Looks like there has been a problem.");
}
});
}
});
And for my Form
<div id="uploadResponse" style="display: none;"> File Uploading, this can take a few minutes... </div>
<form action='page.ImportContacts2.php' name="mergeCSV" id="fileUpload" method="post" enctype="multipart/form-data" >
File: <input id="getCSV" name="getCSV" class="required" type="file">
Delimiter Type:
<select id="delimiter" name="delimiter">
<option value="1" selected="selected">Comma</option>
<option value="2">Tab</option>
</select>
Enclosure Type:
<select id="enclosure" name="enclosure">
<option value="1" selected="selected">Double Quotes (")</option>
<option value="2">Single Quotes (\')</option>
</select>
<button type="submit" name="SubmitCSV" id="SubmitCSV" value="SubmitCSV" class="csvCol3Button buttonSmall">Upload File</button>
</form>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
简单回答:您无法通过 AJAX 上传文件。您必须将表单提交到另一个页面,然后从那里开始。
更多:从技术上讲你可以,但不是这样的。它涉及创建一个 iframe 并通过它提交文件。不管怎样,你都必须有一个回发,你不能使用 XMLHttpRequest 对象。
如果您执行快速 Google 搜索,您可以找到为您执行此操作的插件。
Simple answer: You can't upload files through AJAX. You'll have to submit the form to another page and then go from there.
More: Technically you can, but not like this. It involves creating an iframe and submitting the files through that. Either way, you have to have a post back, you can't use the XMLHttpRequest object.
If you do a quick google search, you can find plug-ins that do this for you.