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 + '">');
    }
});

我想：

如果删除了输入链接，则删除预览图像
如果有输入
验证它是图像[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

我觉得你忘了一点点复杂的问题：如何获得真实的图像路径？如果您想在不上传图像的情况下创建真实预览，则需要它我解决这个问题并浪费了很多时间，因为从javascript获取路径几乎是不可能的。但最终找到了一种方法来获得真实的预览我将在此处分享，因为您的代码提供了足够好的验证。所以我可以说它完成了。
当选择图像时，使用文件管理器或客户端的exporer，创建临时路径，并且它是可访问的。因此，您必须使用以下方法从该路径创建对象：＆＃34; URL.createObjectURL（）＆＃34;然后将其附加到＆lt; img /＆gt;元素＆＃34; src＆＃34;属性。这是一个代码片段作为示例：

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();
});

获取图像预览jQuery

3 个答案: