Question

我有这样的图像

<input type="file" name="pic_file" id="photo_file">
<img id="image_holder" src="" />

<img>来源由用户设置，但文件输入如上面的代码所示。我希望img与<a>链接，但由于我还没有保存图像，但我无法将相对链接放到全尺寸图像上。我如何使用正在显示的图像的缓存版本并将其用作类似这样的链接

 <a href="cached_img with id=image_holder"><img id="image_holder" src="" /></a>

此时用户已经上传了一张图片，因此src不会为空

由于

Answer 1

在JavaScript中尝试这样的事情：

var photofile = document.getElementById("photo_file");

photofile.onchange = function(){
    if (photofile.files && photofile.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            var result = e.target.result;
            photofile.insertAdjacentHTML("afterend", "<a href='" + result + "' target='_blank'><img src='" + result + "' id='image_holder'/></a>");
        }

        reader.readAsDataURL(this.files[0]);
    }    
};

JSFiddle ..

选择图像后，这会在<img>标记中显示图像，其中的链接会在点击时在新标签页中打开图像。

在HTML中链接<img/>

1 个答案: