Javascript 为什么可以'；当我使用jQueryUI的模式表单时，所选文件是否会发布到服务器客户端？_Javascript_Jquery_Html_Jquery Ui

Javascript 为什么可以'；当我使用jQueryUI的模式表单时，所选文件是否会发布到服务器客户端？

javascript jquery html jquery-ui

Javascript 为什么可以'；当我使用jQueryUI的模式表单时，所选文件是否会发布到服务器客户端？,javascript,jquery,html,jquery-ui,Javascript,Jquery,Html,Jquery Ui,下面的代码是基于jQuery模态形式的，如下所示我希望单击一个按钮打开一个模式表单，选择模式表单中的文件，然后单击“上载”按钮将数据发布到服务器端但是当我点击“上传”按钮时，我发现数据没有被上传。为什么? 还有，代码form=dialog.find（“form”）.on（“submit”，function（event）{…}？我想我可以删除代码form=dialog.find（“form”）.on（“submit”，function（event）{…}，对吗 <!doctype htm

下面的代码是基于jQuery模态形式的，如下所示

我希望单击一个按钮打开一个模式表单，选择模式表单中的文件，然后单击“上载”按钮将数据发布到服务器端

但是当我点击“上传”按钮时，我发现数据没有被上传。为什么?

还有，代码f

orm=dialog.find（“form”）.on（“submit”，function（event）{…}？

我想我可以删除代码

form=dialog.find（“form”）.on（“submit”，function（event）{…}

，对吗

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog - Modal form</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
      $(function () {
          var dialog, form;


          function mySubmit() {
              var valid = true;
              if (valid) {
                  dialog.dialog("close");
                  $("#MyUploadFile").submit();               

              }
              return valid;
          }

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

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

          $("#create-user").button().on("click", function () {
              dialog.dialog("open");
          });
      });
  </script>
</head>
<body>


<div id="dialog-form" title="Create new user">
  <p class="validateTips">All form fields are required.</p>

     <form action="" method="post" enctype="multipart/form-data" id="MyUploadFile">               
          <input type="file" name="myupload" multiple="multiple" />           
     </form>                                       

</div>



<button id="create-user">select files and upload</button>


</body>
</html>


jQueryUI对话框-模态表单
$（函数（）{
var对话框，窗体；
函数mySubmit（）{
var valid=true；
如果（有效）{
dialog.dialog（“关闭”）；
$（“#MyUploadFile”）.submit（）；
}
返回有效；
}
对话=$（“#对话形式”）。对话({
自动打开：错误，
身高：400，
宽度：350，
莫代尔：是的，
按钮：{
“上传”：mySubmit，
取消：函数（）{
dialog.dialog（“关闭”）；
}
},
关闭：函数（）{
表单[0]。重置（）；
}
});
表单=对话框。查找（“表单”）。在（“提交”上，函数（事件）{
event.preventDefault（）；
mySubmit（）；
});
$（“#创建用户”）.button（）。打开（“单击”，函数（）{
dialog.dialog（“打开”）；
});
});
所有表单字段都是必需的
选择文件并上传
<>代码>在你提到的例子和我在评论中所说的例子中，我有一个更好的例子供你考虑。
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>

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脚本
我发表了一篇评论，这是一篇关于使用AJAX将文件上载到PHP脚本的非常直截了当的文章。我建议您通读并继续研究，以便更好地理解此操作。既然现在您允许用户上载内容，那么您的网站和整个服务器都可能受到攻击通过后门脚本
这将使您走上正确的道路，但旅程不会到此结束。
但我发现当我单击“上载”时，数据不会被发布按钮。为什么？
-检查开发人员工具控制台/网络选项卡以查看是否有任何错误-对我来说，在发送文件之前关闭模式似乎有点可疑…我还怀疑您是否有任何其他布尔值var valid。这始终是真的。由于您取消“提交”，数据未发布事件由event.preventDefault（）
调用。从mySubmit
中删除$（“#MyUploadFile”）.submit（）
并调用preventDefault
，具体取决于mySubmit返回值。谢谢！但修改后的代码表单=对话框。查找（“表单”）。在（“提交”上，函数（事件）{event.preventDefault（false）不要把yetTo贴到后面：你能给我写一个完整的代码吗？谢谢！
$(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");
  });
});