是否有可能上傳後顯示的fancybox圖像和之前提交

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>