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

我自己制作了很多问题，这个插件很有用，试试吧，这个

$('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"]，因为我们在 ajax <中发送指定为file的文件/强>

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

5 个答案: