javascript - 预览上传的文件（图片）

Question

我有一个已经使用（PHP）上传到服务器的文件input type="file"，我的问题是，如何在下载之前预览图像。我想在每个下载文件名链接上放一个预览按钮。单击预览按钮，它将弹出并显示图像。

有人知道预览图像的编码吗？谢谢

Answer 1

您可以使用一些 javascript/jQuery：

    function readURL(input) {
        if (input.files) {
            for (var i = 0; i < input.files.length; i++) {
                if(input.files[i]) {
                    preview(input, i);  
                }
            }   
        }
    } 

function preview(input, i) {
    var reader = new FileReader();

    reader.onload = function (e) {
        $('#divID').html('<img src="'+e.target.result+'" alt="Image currently not accessible" />');
    };

    reader.readAsDataURL(input.files[i]);
}

    $('input[type=file]').on('change', function() {
        readURL(this);
    });

对于 HTML 部分：

<div id="divID"></div>

请注意，这使用了相当多的大图像资源。