jQuery上传文件,然后正常提交表单

发布于 2024-10-05 16:40:30 字数 2038 浏览 2 评论 0原文

我希望我能理解这个问题。

我目前正在使用 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

西瓜 2024-10-12 16:40:30

简单回答:您无法通过 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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文