JavaScript实现预览本地上传图片功能完整示例

本文实例讲述了Java脚本语言实现预览本地上传图片功能。分享给大家供大家参考，具体如下：

htmlheadtitlewww.jb51.net图片上传预览/titlescript函数预览图像(IMgfile){ var pattern=/(\).*.jpg$)|(\ .*.png$)|(\ .*.jpeg$)|(\ .*.gif$)|(\ .*.BMP $)/；if(！模式。测试(IMgfile。值){ alert('系统仅支持jpg/jpeg/png/gif/bmp格式的照片!');imgfile。焦点()；} else { var pathif(文档。all){//IE imgfile。select()；路径=文档。选择。创建范围().文本；文件。getelementbyid(' IMgpreview ').innerHTML=文档。getelementbyid(' imgPreview ')。风格。filter=' progid : maximagettransform .微软。alpha imageloader(enabled=' true '，sizingMethod='scale '，src=\ ' path ' \ ')'；//使用滤镜效果} else {//FF路径=URL。createobjecturl(imgfile。文件[0])；文件。getelementbyid(' IMgpreview ').innerHTML='img src='路径' '/';} } }/脚本/流浆池div输入类型=' file ' on change=' preview image(this)'/div id=' imgPreview ' style=' width : 500 px；'height : 400 px ' img src=' http : '/div/div/body/html使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试上述代码，可得如下运行效果：

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript图片操作技巧大全》 、 《JavaScript切换特效与技巧总结》 、 《JavaScript运动效果与技巧汇总》 、 《JavaScript动画特效与技巧汇总》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 、 《JavaScript遍历算法与技巧总结》 及《JavaScript数学运算用法总结》

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