2

我有一个表单，用户输入他的名字并选择个人资料图片。这些信息和头像应该通过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 文件中的文件？

4

3 回答 3

1

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

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

于 2013-03-28T22:33:11.510 回答
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>
于 2013-03-28T23:14:04.317 回答
1

你可以试试这个AjaxFileUpload插件

于 2013-03-28T23:26:44.953 回答