通过更改 Selector 重用代码

Question

我是编程初学者。我正在寻找一种在外部文件中重用我的图像预览 JQuery 代码的方法。 我想制作一个包含多个图像的表单，并且我想在提交之前预览所有图像。 我的单图预览代码如下：

$(function () {
    Test = {
        UpdatePreview: function (obj) {
            // if IE < 10 doesn't support FileReader
            if (!window.FileReader) {
                // don't know how to proceed to assign src to image tag
            } else {
                var reader = new FileReader();
                var target = null;

                reader.onload = function (e) {
                    target = e.target || e.srcElement;
                    $("#preview").attr("src", target.result);
                };
                reader.readAsDataURL(obj.files[0]);
            }
        }
    };
});

preview 是我的图片标签的 id。

我是编程的绝对初学者，所以请逐步指导我。 谢谢

Answer 1

这样定义：

$(function () {
    Test = {
        UpdatePreview: function (obj, selector) {
            // if IE < 10 doesn't support FileReader
            if (!window.FileReader) {
                // don't know how to proceed to assign src to image tag
            } else {
                var reader = new FileReader();
                var target = null;

                reader.onload = function (e) {
                    target = e.target || e.srcElement;
                    $(selector).attr("src", target.result);
                };
                reader.readAsDataURL(obj.files[0]);
            }
        }
    };
});

这样调用：

Test.UpdatePreview(obj, "#preview");
Test.UpdatePreview(obj, "#preview2");

或者将函数附加到prototype，由Jean-Paul 给出：

(function($){
    $.fn.UpdatePreview = function(obj) {
            // if IE < 10 doesn't support FileReader
            if (!window.FileReader) {
            // don't know how to proceed to assign src to image tag
            } else {
                var reader = new FileReader();
                var target = null;

                reader.onload = function (e) {
                    target = e.target || e.srcElement;
                        $(this).attr("src", target.result);
                    };
                reader.readAsDataURL(obj.files[0]);
            }
        }        
    }; 
})( jQuery );

然后这样调用：

$("#preview").UpdatePreview(obj);
$("#preview2").UpdatePreview(obj);

但是，除了重新发明轮子（来自 this answer），您还可以使用现成的代码，例如 this example，它会在加载时预览图像。

Answer 2

你需要做的是创建一个函数，该函数只作用于调用它的对象。

一个很好的例子是下面的函数：

(function($){
   $.fn.myfunction = function() {
      alert(this.text());
      return this;
   }; 
})(jQuery);

此函数将alert() 的文本div 您调用该函数。例如，假设我们有以下 div：

<div id="my_div">Test</div>

现在如果我如下调用函数：

$('#my_div').myfunction();

生成的警报消息将显示 'Test'（请参阅this demo）。

这是因为myfunction 使用关键字this 来标识调用对象。

这也是您需要为您的函数做的事情：使其成为一个通用函数，以便它适用于每个调用对象。然后你只需用你的个人图像调用它，它应该可以工作。

更改您的代码以允许这样做，您最终会得到类似于：

(function($){
    $.fn.UpdatePreview = function(obj) {
            // if IE < 10 doesn't support FileReader
            if (!window.FileReader) {
            // don't know how to proceed to assign src to image tag
            } else {
                var reader = new FileReader();
                var target = null;

                reader.onload = function (e) {
                    target = e.target || e.srcElement;
                        $(this).attr("src", target.result);
                    };
                reader.readAsDataURL(obj.files[0]);
            }
        }        
    }; 
})(jQuery);

但是，此功能还远未完成，因为您仍然需要确保加载了相应的图像，并且您仍然需要创建一个div 显示来预览图像。与其自己重新发明轮子，不如直接复制现成的代码？

例如，this jsFiddle 显示了一个漂亮的带预览的 FileReader。