获取图像预览jQuery

Question

我想实现一个简单的jquery函数，它基本上需要一个HTML链接并显示图像预览，但我似乎无法得到它的工作。

我用的jsfiddle - http://jsfiddle.net/W69aA/1/ - 显示我想要做的代码

$('.test').blur(function() { 

    var src = jQuery(this).val(); 
    var prevImg = jQuery('#prev > [id^="prevMe-"]').length; 

    if (src == null || src == undefined) { 
     //trying to remove image if it's the same value or input is emptied 
     jQuery('#prevMe-' + (prevImg - 1)).remove(); 
    } else { 
     jQuery('#prev').append('<img id="prevMe-' + prevImg + '" style="max-width:50px;" src="' + src + '">'); 
    } 
}); 

我想：

1. 删除预览图像如果输入链接被删除
2. 如果输入有显示预览图像
3. 验证是图像[gif，jpg，png]

任何人都可以协助吗？

Answer 1

你实现共同合作的一个点的图像，我已经试着改变它做更多你想要的东西。希望能帮助到你。

http://jsfiddle.net/W69aA/10/

<script> 
$('.test').blur(function() { 

var src = jQuery(this).val(); 
var LinkedImage = $(this).data('linkedImage'); 
$(LinkedImage).remove(); 

if(!src.match("http:\/\/.*\/(.*)\.(jpg|jpeg|png|gif)") && src != "") 
{ 
    $("#warning").html("Must be an image"); 
     return false; 
} else { 
    $("#warning").html(""); 
} 

if (src != "") { 
    $('#prev').append('<img class="previewImage" style="max-width:50px;" src="' + src + '">'); 
    $(this).data('linkedImage', $('img:last' ,'#prev'));  
} 

}); 
</script> 

<input id="0" type="text" class="test" /> 
<input id="1" type="text" class="test"/> 
<input id="3" type="text" class="test"/> 

<div id="warning"></div> 
<div id="prev"></div> 

Answer 2

您可能想要更改的第一件事是在验证输入值时添加src == ""以检查空字符串。

if (src == null || src == undefined) { 

看看这个fiddle您可以验证它是否使用这个正则表达式

if(!src.match("^https?://(?:[a-z\-]+\.)+[a-z]{2,6}(?:/[^/#?]+)+\.(?:jpg|gif|png)$")) 
    { 
     alert("must be an image") 
     return false; 
    } 

你的最终代码会是这个样子

$('.test').blur(function() { 

    var src = jQuery(this).val(); 

    if(!src.match("^https?://(?:[a-z\-]+\.)+[a-z]{2,6}(?:/[^/#?]+)+\.(?:jpg|gif|png)$")) 
    { 
     alert("must be an image") 
     return false; 
    } 

    var prevImg = jQuery('#prev > [id^="prevMe-"]').length; 

    if (src == null || src == undefined || src == "") { 
     //trying to remove image if it's the same value or input is emptied 
     jQuery('#prevMe-' + (prevImg - 1)).remove(); 
    } else { 
     jQuery('#prev').append('<img id="prevMe-' + prevImg + '" style="max-width:50px;" src="' + src + '">'); 
    } 
}); 

Answer 3

我想你忘记了一点点复杂的问题： 如何获得真正的ImagePath？如果您想在不上载图像的情况下创建真实预览，则需要它。
我解决了这个问题并浪费了很多时间，因为从javascript获取路径几乎是不可能的。但最终找到了一个获得真正预览的方法。
我会在这里分享它，因为您的代码提供了足够的验证。所以我可以支持它完成。
当选择图像时，使用文件mannager或客户端的exporer创建临时路径，并且它是可访问的。因此，您必须使用方法：“URL.createObjectURL（）”从该路径创建一个对象，然后将其附加到元素的“src”属性。 这里是一个代码片段作为样本：

1. a small styles sheet to easy encode 
// myStyles.css 
// ... 
.collapsed-element { diplay: none; } 
// ... 
2. A hidden container element to prepare the previewed image 
<!-- my html page !--> 
<!-- the workhorse in a hidden container --> 
<div id="canvas-container" class="collapsed-element"> 
    <img src="" class="canvas" id="canvas-input"> 
</div><div class="clear-block"></div> 

3. The widget to have a working input set 
<!-- The imput set: a table-row with a file input and a related img-preview element --> 
<table id="my-image-getter-widget"> 
<tr> 
<td style="width: 15%" id="prw-container"> 
    <!-- fibopad.gif is a transparent pad using Fibonacci numbers as dimentions (a personal preference) --> 
    <!-- graphema will be the file input name; so I asign it as a class-prefix attribute in the related viewer --> 
    <img src="/path_to_a_transparent_image_pad/fibopad.gif" alt="" title="" width="46" height="75" class="graphema-vwr"/> 
</td> 
<td id="the-input-set-column" style="width: 85%"> 
     <!-- a text input to show the old path if you are editing and have an older loaded image --> 
     <!-- note the "graphema" word used elsewhere to relate elements and get a way to easy encode --> 
     <div class="container-inline"> 
      <div class="form-item" id="edit-graphema-txt-wrapper"> 
       <label for="edit-graphema-txt">Image File:</label> 
       <input type="text" maxlength="255" name="graphema_txt" id="edit-graphema-txt" size="45" value="" class="form-text"/> 
      </div> 
     </div> 
    <!-- The image input note the name="files[graphema]" attribute as array item --> 
    <!-- the class "enabled-prvw" will be added to inputs at onload event and will be used by javascript code to bind behaviors and get the preview --> 
     <div class="container-inline"> 
      <div class="form-item" id="edit-graphema-wrapper"> 
       <label for="edit-graphema">Load a image:</label> 
       <input type="file" name="files[graphema]" class="form-file" id="edit-graphema" size="60"/> 
      </div> 
     </div> 
    <!-- A helper tip for users --> 
    <div class="description"> 
      <br/>Blah, blah ... blah ... 
    </div> 
</td> 
</tr> 
</table><!-- widget end --> 

4. Finaly! the javascript 
// Filename: myimage-preview.js 
// a function to properly hall the preview image with a good container's resizing 
function set_dimentions_for_previewer(curwidth, curheight, standarlimit, targetid){ 
    var nw = standarlimit; 
    if(curheight > 10){ nw = parseInt((curwidth * standarlimit)/curheight); } 
    $(targetid).attr('height', standarlimit); $(targetid).attr('width', nw); 
} 

// a function to bind events and show selections (do not performs validation, so you must add it) 
// I'd commented my debug lines cause my modal dialog is not present 
function enable_preview_for_imageinput(){ 
    // var ondebug = Settings.lgq_debug_js_enabled; 
    $("input:file").each(function(){ 
    var id = '' + $(this).attr('id'); 
    var idselector = '#'+id;  
    // if(ondebug === 1){ estatus_add('binded change event<br>'); } 
    if(!$(idselector).hasClass('enabled-prvw')){ 
     $(idselector).bind("change", function(event){ 
      var chunk = id.split('-', 2); 
      var imgclass = '.'+chunk[1]+'-vwr'; 
      // /* 
      $('img.canvas').bind('load', function(){ 
       // if(ondebug === 1){ status_add('Image added to canvas <br>'); } 
       var curheight = $('img.canvas').attr('height'), curwidth = $('img.canvas').attr('width'); 
       // if(ondebug === 1){ status_add('dimentions width ='+curwidth+', height ='+curheight+' <br>'); } 
       set_dimentions_for_previewer(curwidth, curheight, 75, imgclass); 
       $('img.canvas').unbind('load'); 
      }); 
      $('.canvas').attr('src',URL.createObjectURL(event.target.files[0]));   
      $(imgclass).fadeIn("fast").attr('src',URL.createObjectURL(event.target.files[0])); 
      // var tit = 'Change event at '+id; 
      // var msg = ''+$(idselector).val();   
      // message_sys(tit, msg); 
     }); 
     $(idselector).addClass('enabled-prvw') 
    } 
    // if(ondebug === 1){ estatus_add('Binded input: '+id+' \n'); } 
    }); 
    // if(ondebug === 1){ message_sys('Load success', get_status()); } 
} 

// an onload call to enable all 
$(document).ready(function(){ 
    enable_preview_for_imageinput(); 
});