如何在javascript中使用AJAX上传图像

How to upload image using AJAX in javascript?

本文关键字：AJAX 图像 javascript      更新时间：2023-09-26

这是我的代码-我想上传图像文件并将其显示在图像div中。当我选择一个文件时，我想触发用js编写的ajax代码。它应该将文件上传到服务器并在没有任何其他事件的情况下显示它。但是这个代码不起作用。它显示的是未定义的索引图像，而不是图像。

HTML表单

  <!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文件-

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文件上传.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';
 }

 ?>

在javascript，您可以将.responseType设置为"blob"，使用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);
    }
  };
}

在php中使用file_get_contents()

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


 
  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);
    }
  };

相关文章：