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");

或者将功能附加到Jean-Paul所提供的prototype：

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

生成的提醒消息将显示'测试'（请参阅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。

通过更改选择器重用代码

2 个答案: