Question

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

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部分代码。

Answer 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/

希望有所帮助

使用Ajax上传文件 - FormData

1 个答案: