通過更改選擇器重用代碼

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

產生的警報消息會說「測試」（看到自己在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預覽。