js 实现图片实时预览
2023-09-11 14:21:35 时间
<body> 上传图片: <input type="file" name="file" style="width: 200px; height: 20px;" onchange="PreviewImage(this)" id="upload" /> <div id="imgPreview" style="width:120px; height:100px;margin-left: 280px;"> </div> </body> </html> <script type="text/javascript"> function PreviewImage(imgFile) { var filextension = imgFile.value.substring(imgFile.value.lastIndexOf("."), imgFile.value.length); filextension = filextension.toLowerCase(); if ((filextension != '.jpg') && (filextension != '.gif') && (filextension != '.jpeg') && (filextension != '.png') && (filextension != '.bmp')) { alert("对不起,系统仅支持标准格式的照片,请您调整格式后重新上传,谢谢 !"); imgFile.focus(); } else { var path; if (document.all)//IE { imgFile.select(); path = document.selection.createRange().text; document.getElementById("imgPreview").innerHTML = ""; document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")";//使用滤镜效果 } else//FF { path = window.URL.createObjectURL(imgFile.files[0]); document.getElementById("imgPreview").innerHTML = "<img id='img1' width='120px' height='100px' src='" + path + "'/>"; // document.getElementById("img1").src = path; } } } </script>
相关文章
- 原生js实现架子鼓特效
- JS框架_(Progress.js)圆形动画进度条
- JS框架_(JQuery.js)点赞按钮动画
- JS框架_(JQuery.js)上传进度条
- JS插件之——bootstrap-suggest.js
- gulp 图片、样式、js、实时刷新等压缩gulpfile.js文件各个模块
- js递归遍历key
- [Node.js] Mock an API for Local Development in React with Mirage JS
- WebView JS交互 JSBridge 案例 原理 MD
- JS对象-不可扩展对象、密封对象、冻结对象
- 让Visual Studio 也支持JS代码折叠 —— 续 [ Visual Studio | Js | ScriptOutline | SmallOutline ]
- [Js]删除数组指定元素
- js如何使两个input里的内容实时变化
- Atitit 研发体系 codelib 代码库的建设 目录 1. 概念与组成2 1.1. Java代码2 1.2. Js代码2 1.3. H5 代码 js+css+htm+txt2 1.4.
- Atitit.跨语言异常转换机制 java c# php到js的异常转换
- 华为OD机试 - 优雅子数组(Java & JS & Python)
- 华为OD机试 - 无向图染色(Java & JS & Python)
- js点击删除当前
- 原生js实现随机验证码HTMl-JS
- JS:crypto-js实现AES加密解密
- babel配置项目目录支持转换es6语法,引入非项目目录js后,引入Js转换无效
- FastAdmin 浏览器 JS CSS 缓存如何更新?
- 原生js实现随机验证码HTMl-JS