如何使用Ajax将图像发送到PHP文件？

Question

我的问题是可以使用ajax（jquery）将图像上传到服务器吗以下是我的ajax脚本，无需重新加载页面即可发送文本$(function() {//this submits a form$('#post_submit').click(function(event) {event.preventDefault();var great_id = $("#post_container_supreme:first").attr("class");var poster = $("#poster").val() ;    $.ajax({        type: "POST",        url: "my php file",        data: 'poster='+ poster + '&great_id=' + great_id,        beforeSend: function() {            $("#loader_ic").show();            $('#loader_ic').fadeIn(400).html('<img src="data_cardz_loader.gif" />').fadeIn("slow");        },        success: function(data) {            $("#loader_ic").hide();            $("#new_post").prepend(data);            $("#poster").val('');        }    })})})是否可以修改它以发送图像？

Answer 1

这可行。

$("form[name='uploader']").submit(function(e) {

  var formData = new FormData($(this)[0]);

  $.ajax({

    url: "page.php",

    type: "POST",

    data: formData,

    success: function (msg) {

      alert(msg)

    },

    cache: false,

    contentType: false,

    processData: false

  });

  e.preventDefault();

});

是您要找的东西吗？

Answer 2

这是将一次将多张图片上传到特定文件夹的代码！

HTML：

<form method="post" enctype="multipart/form-data" id="image_upload_form" action="submit_image.php">

<input type="file" name="images" id="images" multiple accept="image/x-png, image/gif, image/jpeg, image/jpg" />

<button type="submit" id="btn">Upload Files!</button>

</form>

<div id="response"></div>

<ul id="image-list">

</ul>

PHP：

<?php

$errors = $_FILES["images"]["error"];

foreach ($errors as $key => $error) {

if ($error == UPLOAD_ERR_OK) {

    $name = $_FILES["images"]["name"][$key];

    //$ext = pathinfo($name, PATHINFO_EXTENSION);

    $name = explode("_", $name);

    $imagename='';

    foreach($name as $letter){

        $imagename .= $letter;

    }

    move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "images/uploads/" .  $imagename);

}

}

echo "<h2>Successfully Uploaded Images</h2>";

最后，JavaSCript / Ajax：

(function () {

var input = document.getElementById("images"), 

    formdata = false;

function showUploadedItem (source) {

    var list = document.getElementById("image-list"),

        li   = document.createElement("li"),

        img  = document.createElement("img");

    img.src = source;

    li.appendChild(img);

    list.appendChild(li);

}   

if (window.FormData) {

    formdata = new FormData();

    document.getElementById("btn").style.display = "none";

}

input.addEventListener("change", function (evt) {

    document.getElementById("response").innerHTML = "Uploading . . ."

    var i = 0, len = this.files.length, img, reader, file;

    for ( ; i < len; i++ ) {

        file = this.files[i];

        if (!!file.type.match(/image.*/)) {

            if ( window.FileReader ) {

                reader = new FileReader();

                reader.onloadend = function (e) { 

                    showUploadedItem(e.target.result, file.fileName);

                };

                reader.readAsDataURL(file);

            }

            if (formdata) {

                formdata.append("images[]", file);

            }

        }   

    }

    if (formdata) {

        $.ajax({

            url: "submit_image.php",

            type: "POST",

            data: formdata,

            processData: false,

            contentType: false,

            success: function (res) {

                document.getElementById("response").innerHTML = res;

            }

        });

    }

}, false);

}());

希望这可以帮助

Answer 3

的HTML

<form class="form-horizontal" id="myform" enctype="multipart/form-data">

<input type="text" name="name" class="form-control">

<input type="text" name="email" class="form-control">

<input type="file" name="image" class="form-control">

<input type="file" name="anotherFile" class="form-control">

jQuery代码

$(document).on('click','#btnSendData',function (event) {

    event.preventDefault();

    var form = $('#myform')[0];

    var formData = new FormData(form);

    $.ajaxSetup({

        headers: {

            'X-CSRF-TOKEN': $('meta[name="token"]').attr('value')

        }

    });

    $.ajax({

        url: "{{route('sendFormWithImage')}}",

        data: formData,

        processData: false,

        contentType: false,

        type: 'POST',

        success: function (data) {

            console.log(data);

        },

        error: function () {

        }

    });

});