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

【问题标题】：How to upload image using AJAX in javascript?如何在 javascript 中使用 AJAX 上传图片？
【发布时间】：2016-11-27 12:42:48
【问题描述】：

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


 ?>

【问题讨论】：

stackoverflow.com/questions/166221/…

标签： javascript php jquery html ajax

【解决方案1】：

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

【讨论】：

感谢您提供答案！但是，如果有解释，纯代码的答案可能会更好。

【解决方案2】：

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

【讨论】：

@TusharSah 测试了哪个部分？不确定你的意思？你可以echo文件的内容，在javascript处理Blob响应
@TusharSah upload/" . $newFilename 是否存在文件？
No..文件没有上传
@TusharSah 你还没有在upload函数发送文件。查看更新后的帖子