使用ajax上传图片并提交表格

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

HTML：

<div id="uploadPic" onclick="getFile()"> 
Select a photo to upload 
</div> 
<form name="myForm" id="avatar_form" enctype="multipart/form-data" method="post" action=""> 
<div style='height: 0px;width:0px; overflow:hidden;'> 
<input id="upfile" class="botpic" type="file" name="avatar" value="upload" required="" onchange="sub1()"> 
</div> 
</form>

的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); 
....... 
}

来源

2014-06-05 Ahad

你是否得到服务器端或客户端错误？ – twinlakes

它似乎将数据发送到服务器，但它无法进入if（isset ..）。我测试了没有Ajax的php代码，请定期提交表单。一切正常。图像正确更新，但需要刷新页面以显示更新的图像。所以，我打算使用ajax，但根本无法做到这一点。 – Ahad

终于让我找到问题的所在。也许这对于上传一个文件的其他人正在与ajax争执。现在它工作的很完美。解决的办法是：

在PHP代码，所有["avatar"]应与["file"]，因为我们发送指定为file文件中阿贾克斯取代。

来源

2014-06-06 17:34:56 Ahad

我注意到的第一件事是，你错过了数据参数声明后的逗号。这可能是你唯一的问题。

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

来源

2014-06-05 19:43:04 halabuda

实际代码中的数据参数后面有逗号，但在复制/粘贴过程中错过了此处。所以这不是问题。 – Ahad

你的PHP脚本的名字是什么？这就是你应该指定为“URL”：

url: 'script_name.php',

来源

2014-06-05 20:54:32 bromelio

我注意到了。我的代码中有一个php文件名。 – Ahad

也许这个插件可以帮助你

Jquery Form

我有很多的问题，从我自己和与此插件everething作品制作，只是尝试这

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

来源

2014-06-05 20:58:51 stalin

我猜想，而无需在脚本中使用preventDefault()方法，你submi t表单使用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

来源

2014-06-05 21:15:32

我检查过，它进入了php文件，但不能通过if语句。看来ajax无法捕获文件名。 – Ahad

很高兴你解决了你的问题。我使用echo，print_r（php）和alert（JS）来监视数据并查看所发生的事情。不知道你是否使用这些，但它对调试起到很大的帮助 –

使用ajax上传图片并提交表格

回答

相关问题