上传后如何在弹出窗口中显示图像？

时间：2017-01-21 12:24:56

标签： javascript jquery html css modal-dialog

我正在上传一张图片，我必须在弹出窗口中显示该图片而不点击“打开”弹出式链接。如果用户上传了图像，则直接显示弹出的用户上传的图像。我想在没有点击的情况下点击该链接。你能帮帮我吗？

$.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>

2 个答案:

答案 0 :(得分：1)

在输入上使用.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");
});

这是一个工作片段。我在模态中添加了一个额外的div class="toshow"和一些与之相关的css。您可以调整此div的高度以显示更大的图像。

＆＃13;
＆＃13; 
$.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");

});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

假设您将使用Ajax上传图片。这个hack会按照你的预期进行。

使用callback在modal中触发img并上传modal options来源。其他评论将解释

＆＃13;
＆＃13; 
$('#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");
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题