How to upload image using AJAX in javascript?

Question

Here's my code- I want to upload image file and show it in the image div. I want to trigger ajax code written in js when i select a file.It should upload file to server and show it without any other event. But this code is not working. It is showing that undefined index image, instead of image.

HTML FORM

  <!doctype html>
   <html>

 <body>
 <div id="wb_Image2>
 <img src="" id="Image2" alt="">
 </div>


  <input type="file" id="FileUpload1" name="image"  onchange="upload()" >
  <div id="div"> </div>   





 </body>
 </html>

JS FILE-

function upload()
   {


  var xhttp = new XMLHttpRequest(); //creating a xmlhttp request;

    xhttp.open("POST","upload.php", true);
  xhttp.send();
  xhttp.onreadystatechange = function () 
   {
if (xhttp.readyState == 4 && xhttp.status == 200) 
  {
 alert(xhttp.responseText);
 document.getElementById("div").innerHTML= xhttp.responseText;
 document.getElementById("Image2").src = xhttp.responseText;
   }
    };


 }

PHP file-upload.php

   <?php
   $errors=array();
 $name=$_FILES['image']['name']; //storing name of d file
  $ext=explode('.',$name); //ext[0]=nameOfFile and ext[1]= extension
 $size=$_FILES['image']['size'];//storing size
  $tmpName=$_FILES['image']['tmp_name'];//storing temp name

  $validExt=array("jpg","jpeg","png","gif");//valid extensions

if(($size/(1024*1024))>2) //checking file size is less than 2mb or not
 {
$errors[]="file size exceeds 2 mb";
   echo "file size exceeds 2 mb";
 }
    if(empty($errors))
{
echo $ext[0]." ".$ext[1];

$newFilename = $ext[0].substr(session_id(),0,5).rand(0,1000).".".$ext[1];
move_uploaded_file($tmpName,"upload/".$newFilename);


  }
 else {
echo 'flag 1';
 }


 ?>

http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously — adeneo, Jul 23 '16 at 20:51

guest271314 · Answer 1 · 2016-07-23T21:31:09.297

0

At javascript you can set .responseType to "blob", use URL.createObjectURL()

function upload() {
  var file = document.getElementById("FileUpload1").files[0];
  var data = new FormData();
  data.append("image", file);
  var xhttp = new XMLHttpRequest(); //creating a xmlhttp request;
  xhttp.open("POST", "upload.php", true);
  xhttp.responseType = "blob";
  xhttp.send(data);
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      // alert(xhttp.responseText);
      // document.getElementById("div").innerHTML = xhttp.responseText;
      document.getElementById("Image2").src = URL.createObjectURL(xhttp.response);
    }
  };
}

at php use file_get_contents()

echo file_get_contents("upload/" . $newFilename);

edited Jul 23 '16 at 21:31

answered Jul 23 '16 at 21:18

guest271314

1
15
104
177

@TusharSah Tested which portion? Not certain what you mean? You can `echo` the content of the file, at `javascript` process `Blob` response – guest271314 Jul 23 '16 at 21:24
@TusharSah Does a file exist at `upload/" . $newFilename`? – guest271314 Jul 23 '16 at 21:26
No..file is not being uploaded – SONIA JOHNSON Jul 23 '16 at 21:27
@TusharSah You have not sent file at `upload` function. See updated post – guest271314 Jul 23 '16 at 21:30

score 0 · Answer 2 · answered Nov 11 '21 at 15:58

0

 
  var file = document.getElementById("File_1").files[0];
  var data = new FormData();
  data.append("image", file);
  var xhttp = new XMLHttpRequest(); 
  xhttp.open("POST", "--Url--", true);
  xhttp.responseType = "blob";
  xhttp.send(data);
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) { 
      document.getElementById("Image_File").src = URL.createObjectURL(xhttp.response);
    }
  };

answered Nov 11 '21 at 15:58

santhoush sankar

11
1

Thanks for contributing an answer! However, code-only answers might be better with an explanation. – no ai please Nov 11 '21 at 19:18

How to upload image using AJAX in javascript?

2 Answers2