当我使用 jQuery UI 的 Modal 形式时，为什么无法将选定的文件发布到服务器客户端？

扩展您参考的示例以及我在评论中所说的内容，我确实有一个更好的示例供您考虑。

HTML

<div id="dialog-form" title="File Upload">
  <p class="validateTips">Select a file to upload.</p>
  <form>
    <fieldset>
      <label for="name">File</label>
      <input type="file" id="uploadFile" class="text ui-widget-content ui-corner-all">
      <!-- Allow form submission with keyboard without duplicating the dialog button -->
      <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
  </form>
</div>

<div id="users-contain" class="ui-widget">
  <h1>Uploaded Files:</h1>
  <table id="users" class="ui-widget ui-widget-content">
    <thead>
      <tr class="ui-widget-header ">
        <th>File</th>
        <th>Folder</th>
        <th>Date</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Archive.xls</td>
        <td>/upload</td>
        <td>02/28/2017</td>
      </tr>
    </tbody>
  </table>
</div>
<button id="upload-file-button">Upload New File</button>

的CSS

label,
input {
  display: block;
}

input.text {
  margin-bottom: 12px;
  width: 95%;
  padding: .4em;
}

fieldset {
  padding: 0;
  border: 0;
  margin-top: 25px;
}

h1 {
  font-size: 1.2em;
  margin: .6em 0;
}

div#users-contain {
  width: 350px;
  margin: 20px 0;
}

div#users-contain table {
  margin: 1em 0;
  border-collapse: collapse;
  width: 100%;
}

div#users-contain table td,
div#users-contain table th {
  border: 1px solid #eee;
  padding: .6em 10px;
  text-align: left;
}

.ui-dialog .ui-state-error {
  padding: .3em;
}

.validateTips {
  border: 1px solid transparent;
  padding: 0.3em;
}

JavaScript

$(function() {
  var dialog, form;

  function updateTips(t) {
    $(".validateTips")
      .text(t)
      .addClass("ui-state-highlight");
    setTimeout(function() {
      $(".validateTips").removeClass("ui-state-highlight", 1500);
    }, 500);
  }

  function uploadFile() {
    var valid = false;
    var $input = $("#uploadFile");
    if ($input[0].files.length === 0) {
      updateTips("You must select a file.");
      return valid;
    }
    var fileData = new FormData();
    $.each($input[0].files, function(k, v) {
      fileData.append(k, v);
    });
    // Barrowed from https://abandon.ie/notebook/simple-file-uploads-using-jquery-ajax
    $.ajax({
      url: "./php/upload.php",
      type: "POST",
      data: fileData,
      cache: false,
      dataType: "JSON",
      processData: false,
      contentType: false,
      success: function(results, textStatus, jqXHR) {
        // 'results' will be a JSON object return from our form handler
        // 'results.error' may contain error details, like: Path Not Found
        if (typeof results.error === 'undefined') {
          // At this point, we should have uploaded the file
          // our form handler has return some response
          // We can update a table to do something with the data
          valid = true;
        } else {
          // Handle errors here
          updateTips("Error: " + results.error);
        }
      },
      error: function(jqXHR, textStatus, errorThrown) {
        // Handle errors here
        updateTips("Error: " + textStatus);
        // STOP LOADING SPINNER
      }
    });
    return valid;
  }

  dialog = $("#dialog-form").dialog({
    autoOpen: false,
    height: 400,
    width: 350,
    modal: true,
    buttons: {
      "Upload": uploadFile,
      Cancel: function() {
        dialog.dialog("close");
      }
    },
    close: function() {
      form[0].reset();
    }
  });

  form = dialog.find("form").on("submit", function(event) {
    event.preventDefault();
    uploadFile();
  });

  $("#upload-file-button").button().on("click", function() {
    dialog.dialog("open");
  });
});

如您所见，这与原始示例的工作方式非常相似。它没有通过，因为您有更多的工作需要在服务器端完成。

请记住，jQuery 是 JavaScript 的框架，也就是客户端脚本。要处理文件上传，您的 Web 服务器必须能够以某种方式处理 HTTP POST 数据。这可能是 CGI、ASP、ASP.NET 或 PHP 脚本。

我发表了关于https://abandon.ie/notebook/simple-file-uploads-using-jquery-ajax的评论，这是一篇关于使用 AJAX 将文件上传到 PHP 脚本的非常直接的文章。我建议您通读一遍并继续研究，以便更好地理解此操作。既然您允许用户上传内容，那么您就可以通过后门脚本使您的网站和整个服务器对攻击开放。

这将使您走上正确的道路，但是旅程并没有就此结束。