如何從文件系統中加載圖片並使用Jquery預覽

Question

在添加頁面（add.aspx）中使用輸入文件控制來預覽（使用Jquery）並上傳圖片（完美地工作）。

在使用不同的url參數時，Add Page（add.aspx）意味着從上傳的文件路徑加載圖像並在加載時預覽它。

我卡住了，不知道如何實現它？任何幫助都感激不盡！！

如果我使用相同的輸入：文件來使用jquery代碼動態加載圖片，它會容易得多，因爲我正在加載頁面中的圖像負載？

jQuery代碼預覽

$(function() { 
     // Create the close button 
     var closebtn = $('<button/>', { 
      type: "button", 
      text: 'x', 
      id: 'close-preview', 
      style: 'font-size: initial;', 
     }); 
     closebtn.attr("class", "close pull-right"); 
     // Set the popover default content 
     $('#div_email_logo').popover({ 
      trigger: 'manual', 
      html: true, 
      title: "<strong>Preview</strong>" + $(closebtn)[0].outerHTML, 
      content: "There's no image", 
      placement: 'bottom' 
     }); 
     // Clear event 
     $('#btn_email_logo').click(function() { 
      $('#div_email_logo').attr("data-content", "").popover('hide'); 
      $('#txb_email_logo').val(""); 
      $('#btn_email_logo').hide(); 
      $('#div_email_logo_preview input:file').val(""); 
      $("#sp_email_logo").text("Browse"); 
     }); 
     // Create the preview image 
     $("#div_email_logo_preview input:file").change(function() { 
      var img = $('<img/>', { 
       id: 'dynamic', 
       width: 250, 
       height: 200 
      }); 
      var file = this.files[0]; 
      var reader = new FileReader(); 
      // Set preview image into the popover data-content 
      reader.onload = function (e) { 
       $("#sp_email_logo").text("Change"); 
       $("#btn_email_logo").show(); 
       $("#txb_email_logo").val(file.name); 
       img.attr('src', e.target.result); 
       $("#div_email_logo").attr("data-content", $(img)[0].outerHTML).popover("show"); 
      } 
      reader.readAsDataURL(file); 
     }); 

<div class=" image-preview form-group col-lg-6" id="div_email_logo" style="display: table"> 
           <input type="text" class="form-control image-preview-filename" runat="server" disabled="disabled" placeholder="email Logo" id="txb_email_logo"> 
           <!-- don't give a name === doesn't send on POST/GET --> 
           <span class="input-group-btn"> 
            <!-- image-preview-clear button --> 
            <button type="button" class="btn btn-default image-preview-clear" id="btn_email_logo" style="display: none;"> 
             <span class="glyphicon glyphicon-remove"></span>Clear 
            </button> 
            <!-- image-preview-input --> 
            <div class="btn btn-default image-preview-input" id="div_email_logo_preview"> 
             <span class="glyphicon glyphicon-folder-open"></span> 
             <span class="image-preview-input-title" id="sp_email_logo">Browse</span> 
             <%-- <input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview" />--%> 
             <asp:FileUpload ID="uplemail_Logo" runat="server" class="image-logo" err="required" filetype="image" accept=".jpg , .gif ,.png ,.jpeg" required="True" /> 
             <!-- rename it --> 
            </div> 
           </span> 
          </div> 

快照圖像預覽的

所有的例子都是從頁面添加圖片時？我想使用相同的頁面從文件系統加載上傳的圖像？最好是相同的控制和代碼輕微調整？

Answer 1

終於實現了，

現在我可以加載的圖片和預覽頁面加載時

的確在代碼

下面一些調整是工作代碼

Jquery

// Create the close button 
      var closebtn = $('<button/>', { 
       type: "button", 
       text: 'x', 
       id: 'print-close-preview', 
       style: 'font-size: initial;', 
      }); 
      closebtn.attr("class", "close pull-right"); 
      // Set the popover default content 
      $('#div_print_logo').popover({ 
       trigger: 'manual', 
       html: true, 
       title: "<strong>Preview</strong>" + $(closebtn)[0].outerHTML, 
       content: "There's no image", 
       placement: 'bottom' 
      }); 
      // Clear event 
      $('#btn_print_logo').click(function() { 
       $('#div_print_logo').attr("data-content", "").popover('hide'); 
       $('#txb_print_logo').val(""); 
       $('#btn_print_logo').hide(); 
       $('#div_print_logo_preview input:file').val(""); 
       $("#sp_print_logo").text("Browse"); 
      }); 
      // Create the preview image 
      $("#div_print_logo_preview input:file").change(function() { 
       var img = $('<img/>', { 
        id: 'dynamic', 
        width: 250, 
        height: 200 
       }); 
       var file = this.files[0]; 
       var reader = new FileReader(); 
       // Set preview image into the popover data-content 
       reader.onload = function (e) { 
        $("#sp_print_logo").text("Change"); 
        $("#btn_print_logo").show(); 
        $("#txb_print_logo").val(file.name); 
        img.attr('src', e.target.result); 
        $("#div_print_logo").attr("data-content", $(img)[0].outerHTML).popover("show"); 
       } 
// New tweaks 
       if (file) { 
        reader.readAsDataURL(file); 
       } 
       else { 
        $("#sp_print_logo").text("Change"); 
        $("#btn_print_logo").show(); 
        var src = $('#<%= imgPrintLogo.ClientID%>').attr("src"); 
        img.attr('src', src); 
        $("#div_print_logo").attr("data-content", $(img)[0].outerHTML).popover("show"); 
       } 
      }); 

.aspx的

div class=" image-preview form-group col-lg-6" id="div_email_logo" style="display: table"> 
           <input type="text" class="form-control image-preview-filename" runat="server" disabled="disabled" placeholder="email Logo" id="txb_email_logo"> 
           <!-- don't give a name === doesn't send on POST/GET --> 
           <span class="input-group-btn"> 
            <!-- image-preview-clear button --> 
            <button type="button" class="btn btn-default image-preview-clear" id="btn_email_logo" style="display: none;"> 
             <span class="glyphicon glyphicon-remove"></span>Clear 
            </button> 
            <!-- image-preview-input --> 
            <div class="btn btn-default image-preview-input" id="div_email_logo_preview"> 
             <span class="glyphicon glyphicon-folder-open"></span> 
             <span class="image-preview-input-title" id="sp_email_logo">Browse</span> 

             <asp:FileUpload ID="uplemail_Logo" runat="server" class="image-logo" err="required" filetype="image" accept=".jpg , .gif ,.png ,.jpeg" required="True" /> 
<%-- Added Tweaks--%> 
             <asp:Image ID="imgLogo" runat="server" Width="250" height="200" style="display: none;"/> 
             <!-- rename it --> 
            </div> 
           </span> 
          </div> 

更新的圖像（imgLogo）在服務器端在網頁加載鏈接值（C＃）。