Question

form.html

<input type="file" name="img" onchange="previewFile(this)" >
<a href="#">Preview</a>

上传后，我希望在点击预览时在fancybox中显示。我在现有图片上添加fancybox但是如何添加上传图片？

对于我使用的现有图像，它可以正常使用

$("a.fancybox").fancybox();

Answer 1

您可以使用img标签进行图像预览

var previewFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
    };

 <input type="file" name="img" onchange="previewFile(event)" > <br>
   <a class="fancybox"><img id="output" alt="Preview Image" width="300" height="300"/></a>

是否可以在上传后和提交前在fancybox中显示图像

1 个答案: