How to send image to PHP file using Ajax

Question

my question is that is it possible to upload an image to a server using ajax jquery   below is my ajax script to send text without page reload    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     amp great id     great id          beforeSend  function                     loader ic   show                    loader ic   fadeIn 400  html   lt img src  data cardz loader gif    gt    fadeIn  slow                       success  function data                    loader ic   hide                    new post   prepend data                   poster   val                                  is it possible to modify it to send images

User · Answer

Post both multiple text inputs plus multiple files via Ajax in one Ajax request

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 Code

$(document).on('click','#btnSendData',function (event) {
    event.preventDefault();
    var form = $('#myform')[0];
    var formData = new FormData(form);
    // Set header if need any otherwise remove setup part
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="token"]').attr('value')
        }
    });
    $.ajax({
        url: "{{route('sendFormWithImage')}}",// your request url
        data: formData,
        processData: false,
        contentType: false,
        type: 'POST',
        success: function (data) {
            console.log(data);
        },
        error: function () {

        }
    });

});

User · Answer

Use JavaScript s formData API and set contentType and processData to false    quot form name  uploader   quot   on  quot submit quot   function ev      ev preventDefault       Prevent browser default submit     var formData   new FormData this            ajax       url   quot page php quot       type   quot POST quot       data  formData      success  function  msg          alert msg             cache  false      contentType  false      processData  false

User · Answer

Here is code that will upload multiple images at once  into a specific folder   The HTML    lt form method  post  enctype  multipart form-data  id  image upload form  action  submit image php  gt   lt input type  file  name  images  id  images  multiple accept  image x-png  image gif  image jpeg  image jpg    gt   lt button type  submit  id  btn  gt Upload Files  lt  button gt   lt  form gt   lt div id  response  gt  lt  div gt   lt ul id  image-list  gt    lt  ul gt    The PHP    lt  php  errors     FILES  images    error    foreach   errors as  key   gt   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   lt h2 gt Successfully Uploaded Images lt  h2 gt      And finally  the 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  lt  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           Hope this helps

User · Answer

lt html gt     lt head gt       lt script src  quot http   code jquery com jquery-1 9 1 js quot  gt  lt  script gt       lt script gt          function                   abc   on  submit   function  e               e preventDefault                 ajax               url   post php               method  POST               data  new FormData this               contentType  false              cache false              processData false              success  function  data                  alert data                 location reload                                                             lt  script gt     lt  head gt     lt body gt       lt form enctype   quot multipart form-data quot  id  quot abc quot  gt         lt input name  quot fname quot   gt  lt br gt         lt input name  quot lname quot  gt  lt br gt         lt input type  quot file quot  name  quot file quot  required  quot  quot  gt  lt br gt         lt input name  quot submit quot  type  quot submit quot  value  quot Submit quot  gt       lt  form gt     lt  body gt   lt  html gt

User · Answer

Jquery code which contains simple ajax            product   on  input   function event          var data     nameform   serialize          post      partails search-productbyCat php  data function e              result   empty   append e                         Html elements you can use any element          lt form id  nameform  gt        lt input type  text  name  product  id  product  gt        lt  form gt    php Code      pdo new PDO  mysql host localhost dbname onlineshooping   root          Catagoryf   POST  product       pricef   POST  price       colorf   POST  color        stmtcat  pdo- gt prepare  SELECT   from products where Catagory          stmtcat- gt execute array  Catagoryf       while  result  stmtcat- gt fetch PDO  FETCH ASSOC       iddb  result  ID          namedb  result  Name         pricedb  result  Price          colordb  result  Color        echo   lt tr gt       echo   lt td gt  lt a href   pages productsinfo php id    iddb   gt   namedb lt  a gt   lt  td gt     lt br gt        echo   lt td gt  lt pre gt  pricedb lt  pre gt  lt  td gt       echo   lt td gt  lt pre gt      colordb lt  pre gt       echo   lt  tr gt      The easy way

[jquery] How to send image to PHP file using Ajax?

Examples related to jquery

Examples related to ajax

Examples related to image

Examples related to forms