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

时间:2010-12-02 00:20:20

标签: jquery file-upload jquery-forms-plugin

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

我目前正在使用jQuery Form Plugin + Validation,效果很好。

但我想要完成的是,

1,上传临时文件以便在下一步操作

2,上传文件后,正常提交表格,转到下一步(新文件)。

所以我只是100%肯定如何实现这一点,我目前使用此代码。

$("#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>

1 个答案:

答案 0 :(得分:1)

简单回答:您无法通过AJAX上传文件。您必须将表单提交到另一页,然后从那里开始。

更多:技术上你可以,但不是这样的。它涉及创建一个iframe并通过它提交文件。无论哪种方式,您都必须回帖,您不能使用XMLHttpRequest对象。

如果您执行quick google search,则可以找到为您执行此操作的插件。