如何通过Ajax将文件从JavaScript传输到PHP - How to transmit file from JavaScript via Ajax to PHP

How to transmit file from JavaScript via Ajax to PHP

我有一个表单，用户在其中输入他的姓名并选择个人资料图片。这些信息和头像应该通过ajax和php添加到mysql数据库。

<form id="addWorkerForm" action="addWorker.php" method="post">
  Prename:<input type="text" name="prename" id="prename">
  Lastname:<input type="text" name="lastname" id="lastname">
  Image:<input type="file" id="file_input" name="file_input" >
</form>

Javascript:

var prename = $('#prename').val(); var lastname = $('#lastname').val(); var workerAvatar = $('#file_input').val(); var url = 'xyz/addWorker.php?prename=' + prename + '&lastname=' + lastname + '&avatar=' + workerAvatar; $.ajax({ url: url, dataType: 'json', async: false, success: function(data) { } });
这是正确的方式来访问文件，以便在javascript中获得其内容?此外，我如何访问php文件中的文件?

我最近遇到了一个非常类似的问题，我的问题得到了解答(JQuery1.8.0:通过AJAX从表单发送文件)。
长话短说，你可以通过AJAX发送文件，但是你需要使用FormData()来做到这一点，因为文件需要被编码成"multipart/form-data"，XmlHttpRequest最近才能够做到(https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/FormData)。

应该是这样的:

<button id="ajaxUploadSubmit"> Submit </button> <script> var data = new FormData(document.forms.namedItem("workerAddForm")); $( "#ajaxUploadSubmit" ).click(function() { var oReq = new XMLHttpRequest(); oReq.open("POST", "xyz/addwrker.php", true); oReq.setRequestHeader("X-Requested-With", "XMLHttpRequest"); //necessary for my application, might not be for you, I'm using CakePHP oReq.onload = function(oEvent) { //whatever you want with oReq.responseText } oReq.send(data); }; </script>

不，不幸的是，您不能通过将文件的值传递给php来上传文件。你可以自己上传文件如果你想使用AJAX方法，可以使用Plupload

您可以希望得到的是对上传文件名称的引用，然后将其存储在<input type="hidden" value="XXXXXXXX.jpg"/>中，并将其作为workerAvatar传递。然后当你加载页面时，在<img src="XXXXX.jpg"/>

中引用它

你可以试试这个AjaxFileUpload插件