javascript - AJAX JQuery 上传图片

Question

这个问题已经有答案了:

How can I upload files asynchronously with jQuery? (34 个回答)

已关闭 8 年前。

我想创建使用 jquery ajax 上传图像的过程。这是我的代码:

<form action="" method="post" name="formPicture" enctype="multipart/form-data">
    <div class="modal-body panel-modal-scrol">
        <input type="file" name="picture" class="form-control" />
    </div>
    <div id="info"></div>
    <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
    <input type="submit" value="Save" id="btn-saving" class="btn btn-primary" />
</form>
<script>
$("[name=formPicture]").submit(function(e){
    e.preventDefault(); 
    var formData = $(this).serialize();
    console.log(formData);

    $.ajax({
       type: 'POST',
       url: 'upload_picture.php',
       data: formData, 
       success: function(data){
        console.log(data);                        
       }
    });
});
</script>

upload_picture.php

<?php
$path = $_FILES['picture']['tmp_name'];
$file_name   = $_FILES['picture']['name'];
$newPath     = "upload/";
move_uploaded_file($lokasi_file,$newPath.$file_name);
$insert="INSERT INTO `picture`(`picture`) 
                        VALUES ('$file_name')";
$query=mysql_query($insert);
if($query){
    echo '{"status":"success"}';
    exit;
}else{
    echo '{"status":"error"}';
    exit;
}
?>

但是错误提示“注意: undefined index :第 4 行的图片”；我的代码有问题吗？谢谢..

Answer 1

第一种方法:-

您需要使用 formData() 来使用 ajax，并且 ajax 调用需要设置更多参数。只需遵循:-

http://hayageek.com/jquery-ajax-form-submit/

但请检查浏览器 compatability

编辑:- 实时代码(php) + 演示- here

第二种方法:-

您还可以使用 iframe 代替 AJAX 上传图像

http://www.akchauhan.com/upload-image-using-hidden-iframe/

您将根据您使用的服务器端语言(即 php、rails、java 等)获得这两种方法的工作示例