3

首先，我搜索了很多关于它的主题，我不想使用任何插件。

function addToDatabase(menuItem){
  var formData = new FormData();
  formData.append("Description", document.getElementById("DescriptionID").value);
  jQuery.each($('#filesID')[0].files, function(i, file) {
      formData.append('file-'+i, file);
  });

  $.ajax({

    type: "POST",
    url: "dbAdder.php",
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
    success: function(result){
      $("#PageContent").html(result);
    }
  });
}

向服务器发送东西的 Js 函数。虽然在服务器端代码$_POST['Description']有价值，但$_FILES['file-0']没有。

<input type="file" id="filesID" name="files[]" multiple />
<textarea id="DescriptionID" rows="5" cols="53"></textarea>

HTML 部分代码。

4

1 回答 1

1

如果您打算上传文件，它会使这一切变得复杂一点。

如果外部插件不是一个选项，我强烈建议使用 XHR2。

它是纯 javascript，可以很好地处理文件上传。

但请注意，并非所有浏览器都支持它，请参见此处：http ://caniuse.com/xhr2

// prepare xhr object
var xhr = new XMLHttpRequest();

xhr.open('POST', 'dbAdder.php', true);

// upload complete handler
xhr.onload = function(e){
if (this.status == 200) {
    //
}
    else { // }
};

// upload progress handler
xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
            // e.total, e.loaded
    }
};

var fd = new FormData();
fd.append("file", file);
fd.append("Description", 'description text');
fd.append("field2", 'value2');

// send the xml http request
xhr.send(fd);

这是一个非常好的教程，可以进一步使用 xhr2：http ://www.html5rocks.com/en/tutorials/file/xhr2/

希望有帮助

于 2013-10-15T12:20:34.960 回答