jQuery 动态表单，而 PHP 的 $_FILES 为空答案

【问题标题】：jQuery dynamic Form, and the PHP $_FILES emptyjQuery 动态表单，而 PHP 的 $_FILES 为空
【发布时间】：2014-07-29 20:43:09
【问题描述】：

我需要在 jQuery 中动态创建一个 HTML 表单，当我点击提交按钮时，我通过 Ajax 将表单数据发送到正在处理它们的“add_sw.php”。

但我的问题是这个 PHP 脚本无法访问 PHP $_FILES 变量，所以它是空的..

这里是js相关的js代码：

<script type="text/javascript">
  $("body").on("click", "#submit", function() {
    var frm = $('#sw_add');
    frm.submit(function (ev) {
      $.ajax({
        type: frm.attr('method'),
        url: frm.attr('action'),
        data: frm.serialize(),
        success: function (data) {
          alert('ok');
        }
      });

      ev.preventDefault();
    });
  });
</script>

<script type="text/javascript">
  $("body").on("change", "select", function() {
    var tag = $("<div></div>");
    var content = "<form id='sw_add' action='add_sw.php' method='post' enctype='multipart/form-data'>";
    content += "<input type='text' name='sw_name'>";
    content += "<label for='file'>Fájl:</label>";
    content += "<input type='file' name='file' size='40'>";
    content += "<textarea rows='4' cols='50' name='sw_comment'></textarea>";
    content += "<div class='buttons'><button id='submit' type='submit'>Save</button></div>";
    content += "</form>";
    tag.html(content).dialog({title:'Add new software', modal:false, width:500, height:360}).dialog('open');
  });
</script>

以及 PHP 脚本的开头：

<?php
  $sw_name    = $_REQUEST['sw_name'];
  $sw_file    = $_FILES['file']['name'];
  $sw_comment = $_REQUEST['sw_comment'];

  // process the form datas...
?>

我的问题是“$sw_file”变量为空，我没有得到上传的文件名。为什么？

【问题讨论】：

我想我应该进入 Ajax 脚本的 'enctype' 参数...

标签： javascript php jquery html ajax

【解决方案1】：

我修改了第一个js脚本，这是一个工作版本。

<script type="text/javascript">
  $("body").on("click", "#submit", function() {
    $("#sw_add").submit(function(e) {
      var formObj = $(this);
      var formURL = formObj.attr("action");
      var formData = new FormData(this);
      $.ajax({
        url: formURL,
        type: 'POST',
        data:  formData,
        mimeType: "multipart/form-data",
        contentType: false,
        cache: false,
        processData: false,
        success: function(data, textStatus, jqXHR) {
          alert('ok');
        },
        error: function(jqXHR, textStatus, errorThrown) {
          alert('error');
        }          
      });
      e.preventDefault();
      e.unbind();
    }); 
  });
</script>

【讨论】：