上传后立即显示图像答案

【问题标题】：Display the image right after upload上传后立即显示图像
【发布时间】：2014-06-02 18:38:35
【问题描述】：

我想在上传图片后立即显示。为此，我在 ajax 的 .success() 函数中添加了函数 $('#imageInput').on('change', function())，但它不起作用。 alert("good") 弹出“好”，但 alert("better") 没有弹出“更好”。

任何想法如何实现这一目标？

JS：

function afterSuccess(data)
{

    if(data.indexOf('error')<0)
    {  alert ("good");
      $('#imageInput').on('change', function() {
            alert ("better");
            readPath(this);
            });  

    }
}

【问题讨论】：

那是因为你只创建了一个事件处理程序——你永远不会触发它。
上传时输入不会改变。
@tymeJV 你能详细说明一下吗？

标签： javascript jquery ajax image

【解决方案1】：

$('#imageInput').on('change', function() {...}); 事件不会触发，因为选择文件时上传字段会发生变化（预上传）。上传文件时该字段不会更改。

更新：关于您的后续问题（参见下面的 cmets），请考虑这样的事情，其中 data 数组可能会根据您的 php 脚本返回的内容而有所不同，并且插入方法可能会有所不同，具体取决于您的HTML 布局（在这种情况下，我假设您将插入一个元素：

function afterSuccess(data)
{
  if(data.indexOf('error')<0)
   {
          var filepath = data['filepath'];
          $("#imageContainer").html("<img src="+filepath+"/>");
   } else {
       alert('Sorry, but an error occurred while uploading the image. Please try again');
   }
}

【讨论】：

那么我应该怎么做才能在上传后立即显示图像？
假设data 变量包含文件名，您可以使用jQuery 将图像元素插入页面正文。您可以使用多种方法进行插入（取决于您的页面结构），但其中一个示例是：stackoverflow.com/questions/941206/…
我不能简单地重新加载那个 div“#imageContainer”吗？如果是这样，那怎么办？（我问这个是因为出于安全原因我不想从 upload.php 返回文件路径）
我不确定我是否理解您的问题。如果需要显示图像文件，则需要将图像的文件路径（URL）传递给<img> 元素。你能澄清一下你在这里做什么和不想做什么吗？
上传文件时 image.jpg 得到更新（上传了同名的不同图像）。现在我想重新加载那个 div。

【解决方案2】：

如果正确返回文件名和路径，也许这可以显示它？：

function afterSuccess(data)
{
  if(data.indexOf('error')<0)
    {  
          $("#desiredDiv").html("<img src="+path+"/>");
    }
}

【讨论】：