Question

网页如何用javascript写输入名称后,点击按钮显示图片

由于工作关系经常需要查看图片，而图片又很多，我想制作一个本地网页，有一个文本框，输入图片名称，点击按钮后图片显示在页面上，请问用javascript代码该怎么写？

Answer 1

声明只能用于 IE内核浏览器 chrome浏览器获取文件路径麻烦，火狐太卡。。。

如果网页和图片在同一文件夹下，直接xx.jpg为路径，子文件夹img/xxx.jpg

如果不是，file:///C:/xx.jpg为本地路径，因此先要获得文件夹路径

可以先放个input file控件来获取文件夹路径，在放个输入框输入文件名

把文件名和路径拼起来作为img 标签的src，这样就行了，很简易

调用fso对象new ActiveXObject("Scripting.FileSystemObject")读取遍历文件，输入几个字就匹配出来包含文字的文件

简单的我写一下，高级点的你自己琢磨一下吧

<input type="file" id="file" />
<input type="text" id="text" />
<input type="button" value="显示" id="button" />
<img id="img" src="http://www.baidu.com/img/bdlogo.gif"/>
<script>
var file=document.getElementById("file")
,text=document.getElementById("text")
,img=document.getElementById("img")
,button=document.getElementById("button");
button.onclick=function(){
    if(file.value){//已设定文件夹
        var v=file.value.replace(/\\/g,"/");
        img.src="file:///"+v.substring(0,v.lastIndexOf("/"))+"/"+text.value;
    }else{//同一文件夹
        img.src=text.value;
    };
};
</script>

Answer 2

做个div一个文本框一个按钮

div中一个img标签src=""

输入图片名后点击按钮，触发按钮的点击事件，将文本框的value赋值给img的src属性来改变图片

<input type="text" id="text" />
<button id="btn">提交</button>
<div>
    <img src="" id="img"/>
</div>
<script>
function getId(id)
{
    return document.getElementById(id)
}
getId("btn").onclick=function()
{
    getId("img").src="img/"+getId("text").value
}
</script>
大概是这个意思，我没调试。你自己去看看

追问

试过了，不行

追答

为什么我试的都行
getId("img").src="img/"+getId("text").value+".jpg"

Answer 3

给你推荐一个工具，叫做everything，本地搜索软件，速度很快。