Question

jQuery脚本代码：

$(function() {
   $('#html_btn1').change(function(){

        var val = $(this).val();
        switch(val.substring(val.lastIndexOf('.')+1).toLowerCase()){
        case 'jpg' : 
        case 'png' :
        case 'gif' :
        case 'jpeg' : showimagepreview1(this); break;
        default : $('#errorimg').html("Invalid Photo"); break;
        }

    });

    $('#html_btn2').change(function(){

        var val = $(this).val();
        switch(val.substring(val.lastIndexOf('.')+1).toLowerCase()){
        case 'jpg' : 
        case 'png' :
        case 'gif' :
        case 'jpeg' : showimagepreview2(this); break;
        default : $('#errorimg').html("Invalid Photo"); break;
        }

    });

    $('#html_btn3').change(function(){

        var val = $(this).val();
        switch(val.substring(val.lastIndexOf('.')+1).toLowerCase()){
        case 'jpg' : 
        case 'png' :
        case 'gif' :
        case 'jpeg' : showimagepreview3(this); break;
        default : $('#errorimg').html("Invalid Photo"); break;
        }
    });

    function showimagepreview1(input) {
        if (input.files && input.files[0]) {
            var filerdr = new FileReader();
            filerdr.onload = function(e) {
                $('#cu1').attr('src', e.target.result);
            };
            filerdr.readAsDataURL(input.files[0]);
        }
    }

    function showimagepreview2(input) {

        if (input.files && input.files[0]) {
            var filerdr = new FileReader();
            filerdr.onload = function(e) {
                $('#cu2').attr('src', e.target.result);
            };
            filerdr.readAsDataURL(input.files[0]);
        }
    }

    function showimagepreview3(input) {

        if (input.files && input.files[0]) {
            var filerdr = new FileReader();
            filerdr.onload = function(e) {
                $('#cu3').attr('src', e.target.result);
            };
            filerdr.readAsDataURL(input.files[0]);
        }
    }
});

HTML标记：

 <div class="form-group">
      <img id="cu1" src="upload-photo-img.jpg"/>
           <input type="file" path="images" id="html_btn1" />
     <img id="cu2" src="upload-photo-img.jpg"/>
           <input type="file" path="images" id="html_btn2" />
      <img id="cu3" src="upload-photo-img.jpg"/>
           <input type="file" path="images" id="html_btn3" />
 </div>

以上代码在我尝试上传图片时工作正常，它会检查验证并预览图片

但是我想将我的代码最小化为只有一个更改函数和一个showimagepreview函数

请给我一个如何实现的想法？

Answer 1

@Huangism是正确的，这应该是在codereview上。但是，为了帮助：

$(function() {
    // combine binding selector in to one
   $('#html_btn1,#html_btn2,#html_btn3').change(function(){

        var val = $(this).val();
        switch(val.substring(val.lastIndexOf('.')+1).toLowerCase()){
        case 'jpg' : 
        case 'png' :
        case 'gif' :
        case 'jpeg' : showimagepreview(this); break; // change to single "showimagepreview" function
        default : $('#errorimg').html("Invalid Photo"); break;
        }

    });

    function showimagepreview(input) {
        // grab "cu#" using the original element's id
        var cu_id = '#cu' + input.id.match(/\d+$/)[0];
        /* alt: var cu_id = input.id.replace('html_btn','#cu'); */

        if (input.files && input.files[0]) {
            var filerdr = new FileReader();
            filerdr.onload = function(e) {
                // reference id here
                $(cu_id).attr('src', e.target.result);
            };
            filerdr.readAsDataURL(input.files[0]);

        }
    }
});

使用逗号分隔选择器
删除重复的showimagepreview#方法并统一为一个函数
- 根据原始输入的ID将硬编码的cu# ID更改为动态ID。
- 在选择器中引用该ID。

Answer 2

使用课程会不容易？只要您使用'this'

保持范围

你应该没有像这样的两个通用函数

$('.addClassToImages').change(function(){

    var val = $(this).val();
    switch(val.substring(val.lastIndexOf('.')+1).toLowerCase()){
    case 'jpg' : 
    case 'png' :
    case 'gif' :
    case 'jpeg' : showimagepreview3(this); break;
    default : $('#errorimg').html("Invalid Photo"); break;
    }

});


function showimagepreview1(input) {
    var cu_id = '#cu' + input.id.match(/\d+$/)[0];

    if (input.files && input.files[0]) {
        var filerdr = new FileReader();
        filerdr.onload = function(e) {
            $(cu_id).attr('src', e.target.result);
        };
        filerdr.readAsDataURL(input.files[0]);

    }
}

HTML：

<div class="form-group">
  <img id="cu1" src="upload-photo-img.jpg"/>
       <input class="addClassToImages" type="file" path="images" id="html_btn1" />
 <img id="cu2" src="upload-photo-img.jpg"/>
       <input class="addClassToImages" type="file" path="images" id="html_btn2" />
  <img id="cu3" src="upload-photo-img.jpg"/>
       <input class="addClassToImages" type="file" path="images" id="html_btn3" />
 </div>

Answer 3

使用Javascript：

    $(function() {
   $('input[type=file]').change(function(){
        var val = $(this).val();
        switch(val.substring(val.lastIndexOf('.')+1).toLowerCase()){
        case 'jpg' : 
        case 'png' : showimagepreview(this); break;
        case 'gif' :
        case 'jpeg' : showimagepreview(this); break;
        default : $('#errorimg').html("Invalid Photo"); break;
        }
    });

    function showimagepreview(input) {
        if (input.files && input.files[0]) {
            var filerdr = new FileReader();
            filerdr.onload = function(e) {
                $('#cu'+input.id).attr('src', e.target.result);
            };
            filerdr.readAsDataURL(input.files[0]);
        }
    }
});

HTML：

<div class="form-group">
  <img id="cu1" src="upload-photo-img.jpg"/>
       <input type="file" path="images" id="1" />
 <img id="cu2" src="upload-photo-img.jpg"/>
       <input type="file" path="images" id="2" />
  <img id="cu3" src="upload-photo-img.jpg"/>
       <input type="file" path="images" id="3" />

编辑 - 更新链接 http://jsfiddle.net/S4mk2/

而且......正如Brad Christie所说，这对于HTML5来说是理想的

如何在jQuery中基于选择器最小化代码

3 个答案: