使用ajax和表单提交上传图像

我想使用Ajax将图像上传到服务器,但是存在问题。 有人请帮助我这里有什么问题。 我可以使用提交表单提交图像,但不能使用ajax。 这是我的代码:

HTML:

Select a photo to upload

JavaScript的:

 function getFile(){ document.getElementById("upfile").click(); } function sub1(){ var photo = document.getElementById("upfile"); var file = photo.files[0]; data = new FormData(); data.append('file', file); $.ajax({ url: 'url', data: data enctype: 'multipart/form-data', processData: false, // do not process the data as url encoded params contentType: false, // by default jQuery sets this to urlencoded string type: 'POST', success: function ( output ) { document.getElementById('picTmp').innerHTML = output;; } }); } 

PHP代码:

 if (isset($_FILES["avatar"]["name"]) && $_FILES["avatar"]["tmp_name"] != ""){ $fileName = $_FILES["avatar"]["name"]; $fileTmpLoc = $_FILES["avatar"]["tmp_name"]; $fileType = $_FILES["avatar"]["type"]; $fileSize = $_FILES["avatar"]["size"]; $fileErrorMsg = $_FILES["avatar"]["error"]; $kaboom = explode(".", $fileName); $fileExt = end($kaboom); list($width, $height) = getimagesize($fileTmpLoc); ....... } 

我注意到的第一件事是你在数据参数声明后丢失了一个逗号。 这可能是你唯一的问题。

 $.ajax({ url: 'url', data: data, enctype: 'multipart/form-data', //etc... 

PHP脚本的名称是什么? 那就是你应该指定为’url’:

 url: 'script_name.php', 

也许这个插件可以帮助你

Jquery表格

我自己制作了很多问题,这个插件很有用,试试吧

 $('form').ajaxForm(function() { alert("Thank you for your comment!"); }); 

我想如果不在脚本中使用preventDefault()方法,则使用action=""method="post"将表单提交到同一页面,因此永远不会输入$.ajax() ;

我做过这样的事情

 $('#query_projects').submit(function(event){ event.preventDefault(); var formData = new FormData($(this)[0]); var request = $.ajax({ type: 'POST', url: 'query_tab_projets.php', mimeType:'application/json', dataType:'json', data: formData, contentType: false, processData: false, success: function(data){ alert(JSON.stringify(data,null,4)); }, error: function(msg){ alert(JSON.stringify(msg,null,4)); } }); }); 

其中#query_projects是我的表单ID

最后我找到了问题所在。 也许对于那些在ajax上传文件时苦苦挣扎的人来说这很有用。现在它工作得很好。 解决方案是:

PHP代码中,所有["avatar"]都应该替换为["file"]因为我们正在发送在ajax中指定为file