在javascript中設置默認圖像

Question

我有一個要求，如果圖像沒有被用戶上傳，我需要設置默認圖像。 我正在嘗試使用javascript設置圖像。 我的圖像位於eclipse中我項目的圖像文件夾中。

我的HTML代碼是：

<tr>
    <td align="right">Upload Image :</td>
    <td>
         <input type="file"  id="imageNonSaml" name="imageNonSaml" value=""/>
    </td>
</tr>

我的javascript是：

function testSSO(){
    var image=document.getElementById("imageNonSaml").value;
    if(image==null || image==''){
        alert("inside if");
        document.getElementById('imageNonSaml').setAttribute('name',"/assets/img/generic.png");
    }
}

Answer 1

您正在嘗試更改文件輸入的name屬性。 無法設置文件輸入的路徑。 這樣做的原因是安全性 - 如果可能的話，一個惡意網站可以設置值並自動提交表單以便從用戶的系統中竊取文件。

如果您打算設置<img />的src ，則需要在getElementById()調用中引用它，並設置src屬性，而不是name屬性。

document.getElementById('myimg').src = "/assets/img/generic.png";

Answer 2

您無法使用JavaScript修改FILE類型的輸入。 如果站點可以自動從您的計算機上傳文件，這將是一個主要的安全問題。

Answer 3

嘗試這個。

function testSSO(){
 var image = document.getElementById("imageNonSaml");
 if(image.value == null || image.value == ''){
  alert("inside if");
  image.value = "/assets/img/generic.png";
 }
}

Answer 4

可以使用JavaScript設置默認圖像，但不能使用File元素。 基本上你有3個選擇：

1.）將其設置為數據庫中的默認值。 因此，如果不進行任何更改，則在從數據庫請求時加載默認圖像。

2.）以服務器端語言設置圖像。 因此，如果數據庫中沒有圖像，則顯示默認圖像。 <img src="<% echo image %>" />

3.）如果無法加載圖像，請將JavaScript中的Img元素src屬性設置為默認圖像。

使用jQuery，這看起來類似於下面：

$("#imageid").attr("src","mydomain.com/img/imgname.png");

或者沒有jQuery看到傑伊哈里斯的回答。

至於最佳選擇，它取決於您的要求。 如果有人禁用JavaScript（現在不太可能），但仍有可能發生，那么3號可能會有問題。 我會根據項目的具體要求考慮1或2。

編輯：

要在JavaScript中設置路徑，我會使用完整的域，如下所示：

//get the url based upon what is in the browser
var url = location.protocol + "//" + location.host;
//build the image url from this
var imgurl = url + "/assets/img/generic.png";
//plug it into the jQuery selector
$("#imageid").attr("src",imgurl);