Question

我尝试使用jQuery和ajax上传文件。我写了这个，但没有工作。我不能提交表格。我想上传文件而不刷新页面。单击按钮后，控制台日志中没有信息。

<form id="uploadForm" name="uploadForm" style="margin-bottom: 0px; float: left; padding-left: 10px;" enctype="multipart/form-data" action="">
    <div class="input-append">
    <input class="span3" id="filename" name="filename" type="file" title="Add DailyReport.tsv"  />
    <button type="button" class="btn" id="uploadFile">Submit</button>
    </div>
</form>

<script type='text/javascript'>
    $("#uploadFile").on('click',function(){
        $("#uploadForm").submit(
            function(e){

                e.preventDefault();
                var url = '../ajax/uploadFile.php';
                var data = new FormData($('.uploadForm'));
                console.log('Submitting');

                $.ajax({
                    type: 'POST',
                    url: url,
                    data: data,
                    cache: false,
                    contentType: false,
                    processData: false
                }).done(function(data) {
                        console.log(data);
                    }).fail(function(jqXHR, status, errorThrown) {
                       console.log(errorThrown);
                       console.log(jqXHR.responseText);
                       console.log(jqXHR.status);
                   });
            });
    });
</script>

PHP

if ($_FILES["filename"]["error"] > 0)
  {
  echo "Error: " . $_FILES["filename"]["error"] . "<br>";
  }
else
  {
  echo "Upload: " . $_FILES["filename"]["name"] . "<br>";
  echo "Type: " . $_FILES["filename"]["type"] . "<br>";
  echo "Size: " . ($_FILES["filename"]["size"] / 1024) . " kB<br>";
  echo "Stored in: " . $_FILES["filename"]["tmp_name"];
  }

Answer 1

使用时应检查数据输入。您可以使用serialize（）方法从表单中获取参数。您的代码可能会更改如下：

$("#uploadFile").on('click',function(){   
        var url = '../ajax/uploadFile.php';
        var data = $("form#uploadForm").serialize();
        console.log('Submitting');

        $.ajax({
            type: 'POST',
            url: url,
            data: data,
            cache: false,
            contentType: false,
            processData: false
        }).done(function(data) {
               ...
        }).fail(function(jqXHR, status, errorThrown) {
              ...
        });
    });

}）;

Answer 2

如果jQuery包含上传字段，则jQuery无法通过AJAX发布表单。

但如果您愿意，请尝试malsyup plugin

如何使用jQuery＆amp;提交表单？阿贾克斯？

2 个答案: