Question

我创建了一个表单来上传两个文件 - questionpaper和密钥。但Ajax请求无法以预期的方式工作。我一直在尝试尝试，但无法找出错误。请帮忙。这是我的表格。

<form name="facform" id="facform" data-abide="ajax" enctype="multipart/form-data">
 <fieldset>
  <legend> All fields are required </legend>        
  <div class="row">
    <div class="large-3 medium-3 columns">
      <label> <b> Upload Question Paper </b> </label>
      <input type="file" id="qfile" name="qfile" tabindex="7" required>
    </div>
    <div class="large-3 medium-3 columns end">
      <label><b> Upload Key </b></label>
      <input type="file"  id="kfile" name="kfile" tabindex="8" required>
    </div>
  </div>
 </fieldset>

  <div class="row">
    <div class="large-6 medium-6 columns">
      <label><img id="loadingimg" src="http://dev.cloudcell.co.uk/bin/loading.gif"/></label>    
      <input id="form-submit" type="submit" class="button tiny" value="Submit" />
    </div>
  </div>

</form>

这里是javascript部分。

<script>
//-----------------------//
$('#facform').on('valid.fndtn.abide', function() {

var fileInput = document.getElementById('facform');
var file = fileInput.files[0];
var formData = new FormData();
formData.append('qfile', file);
formData.append('kfile', file);

    var form_url = 'getfiles.php';

    $("#form-submit").hide();
    $("#loadingimg").show();
    $.ajax({
        url: form_url, 
        type: 'POST', 
        data: formdata,  
        processData: false,
        cache: false,
        success: function(returnhtml){
            $("#loadingimg").hide();   
            $("#facform").hide();
            $("#smsg").html(returnhtml);
            $("#facform")[0].reset();               
        }           

//-----------------------//     
});         
});             

 </script>

Answer 1

使用Ajax或jQuery上传文件，您需要使用隐藏的iframe

这是ajaxfileupload.js类的完整示例，允许您使用上传表单。

或者您可以创建简单的功能，将表单提交到隐藏的iframe，然后使用iframe作为回复获取jQuery正文html或文字。

<html>
  <head>
    <link href="http://www.phpletter.com/css/general.css" rel="stylesheet" type="text/css" media="screen">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="http://www.phpletter.com/contents/ajaxfileupload/ajaxfileupload.js"></script>
    <script type="text/javascript">
    function ajaxFileUpload()
    {
        $.ajaxFileUpload
        (
            {
                //YOUR URL TO RECEIVE THE FILE
                url: 'http://localhost/testing/postfile.php',
                secureuri:false,
                fileElementId:'fileToUpload',
                dataType: 'json',           
                success: function (data, status)
                {
                    if(typeof(data.error) != 'undefined')
                    {
                        if(data.error != '')
                        {
                            alert(data.error);
                        }else
                        {
                            alert(data.msg);
                        }
                    }
                },
                error: function (data, status, e)
                {
                    alert(data.error);
                    alert(e);
                }
            }
        )
        return false;
    }
    </script>
  </head>
  <body>
    <form name="form" action="" method="POST" enctype="multipart/form-data">
        <table cellpadding="0" cellspacing="0" class="tableForm">
            <thead>
                <tr>
                    <th>Ajax File Upload</th>
                </tr>
            </thead>
            <tbody> 
                <tr>
                    <td><input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input"></td>  
                </tr>
                <tr>
                    <td>Please select a file and click Upload button</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td><button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button></td>
                </tr>
            </tfoot>
        </table>
    </form>
  </body>
</html>

文件提交失败，使用jQuery的Form Data（）和Ajax

1 个答案: