Php 是否可以显示图像缩略图而不将其上载到服务器？

我想让用户上传图像到服务器，并为每个图像添加一些信息（如描述、标签）。
我用来上传多个图像

我想知道在图像实际上传到服务器之前，是否可以显示图像的缩略图（同时用户输入关于每个图像的附加信息）

我希望用户具有以下体验：

• 选择多个图像文件
• 之后立即在查看图像缩略图时输入有关每个图像的附加信息
• 按

  上传文件

  按钮将图像上传到服务器，然后去喝咖啡

我找到了，但我想它也会在显示图像缩略图之前上传文件

---

我将感谢任何帮助

如果您可以强制使用支持HTML5的浏览器，则可以使用文件api

---

示例：

确保这是可能的。使用

FileReader

对象获取数据URL（如果您确定客户端实现了该URL，则使用

File.URL

），并将其分配给

new Image（）

对象。然后您可以将图像插入DOM。

我确信flash和java都可以做到这一点。Flash需要某些（明显的）安全预防措施（即，您可以对任何文件执行此操作，它必须由用户选择）。

---

同时，java将显示一个安全弹出窗口。

作为基于标准的HTML5API的替代方案，您可以使用Flash或其他插件

实际上，有一个现成的应用程序，它可能正是您想要的。它叫。您可以使用各种“运行时”上载文件/图像，并在上载之前进行客户端图像大小调整。我想你可以在那里的某个地方，在某些运行时钩住一个缩略图预览

否则，您可以尝试使用HTML5/Gears//etc.api从头开始构建所需内容。

发布了此解决方案，我尝试改进它，使其能够处理多个文件输入。我希望有帮助

$("body").on('change', 'input:file', function(e){
for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {

        var file = e.originalEvent.srcElement.files[i];

        var img = document.createElement("img");
        var reader = new FileReader();
        reader.onloadend = function() {
             img.src = reader.result;
        }
        img.width = "50";
        reader.readAsDataURL(file);
        if($(this).next().hasClass('image_place')){
          $(this).next('.image_place').html('').append(img);
        }else {
          $(this).after('<div class="image_place"></div>');
          $(this).next('.image_place').append(img);
        }
    }
});

$（“body”）.on（'change'，'input:file'，function（e）{
对于（var i=0；i

它扫描文档体中的所有文件输入，并使用FileReader api读取图像。如果它找到任何图像，它会创建一个名为“image\u place”的div，他将图像放在其中。如果里面已经有图像，脚本将替换该图像。

复制：