如何使用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) {&nbsp; var formData = new FormData($(this)[0]);&nbsp; $.ajax({&nbsp; &nbsp; url: "page.php",&nbsp; &nbsp; type: "POST",&nbsp; &nbsp; data: formData,&nbsp; &nbsp; success: function (msg) {&nbsp; &nbsp; &nbsp; alert(msg)&nbsp; &nbsp; },&nbsp; &nbsp; cache: false,&nbsp; &nbsp; contentType: false,&nbsp; &nbsp; processData: false&nbsp; });&nbsp; 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) {&nbsp; &nbsp; $name = $_FILES["images"]["name"][$key];&nbsp; &nbsp; //$ext = pathinfo($name, PATHINFO_EXTENSION);&nbsp; &nbsp; $name = explode("_", $name);&nbsp; &nbsp; $imagename='';&nbsp; &nbsp; foreach($name as $letter){&nbsp; &nbsp; &nbsp; &nbsp; $imagename .= $letter;&nbsp; &nbsp; }&nbsp; &nbsp; move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "images/uploads/" .&nbsp; $imagename);}}echo "<h2>Successfully Uploaded Images</h2>";最后，JavaSCript / Ajax：(function () {var input = document.getElementById("images"),&nbsp;&nbsp; &nbsp; formdata = false;function showUploadedItem (source) {&nbsp; &nbsp; var list = document.getElementById("image-list"),&nbsp; &nbsp; &nbsp; &nbsp; li&nbsp; &nbsp;= document.createElement("li"),&nbsp; &nbsp; &nbsp; &nbsp; img&nbsp; = document.createElement("img");&nbsp; &nbsp; img.src = source;&nbsp; &nbsp; li.appendChild(img);&nbsp; &nbsp; list.appendChild(li);}&nbsp; &nbsp;if (window.FormData) {&nbsp; &nbsp; formdata = new FormData();&nbsp; &nbsp; document.getElementById("btn").style.display = "none";}input.addEventListener("change", function (evt) {&nbsp; &nbsp; document.getElementById("response").innerHTML = "Uploading . . ."&nbsp; &nbsp; var i = 0, len = this.files.length, img, reader, file;&nbsp; &nbsp; for ( ; i < len; i++ ) {&nbsp; &nbsp; &nbsp; &nbsp; file = this.files[i];&nbsp; &nbsp; &nbsp; &nbsp; if (!!file.type.match(/image.*/)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ( window.FileReader ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; reader = new FileReader();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; reader.onloadend = function (e) {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; showUploadedItem(e.target.result, file.fileName);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; reader.readAsDataURL(file);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (formdata) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; formdata.append("images[]", file);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp;&nbsp; &nbsp; }&nbsp; &nbsp; if (formdata) {&nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: "submit_image.php",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: formdata,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; processData: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; contentType: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function (res) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("response").innerHTML = res;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }}, 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) {&nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; var form = $('#myform')[0];&nbsp; &nbsp; var formData = new FormData(form);&nbsp; &nbsp; $.ajaxSetup({&nbsp; &nbsp; &nbsp; &nbsp; headers: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'X-CSRF-TOKEN': $('meta[name="token"]').attr('value')&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; url: "{{route('sendFormWithImage')}}",&nbsp; &nbsp; &nbsp; &nbsp; data: formData,&nbsp; &nbsp; &nbsp; &nbsp; processData: false,&nbsp; &nbsp; &nbsp; &nbsp; contentType: false,&nbsp; &nbsp; &nbsp; &nbsp; type: 'POST',&nbsp; &nbsp; &nbsp; &nbsp; success: function (data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(data);&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; error: function () {&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });});