Question

这是我的代码 - 我想上传图片文件并在图片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 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';
 }


 ?>

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

如何在javascript中使用AJAX上传图片？

1 个答案: