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

Question

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

Answer 1

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

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

Answer 2

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

url: 'script_name.php',

Answer 3

也许这个插件可以帮助您

jQuery表格

我自己制作了很多问题，并且使用此插件，一切正常，请尝试一下，

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

Answer 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

Answer 5

终于我找到了问题所在。 也许这对于其他人在用ajax上载文件的过程中很有用。现在它可以正常工作了。 解决方案是：

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