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