如何通过 Ajax 将文件从 JavaScript 传输到 PHP答案

【问题标题】：How to transmit file from JavaScript via Ajax to PHP如何通过 Ajax 将文件从 JavaScript 传输到 PHP
【发布时间】：2013-03-28 22:28:05
【问题描述】：

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

HTML：

<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文件中的文件？

【问题讨论】：

stackoverflow.com/questions/1276916/…

标签： php javascript jquery html ajax

【解决方案1】：

我最近遇到了一个非常相似的问题，我的问题得到了解答 (JQuery1.8.0: Sending files from forms via AJAX)。

长话短说，您可以通过 AJAX 发送文件，但您需要使用 FormData() 来执行此操作，因为文件需要编码为 XmlHttpRequest 具有的“multipart/form-data”直到最近才能够做到 (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>

【讨论】：

【解决方案2】：

不，很遗憾，您不能通过将文件的值传递给 php 来上传文件。您必须自己上传文件，或者如果您想继续使用 AJAX 方法，请使用 Plupload

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

【讨论】：

【解决方案3】：

你可以试试这个AjaxFileUpload插件

【讨论】：