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

我有一个表单，用户输入他的名字并选择一个个人资料图片。这些信息和头像应该通过ajax和php添加到mysql数据库中。如何通过Ajax将文件从JavaScript传输到PHP

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

来源

2013-03-28 doonot

http://stackoverflow.com/questions/1276916/asynchronous-file-upload-ajax-file-upload-using -jsp和JavaScript的 –

我最近有一个非常类似的问题，如果我的问题回答了（JQuery1.8.0: Sending files from forms via AJAX）。

长话短说，你可以通过AJAX发送文件，但是你需要使用FORMDATA（）这样做，因为该文件需要被编码成“多/表单数据”的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>

来源

2013-03-28 23:14:04 Jonline

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

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

来源

2013-03-28 22:33:11 romo

你可以试试这个AjaxFileUpload插件

来源

2013-03-28 23:26:44

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

回答

相关问题