使用ajax上传图片并提交表单答案

【问题标题】：Upload image using ajax and form submitting使用ajax上传图片并提交表单
【发布时间】：2014-06-05 19:32:07
【问题描述】：

我想使用 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);
 .......
}

【问题讨论】：

您是否遇到服务器端或客户端错误？
它似乎将数据发送到服务器，但它无法进入 if (isset..)。我测试了没有 ajax 购买常规提交表单的 php 代码。一切正常。图像更新正常，但页面需要刷新才能显示更新的图像。所以，我打算使用 ajax，但根本做不到。
使用 var_dump 函数检查请求变量。 var_dump($_POST); var_dump($_FILES);事情就清楚了。

标签： javascript php jquery ajax

【解决方案1】：

我注意到的第一件事是您在数据参数声明后缺少逗号。这可能是你唯一的问题。

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

【讨论】：

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

【解决方案2】：

您的 PHP 脚本的名称是什么？这就是您应该指定为“url”的内容：

url: 'script_name.php',

【讨论】：

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

【解决方案3】：

也许这个插件可以帮助你

Jquery Form

我自己遇到了很多问题，使用这个插件一切正常，试试吧，这个

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

【讨论】：

【解决方案4】：

我猜如果不在你的脚本中使用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

【讨论】：

我检查了，它进入了php文件但无法通过if语句。似乎 ajax 无法捕获文件名。
很高兴您解决了问题。我使用 echo、print_r(php) 和 alert(JS) 来监控数据并查看发生了什么。不知道你有没有用过，但是对调试很有帮助

【解决方案5】：

终于找到问题所在了。也许它对其他在 ajax 上传文件方面苦苦挣扎的人很有用。现在它工作得很好。解决办法是：

在 php 代码中，所有 ["avatar"] 都应替换为 ["file"]，因为我们正在发送 ajax 中指定为 file 的文件。 p>

【讨论】：