使用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
。