本文实例讲述了射流研究…实现的投入选择图片本地预览功能。分享给大家供大家参考，具体如下：

预览效果见下图：

超文本标记语言代码如下：

div class=' content ' style=' margin-top :100 px；'height :200 px ' div id=' div 4 BM ' style=' float : left；'！-输入[按钮]触发文件点击事件-输入类型='按钮'值='选择文件Id='我的按钮' class=' mybtn ' onclick=' Id '(文件')。单击();'/!文件隐藏起来触发待清扫房事件-输入类型=' file ' name=' file ' accept=' image/png，image/jpg，image/JPEG ' id=' file ' onchange=' changestop()；style=' display : none '/div！-图片展示区域-div style=' float : left；-设置默认图片-img id=' myimg ' src=' http :http://沙盒。runjs。cn/uploads/RS/72/huvtown/Zan Wu。png '/DivCSS代码如下：mybtn { width:100px高度：30 px显示：内嵌块；背景-颜色：rgb(91，183，91)；border:1px实心rgb(91，183，91)；边界半径：3 px颜色：白色；font-size :14 px字体系列：微软雅黑；光标：指针指针；文本对齐：居中；垂直对齐： 中心；盒影：0 px 0px 1px 1px RGB(91，160，91)；} .mybtn :悬停{底色： RGB(91，160，91)；border-color:rgb(91，160，91)；颜色：白色；文本装饰：无；}.myinp { width:100px高度：30 px显示：内嵌块；border:1px实心rgb(209，232，250)；边框-半径：2 px} # div 4 BM { padding-top :15 px；右边距：15 px} #我的按钮{左边距：100 px} # myimg { width :164 pxh three :164 px } JS代码如下：

//定义编号选择器函数Id(Id){返回文档。getelementbyid(Id)；}函数changeToop(){ var file=Id(' file ')；if(file.value==''){ //设置默认图片Id('myimg ').src=' http://沙盒。runjs。cn/uploads/RS/72/huvtown/Zan Wu。png '；}else{ preImg('file '，' myimg ')；}}//获取输入[文件]图片的URL重要功能GetFileURL(FileID){ var URL；定义变量文件=Id(文件id)；var agent=navigator.userAgentif(代理。indexof(' MSIE ')=1){ URL=文件。价值；} else if(代理。索引(' Firefox ')0){ URL=窗口.网址。createobjecturl(文件。文件。项目(0))；} else if(代理。索引(' Chrome ')0){ URL=窗口.网址。createobjecturl(文件。文件。项目(0))；}返回url}//读取图片后预览函数preImg(fileId，imgId){ var img pre=Id(imgId)；imgpre。src=GetFileURl(FileID)；}上述代码可使用在线HTML/CSS/JavaScript前端代码调试运行工具：http://工具。JB 51。net/code/WebCodeRun测试运行效果。

也可使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun运行如下完整代码得到上面图示效果。

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title www .JB 51。net js输入选择图片本地预览/title样式。mybtn { width :100 px高度：30 px显示：内嵌块；背景-颜色：rgb(91，183，91)；border:1px实心rgb(91，183，91)；边界半径：3 px颜色：白色；font-size :14 px字体系列：微软雅黑；光标：指针指针；文本对齐：居中；垂直对齐： 中心；盒影：0 px 0px 1px 1px RGB(91，160，91)；} .mybtn :悬停{底色： RGB(91，160，91)；border-color:rgb(91，160，91)；颜色：白色；文本装饰：无；}.myinp { width:100px高度：30 px显示：内嵌块；border:1px实心rgb(209，232，250)；边框-半径：2 px} # div 4 BM { padding-top :15 px；右边距：15 px} #我的按钮{左边距：100 px} # myimg { width :164 px three :164 px }/style/head dydiv class=' content ' style=' margin-top :100 px；'height :200 px ' div id=' div 4 BM ' style=' float : left；'！-输入[按钮]触发文件点击事件-输入类型='按钮'值='选择文件Id='我的按钮' class=' mybtn ' onclick=' Id '(文件')。单击();'/!文件隐藏起来触发待清扫房事件-输入类型=' file ' name=' file ' accept=' image/png，image/jpg，image/JPEG ' id=' file ' onchange=' changestop()；style=' display : none '/div！-图片展示区域-div style=' float : left；-设置默认图片-img id=' myimg ' src=' http :http://沙盒。runjs。cn/uploads/RS/72/huvtown/Zan Wu。png '/div脚本/定义编号选择器函数Id(Id){返回文档。getelementbyid(Id)；}函数changeToop(){ var file=Id(' file ')；if(file.value==''){ //设置默认图片Id('myimg ').src=' http://沙盒。runjs。cn/uploads/RS/72/huvtown/Zan Wu。png '；}else{ preImg('file '，' myimg ')；}}//获取输入[文件]图片的URL重要功能GetFileURL(FileID){ var URL；定义变量文件=Id(文件id)；var agent=navigator.userAgentif(代理。indexof(' MSIE ')=1){ URL=文件。价值；} else if(代理。索引(' Firefox ')0){ URL=窗口.网址。createobjecturl(文件。文件。项目(0))；} else if(代理。索引(' Chrome ')0){ URL=窗口.网址。createobjecturl(文件。文件。项目(0))；}返回url}//读取图片后预览函数preImg(fileId，imgId){ var img pre=Id(imgId)；imgpre。src=GetFileURl(FileID)；}/脚本/正文/html更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript图片操作技巧大全》 、 《JavaScript图形绘制技巧总结》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 、 《JavaScript遍历算法与技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。