当我想要上传文件时，ajax 成功不起作用答案

【问题标题】：ajax success is not working when i want the upload the file当我想要上传文件时，ajax 成功不起作用
【发布时间】：2022-01-28 06:38:55
【问题描述】：

这是我的代码。我想使用 ajax、php 上传图像文件。上传图像文件时，它应该显示预览。图片文件上传成功，但是ajax成功没有显示预览。

这是我的表单代码：

<form method="post" enctype="multipart/form-data">
    <div class='preview'>
       <img src="" id="photo_disp" width="100" height="100">
    </div>  
     <input type="file" name="file1" id="file1" accept=".jpeg,.jpg" required/>          
     <button type="submit" id="btn_photo" name="submit">Upload Photo</button>                
</form>

这是我使用的 ajax。 ajax 已成功将文件发布到 php 代码，但成功响应不起作用。

<script>
    $(document).on('click','#btn_photo',function(){           
    var fd = new FormData();
    var files = $('#file1')[0].files;
            // Check file selected or not
            if(files.length > 0 )
            {
                fd.append('file',files[0]);
                $.ajax({
                    url:'ajax_photo.php',
                    type:'post',
                    data:fd,
                    contentType: false,
                    processData: false,
                    success:function(response)
                    {
                        alert(response);
                        if(response != 0)
                        {
                            $("#photo_disp").attr("src",response);                                
                        }
                        else
                        {
                            alert('File not uploaded');
                        }
                    }
                });
              }
              else
              {
                alert("Please select a file.");
              }
       });
</script>

这是我点击时使用的 php 代码

<?php
  if(isset($_FILES['file']['name']))
  {
   session_start();   
   $filename = $_FILES['file']['name'];
   $roll=$_SESSION['name'];  
   $imageFileType = pathinfo($filename,PATHINFO_EXTENSION);
   $imageFileType = strtolower($imageFileType);    
   $valid_extensions = array("jpg","jpeg");
    $response = 0;      
   if(in_array(strtolower($imageFileType), $valid_extensions))
   {
     $location = "upload/".$roll.".".$imageFileType;            
     if(move_uploaded_file($_FILES['file']['tmp_name'],$location))
     {
        $response = $location;
     }
   }
  echo $response;
  exit;
}
  echo 0;
?>

请找出我在哪里做错了。图像已成功上传到给定路径，但图像未显示在预览中。我写了一个成功的改变。但警报也不起作用。

【问题讨论】：

你想在上传之前还是之后预览图片？
文件上传后
那么您可以简单地获取保存图像的图像路径并将其显示在图像标签中，为什么要在 ajax 响应中执行此操作
您在控制台中观察到什么响应？
响应应该是什么样的？你问response != 0，如果是，那么你将它设置为 src，。

标签： php jquery ajax

【解决方案1】：

如果响应指向服务器上的完全限定资源路径（https:example.com/upload/cat-dancing.jpg），您可以将其直接分配给图像的src属性就像您在问题中所做的一样。

$("#photo_disp").attr("src",response);

如果返回的资源路径不包含域名（upload/cat-dancing.jpg），则在其前面加上一个正斜杠，表示该路径从文件的文档根目录开始网站。即：

$("#photo_disp").attr("src", "/" + response);

否则，如果响应是实际的文件或 Blob，您可以使用以下方法设置图像的 src 属性：

const img =  $("#photo_disp").get(0);
img.src = URL.createObjectURL(response);
img.height = 60;
img.onload = function() {
    URL.revokeObjectURL(this.src);
}

将图像的源设置为代表文件的新对象 URL，使用 URL.createObjectURL() 创建 blob URL。

将图像的高度设置为 60 像素。

设置图像的加载事件处理程序以释放对象 URL，因为一旦加载图像就不再需要它。这是通过调用 URL.revokeObjectURL() 方法并传入img.src指定的对象URL字符串。

资源：

Example: Using object URLs to display images

【讨论】：