上傳后如何在彈出窗口中顯示圖像？

Question

我正在上傳我必須在彈出窗口中顯示的圖像，而無需單擊“打開彈出窗口”鏈接。 如果用戶上傳了圖像，則直接顯示帶有用戶上傳圖像的彈出窗口。 我想點擊那個鏈接而不點擊。 你會幫我嗎？

 $.fn.expose = function(options) { var $modal = $(this), $trigger = $("a[href=" + this.selector + "]"); $modal.on("expose:open", function() { $modal.addClass("is-visible"); $modal.trigger("expose:opened"); }); $modal.on("expose:close", function() { $modal.removeClass("is-visible"); $modal.trigger("expose:closed"); }); $trigger.on("click", function(e) { e.preventDefault(); $modal.trigger("expose:open"); }); $modal.add( $modal.find(".close") ).on("click", function(e) { e.preventDefault(); // if it isn't the background or close button, bail if( e.target !== this ) return; $modal.trigger("expose:close"); }); return; } $("#Popup").expose(); // Example Cancel Button $(".cancel").on("click", function(e) { e.preventDefault(); $(this).trigger("expose:close"); });

 .Modal { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; visibility: hidden; } .Modal .content { position: absolute; left: 50%; top: 30%; width: 50%; padding: 50px; border-radius: 3px; background: #fff; transform: translate(-50%, -30%) scale(0); } .Modal .close { position: absolute; top: 8px; right: 8px; display: block; width: 18px; height: 18px; padding: 5px; line-height: 18px; border-radius: 50%; text-align: center; cursor: pointer; background: #2ecc71; color: #fff; } .Modal .close:before { content: '\\2715'; } .Modal.is-visible { visibility: visible; background: rgba(0, 0, 0, 0.5); -webkit-transition: background .35s; -moz-transition: background .35s; transition: background .35s; -webkit-transition-delay: .1s; -moz-transition-delay: .1s; transition-delay: .1s; } .Modal.is-visible .content { -webkit-transform: translate(-50%, -30%) scale(1); -moz-transform: translate(-50%, -30%) scale(1); transform: translate(-50%, -30%) scale(1); -webkit-transform: transition: transform .35s; -moz-transform: transition: transform .35s; transition: transform .35s; }

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="file" id="upload" value="Choose a file"> <a href="#Popup" class="button">Open Popup</a> <!--popup content here--> <div id="Popup" class="Modal"> <div class="content"> <h2>Image display here after uploading</h2> <a href="#" class="cancel">Cancel</a> <span class="close"></div> </div> </div>

Answer 1

假設您將使用Ajax上傳圖像。 這個 hack 會按你的預期做。

使用callback在modal options觸發modal和上傳的img源。 休息評論會解釋

 $('#upload').change(function(){ //image change listener var files = $(this).get(0).files; var img = window.URL.createObjectURL(files[0]); //first file $("#Popup").expose({src: img}, function(modal){ //your image uploading here setTimeout(function(){ //mocking upload here console.log("came to click"); modal.trigger("expose:open");//keep this in after your Ajax Upload Success }, 2000); }); }); $.fn.expose = function(options, callback) { var $modal = $(this), $trigger = $("a[href=" + this.selector + "]"); callback($modal); $("#uploaded-image").attr('src', options.src); //setting img src $modal.on("expose:open", function() { $modal.addClass("is-visible"); $modal.trigger("expose:opened"); }); $modal.on("expose:close", function() { $modal.removeClass("is-visible"); $modal.trigger("expose:closed"); }); $trigger.on("click", function(e) { e.preventDefault(); $modal.trigger("expose:open"); }); $modal.add( $modal.find(".close") ).on("click", function(e) { e.preventDefault(); // if it isn't the background or close button, bail if( e.target !== this ) return; $modal.trigger("expose:close"); }); return; } // Example Cancel Button $(".cancel").on("click", function(e) { e.preventDefault(); $(this).trigger("expose:close"); });

 .Modal { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; visibility: hidden; } .Modal .content { position: absolute; left: 50%; top: 30%; width: 50%; padding: 50px; border-radius: 3px; background: #fff; transform: translate(-50%, -30%) scale(0); } .Modal .close { position: absolute; top: 8px; right: 8px; display: block; width: 18px; height: 18px; padding: 5px; line-height: 18px; border-radius: 50%; text-align: center; cursor: pointer; background: #2ecc71; color: #fff; } .Modal .close:before { content: '\\2715'; } .Modal.is-visible { visibility: visible; background: rgba(0, 0, 0, 0.5); -webkit-transition: background .35s; -moz-transition: background .35s; transition: background .35s; -webkit-transition-delay: .1s; -moz-transition-delay: .1s; transition-delay: .1s; } .Modal.is-visible .content { -webkit-transform: translate(-50%, -30%) scale(1); -moz-transform: translate(-50%, -30%) scale(1); transform: translate(-50%, -30%) scale(1); -webkit-transform: transition: transform .35s; -moz-transform: transition: transform .35s; transition: transform .35s; }

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="file" id="upload" value="Choose a file"> <a href="#Popup" class="button">Open Popup</a> <!--popup content here--> <div id="Popup" class="Modal"> <div class="content"> <h2>Image display here after uploading</h2> <img id="uploaded-image"/> <a href="#" class="cancel">Cancel</a> <span class="close"></div> </div> </div>

Answer 2

在輸入上使用.on(change)函數來觸發模態。

$("input[type='file']").on("change", function(event1) {
    src1 = URL.createObjectURL(event1.target.files[0]);
    $(".toshow").css('background-image','none');
    $(".toshow").css('background-image','url(' + src1 + ')');
    $(".Modal").trigger("expose:open");
});

這是一個工作片段。 我在模態中添加了一個class="toshow"的額外 div 和一些與之相關的 css。 您可以調整此 div 的高度以顯示更大的圖像。

 $.fn.expose = function(options) { var $modal = $(this), $trigger = $("a[href=" + this.selector + "]"); $modal.on("expose:open", function() { $modal.addClass("is-visible"); $modal.trigger("expose:opened"); }); $modal.on("expose:close", function() { $modal.removeClass("is-visible"); $modal.trigger("expose:closed"); }); $trigger.on("click", function(e) { e.preventDefault(); $modal.trigger("expose:open"); }); $modal.add( $modal.find(".close") ).on("click", function(e) { e.preventDefault(); // if it isn't the background or close button, bail if( e.target !== this ) return; $modal.trigger("expose:close"); }); return; } $("#Popup").expose(); // Example Cancel Button $(".cancel").on("click", function(e) { e.preventDefault(); $(this).trigger("expose:close"); }); $("input[type='file']").on("change", function(event1) { src1 = URL.createObjectURL(event1.target.files[0]); $(".toshow").css('background-image','none'); $(".toshow").css('background-image','url(' + src1 + ')'); $(".Modal").trigger("expose:open"); });

 .Modal { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; visibility: hidden; } .Modal .content { position: absolute; left: 50%; top: 30%; width: 50%; padding: 50px; border-radius: 3px; transform: translate(-50%, -30%) scale(0); } .content .toshow{ background-repeat:no-repeat; width:100%; height:100px; background-position:center; background-size:contain; } .Modal .close { position: absolute; top: 8px; right: 8px; display: block; width: 18px; height: 18px; padding: 5px; line-height: 18px; border-radius: 50%; text-align: center; cursor: pointer; background: #2ecc71; color: #fff; } .Modal .close:before { content: '\\2715'; } .Modal.is-visible { visibility: visible; background: rgba(0, 0, 0, 0.5); -webkit-transition: background .35s; -moz-transition: background .35s; transition: background .35s; -webkit-transition-delay: .1s; -moz-transition-delay: .1s; transition-delay: .1s; } .Modal.is-visible .content { -webkit-transform: translate(-50%, -30%) scale(1); -moz-transform: translate(-50%, -30%) scale(1); transform: translate(-50%, -30%) scale(1); -webkit-transform: transition: transform .35s; -moz-transform: transition: transform .35s; transition: transform .35s; }

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="file" id="upload" value="Choose a file"> <a href="#Popup" class="button">Open Popup</a> <!--popup content here--> <div id="Popup" class="Modal"> <div class="content"> <div class="toshow"></div> <a href="#" class="cancel">Cancel</a> <span class="close"></span></div> </div>