由于jQuery的Form Data（）和Ajax，文件提交失败

Question

I have created a form to upload two files - questionpaper and the key. 我创建了一个表格来上传两个文件- questionpaper和密钥。 But the Ajax request is not working in an intended manner. 但是Ajax请求无法按预期方式工作。 I have been trying and trying but unable to figure out the bug. 我一直在尝试，但是无法找出错误。 Please help. 请帮忙。 Here is my form. 这是我的表格。

<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>

Here goes the javascript part. 这里是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

to upload files using Ajax or jQuery , you need to use hidden iframe 要使用Ajax或jQuery上传文件，您需要使用隐藏的iframe

this is full example for ajaxfileupload.js class allow you to use upload form . 这是ajaxfileupload.js类的完整示例，允许您使用上载表单。

or you could create simple function to submit your form into hidden iframe then get the iframe body html or text using jQuery as response . 或者您可以创建简单的函数以将表单提交到隐藏的iframe然后使用jQuery作为响应获取iframe正文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 个解决方案

解决方案1
0 2014-08-09 07:21:12

由于jQuery的Form Data（）和Ajax，文件提交失败

问题描述

1 个解决方案

解决方案1 0 2014-08-09 07:21:12

解决方案1
0 2014-08-09 07:21:12