Javascript 使用ajax上传图像并提交表单

我想使用Ajax将一个图像上传到服务器，但有一个问题。谁能帮帮我这里怎么了。我可以使用提交表单提交图像，但不能使用ajax。 这是我的密码：

html:

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',

---

也许这个插件可以帮助你

我有很多问题，从我自己和这个插件的一切工作，只是尝试，这个

$('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

的文件。您是否收到服务器端或客户端错误？它似乎将数据发送到服务器，但无法进入if（isset..）。我在没有提交表单的情况下测试了php代码。一切正常。图像正确更新，但需要刷新页面以显示更新的图像。所以，我打算使用ajax，但根本不能这样做。使用var_dump函数检查请求变量。变量转储（$\u POST）；变量转储（$\u文件）；事情很清楚，在实际代码中，数据参数后面有逗号，但在复制/粘贴过程中，这里遗漏了逗号。所以这不是问题所在。我注意到了。我的代码中有一个php文件名。我检查过，它输入到php文件中，但无法通过if语句。似乎ajax无法捕获文件名。很高兴您解决了问题。我使用echo、print_r（php）和alert（JS）来监视数据，并查看发生了什么。不知道您是否使用了这些，但它对调试有很大帮助

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

$('#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));
        }
    });             
});