Question

我想让用户上传图片到服务器添加一些关于每张图片的信息（例如说明，标签）。
我使用Uploadify上传多张图片。

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

我希望用户有以下经验：

选择多个图像文件
在此之后立即输入有关每张图片的其他信息，同时查看图片缩略图
按Upload Files按钮将图像上传到服务器，然后去喝咖啡......

我找到this script，但我认为它还会在显示图片缩略图之前上传文件。

我将不胜感激任何帮助！

Answer 1

如果您可以强制执行支持HTML 5的浏览器，则可以使用file-api

示例：http://html5demos.com/file-api

Answer 2

当然有可能。使用FileReader对象获取数据URL（如果您确定客户端实现了它，则使用File.url。）并将其分配给new Image()对象。然后，您可以将图像插入DOM。

Answer 3

作为基于标准的HTML5 API的替代方案，您可以使用Flash或Browserplus等插件。

实际上有一个现成的应用程序可能完全符合您的要求。它被称为Plupload。您可以使用各种“运行时”上传文件/图像，并在上传之前进行客户端图像大小调整。我想你可以在某些运行时将钩子预览挂钩到那里。

否则，您可以尝试使用HTML5 / Gears / BrowserPlus /等API从头开始构建您想要的内容。

Answer 4

我很确定flash和java都能做到。 Flash需要某些（明显的）安全预防措施（即，您可以对任何文件执行此操作，必须由用户选择）。同时java会显示一个安全弹出窗口。

Answer 5

Xavier在another thread上发布了此解决方案，我尝试改进它以使用多个文件输入。我希望它有所帮助。

$("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);
        }
    }
});

它扫描文档正文中的所有文件输入，并使用FileReader api读取图像。如果它找到任何图像，它会创建一个名为“image_place”的div，在那里放置图像。如果里面已有图像，脚本将替换图像。

是否可以在不将其上传到服务器的情况下显示图像缩略图？

5 个答案: