Javascript 为什么firebug控制台中的帖子没有显示任何内容，而文件没有上传到以下jQuery代码中？_Javascript_Jquery_Ajax_Post_File Upload

Javascript 为什么firebug控制台中的帖子没有显示任何内容，而文件没有上传到以下jQuery代码中？

javascript jquery ajax post file-upload

Javascript 为什么firebug控制台中的帖子没有显示任何内容，而文件没有上传到以下jQuery代码中？,javascript,jquery,ajax,post,file-upload,Javascript,Jquery,Ajax,Post,File Upload,我有一些Javascript代码。我包含了jQuery文件jQuery-2.1.1.min.js，并将整个Javascript代码转换为jQuery代码，但当我执行此代码时，我无法发布该文件。因此，我无法使用PHP将文件上载到服务器。在firebug控制台中，我总是一片空白。有人能帮我纠正这个问题吗原始Javascript代码： <!DOCTYPE html> <html> <head> <title>Take or select p

我有一些Javascript代码。我包含了jQuery文件jQuery-2.1.1.min.js，并将整个Javascript代码转换为jQuery代码，但当我执行此代码时，我无法发布该文件。因此，我无法使用PHP将文件上载到服务器。在firebug控制台中，我总是一片空白。有人能帮我纠正这个问题吗

原始Javascript代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Take or select photo(s) and upload</title>
    <script type="text/javascript"> 
    function fileSelected() {
      var count = document.getElementById('fileToUpload').files.length;
      document.getElementById('details').innerHTML = "";
      for (var index = 0; index < count; index ++) {
        var file = document.getElementById('fileToUpload').files[index];
        var fileSize = 0;
        if (file.size > 1024 * 1024)
          fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
        else
          fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

        document.getElementById('details').innerHTML += 'Name: ' + file.name + '<br>Size: ' + fileSize + '<br>Type: ' + file.type;
        document.getElementById('details').innerHTML += '<p>';
      }
    }

    function uploadFile() {
      var fd = new FormData();
      var count = document.getElementById('fileToUpload').files.length;
      for (var index = 0; index < count; index ++) {
        var file = document.getElementById('fileToUpload').files[index];
        fd.append('myFile', file);
      }
      var xhr = new XMLHttpRequest();
      xhr.upload.addEventListener("progress", uploadProgress, false);
      xhr.addEventListener("load", uploadComplete, false);
      xhr.addEventListener("error", uploadFailed, false);
      xhr.addEventListener("abort", uploadCanceled, false);
      xhr.open("POST", "savetofile.php");
      xhr.send(fd);
    }

    function uploadProgress(evt) {
      if (evt.lengthComputable) {
        var percentComplete = Math.round(evt.loaded * 100 / evt.total);
        document.getElementById('progress').innerHTML = percentComplete.toString() + '%';
      } else {
        document.getElementById('progress').innerHTML = 'unable to compute';
      }
    }

    function uploadComplete(evt) {
      /* This event is raised when the server send back a response */
      alert(evt.target.responseText);
    }

    function uploadFailed(evt) {
      alert("There was an error attempting to upload the file.");
    }

    function uploadCanceled(evt) {
      alert("The upload has been canceled by the user or the browser dropped the connection.");
    } 
    </script> 
  </head> 
  <body> 
    <form id="form1" enctype="multipart/form-data" method="post" action="Upload.aspx">
      <div>
        <label for="fileToUpload">Take or select photo(s)</label><br />
        <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();" accept="image/*" capture="camera" />
      </div> 
      <div id="details"></div>
      <div> 
        <input type="button" onclick="uploadFile()" value="Upload" /> 
      </div>
      <div id="progress"></div> 
    </form> 
  </body> 
</html>

将上述代码转换为jQuery代码，如下所示，但在POST中变为空白：

<!DOCTYPE html>
<html>
  <head>
    <title>Take or select photo(s) and upload</title>
    <script type="text/javascript" charset="utf-8" src="jquery-2.1.1.min.js"></script>
    <script type="text/javascript"> 
    function fileSelected() {
      var count = $('#fileToUpload').get(0).files.length;//$('#fileToUpload').size() may also work
      $('#details').html("");
      for (var index = 0; index < count; index ++) {
        var file = $('#fileToUpload').get(0).files[index];//.get(0) gives you the js DOM object
        var fileSize = 0;
        if (file.size > 1024 * 1024)
          fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
        else
          fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
        $('#details').append('Name: ' + file.name + '<br>Size: ' + fileSize + '<br>Type: ' + file.type);
        $('#details').append('<p>');
      }
    }

    function uploadFile() {
      var fd = new FormData();
      var count = $('#fileToUpload').get(0).files.length;
      for (var index = 0; index < count; index ++) {
        var file = $('#fileToUpload').get(0).files[index];
        fd.append('myFile', file);
      }
      $.ajax({url:"savetofile.php", type:'POST', success:uploadComplete, error:uploadFailed});
      // abort is included in error, the second parameter passed to the error method would be statusText with value of abort in case of abort!
    }

    function uploadComplete(data) {
      /* This event is raised when the server send back a response */
      alert(data);
    }

    function uploadFailed(jqXHR, textStatus) {
      if(statusText==="abort") {
        alert("The upload has been canceled by the user or the browser dropped the connection.")
      } else {
        alert("There was an error attempting to upload the file.");
      }
    }
    </script> 
  </head> 
  <body> 
    <form id="form1" enctype="multipart/form-data" method="post" action="Upload.aspx">
      <div>
        <label for="fileToUpload">Take or select photo(s)</label><br />
        <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();" accept="image/*" capture="camera" />
      </div> 
      <div id="details"></div>
      <div> 
        <input type="button" onclick="uploadFile()" value="Upload" /> 
      </div>
      <div id="progress"></div> 
    </form> 
  </body> 
</html>

提前谢谢

如果您需要，我也可以给您PHP文件的代码。

您没有传递任何数据，这就是您正在做的

$.ajax({
    url     : "savetofile.php", 
    type    : 'POST', 
    success : uploadComplete,  
    error   : uploadFailed
});

如果不发送任何内容，则必须实际添加数据

$.ajax({
    url     : "savetofile.php", 
    type    : 'POST', 
    data    : fd,
    success : uploadComplete,  
    error   : uploadFailed
    cache   : false,
    contentType : false,
    processData : false
});