如何从html5文件上传中提取图像的数据url答案

【问题标题】：How to extract data url of image from html5 file upload如何从html5文件上传中提取图像的数据url
【发布时间】：2012-06-07 23:17:07
【问题描述】：

我目前正在创建一个上传应用程序，我希望图像在用户上传之前显示在浏览器中。我在让图像正常工作时遇到问题。我可以渲染最后修改的文件名，但我无法让 dataurl 工作。

这是我的渲染脚本。该脚本基本上加载一个页面，并应在加载的 div 中呈现图像。但现在，我只能渲染文件名。如果你们能帮助我，我将不胜感激。我已经花了 2 天时间试图让这项工作无济于事。

$('#MainPageUploadFormFile').change(function(){
    $('#MainPageContainer').fadeOut()
     .load('AlbumEdit').hide()
     .slideDown();

    var img = document.getElementById('MainPageUploadFormFile');

    setTimeout(function(){
        //    $('#PictureColumn ul').append('<li>' + name + '</li>');
        for (var i = 0; i < img.files.length; ++i) {
            var name = img.files.item(i).name;
            $('#PictureColumn ul').append('<li>' + name + '</li>');
        }
    },100);
});

【问题讨论】：

标签： jquery html upload fileapi

【解决方案1】：

您只是想在上传之前查看您选择的图片吗？

Preview an image before it is uploaded

【讨论】：