來源：http://www.cnblogs.com/conquer/archive/2008/03/22/1117367.html

<input id="file" type="file" οnfοcus="javascript:ShowImage(this.value,document.getElementById('img'))"> <br /> <img id="img" STYLE="visibility:hidden" mce_STYLE="visibility:hidden" height="100px" width="100px"> <mce:script language="javascript" type="text/javascript"><!-- function ShowImage(value,img) { //alert(value); //检测盘符 //alert(value.indexOf(':')); //检测文件是否有扩展名 //alert(value.length-value.lastIndexOf('.')); //取文件扩展名 //alert(value.substr(value.length-3,3)); //检测文件扩展名是否合法 //alert(CheckExt(value.substr(value.length-3,3))); if(value.length>5&&value.indexOf(':')==1&& (value.length-value.lastIndexOf('.'))==4&&CheckExt(value.substr(value.length-3,3))) { img.src=value; img.alt="本地图片预览"; img.style.visibility="visible"; } else { img.style.visibility="hidden"; } } //检查扩展名是否合法,合法返回True function CheckExt(ext) { //这里设置允许的扩展名 var AllowExt="jpg|gif|jpeg|png|bmp"; var ExtOK=false; var ArrayExt; if(AllowExt.indexOf('|')!=-1) { ArrayExt=AllowExt.split('|'); for(i=0;i<ArrayExt.length;i++) { if(ext.toLowerCase()==ArrayExt[i]) { ExtOK=true; break; } } } else { ArrayExt=AllowExt; if(ext.toLowerCase()==ArrayExt) { ExtOK=true; } } return ExtOK; } // --></mce:script>

js预览待上传的本地图片相关推荐

1. axios获取图片显示_Vue.js+axios图片预览以及上传显示进度

   在平时项目开发中,我们经常会对文件做一些上传操作,不仅仅要实现基本需求,也要兼顾用户体验,根据自己在工作中遇到的问题谈谈对图片上传的预览以及上传进度的优化. 1.搭建项目 基于Vue.js+axios ...

2. 技术干货 | “选图预览并上传”的场景如何解？全网最全方案汇总来了

   简介: 你真的知道如何"上传"一张照片吗? 选择本地相册图片或者拍照,然后预览并且上传是移动应用中一个典型的使用场景,比如常见的身份证信息上传等. 不少客户都反馈有类似的场景,并且 ...

3. H5图片预览及上传（WEB前端）

   H5图片预览及上传 web上传图片很简单,网上有许多的demo和js,但是本人嫌弃用那些会引入许多js包,所以还是用原生的jquery来写吧. 一.html布局文件 html有一个自己的上传文件控件- ...

4. 利用JS来进行多张图片的压缩、预览、上传

   JS多张图片压缩上传 前言 代码 结尾 前言 最近在做的项目里有个关于多图片上传的,搞得我很久,查了很多资料,终于搞定,故此写一篇总结. 代码 前台我用的是jquery-1.8.3.min.js ht ...

5. 【微信小程序】图片选择、转码、压缩、预览、上传，file与base64

   0 前言 微信小程序中,上传图片,如标题,涉及图片选择.图片转码.图片压缩.图片预览.图片上传等 1 图片选择 需要使用微信提供的wx.chooseMedia chooseImage() {var t ...

6. php 文件预览 水印,PHP图片上传，预览图上传，水印设置

   //设置图片的存放目录 设置水印的存放地址如果愿意,可以给预览图.上传图片分设不同的存储地址 $img_path = $_SERVER['DOCUMENT_ROOT']."/data/img ...

7. JS中使用FormData上传文件、图片的方法

   参考博客:http://www.cnblogs.com/xiaohuochai/p/6543019.html http://www.cnblogs.com/qcloud1001/p/6839541.h ...

8. 网页上传图片时，直接本地预览无需上传服务器

   最近在做一个项目时遇到上图片需要预览功能,在做的时候我们在 服务器url预览 和 本地直接预览 两种方式中做了选择,最后敲定使用本地直接预览.原因是如果等到上传完毕之后再返回图片URL给用户预览,一旦 ...

9. java 上传文件及预览_SpringBoot上传下载文件及在线预览

   SpringBoot上传下载文件及在线预览 今天大概就说说如何使用SpringBoot进行上传和下载以及在线预览文件 本篇主要介绍上传下载的功能,对于界面就简单一点,大致如下: 一.老规矩还是先看看小 ...

最新文章

1. 微服务和 Serverless 如何强强联合？
2. 解码python_Python解码
3. git生成秘钥配置SSH公钥的简单方法
4. At least one JPA metamodel must be present!
5. 升级ADT22.6后，Android模拟器无法创建
6. 李楠评华为Mate X/小米MIX Alpha：适合土豪做非主力手机用
7. mysql 数据类型 真假_【转】MySQL数据类型
8. 面向对象设计的六大原则简介
9. 分类问题的评价及matrix , precision, recall
10. L2-026 小字辈 (25 分)
11. php屏蔽中文浏览器,网站屏蔽中文浏览器/英文浏览器方法
12. win7安装python3.7失败_win7安装python3.7出现setup failed，成功解决
13. Java千百问_05面向对象（003）_java中抽象概念如何体现的
14. OpenCV动作识别
15. 开源自助建站系统源码完整源码+搭建教程 傻瓜式一键建站系统源码
16. S32K144 CAN收发调试经验总结
17. 20届华为勇敢星实习面试记录
18. 南开大计算机学院夏令营,【2022夏令营】南开大学“e入计网”优秀大学生云端夏令营的通知...
19. android画圆形背景图片,android圆形图片,圆形背景文字的CircleTextImageView开源组件...
20. electron入门教程

热门文章

1. C#中使用tao.opengl绘制三维模型
2. QT操作sqlite概念
3. IOS Swift5.5的通知写法
4. 基于深度学习的视频预测研究综述
5. 转jpg java源程序_将pdf文件转成图片并删除java源代码
6. esp8266手机端app_OKEX手机端APP提币教程（附视频）
7. python开发sqlite3完整_让Python更加充分的使用Sqlite3-阿里云开发者社区
8. vba将数值转化文本格式_Excel文本格式和数字格式的相互转换
9. actorx importer 下载_红色新店开业无线端PSD模板_psd素材免费下载_ 640*6001像素(编号:13631922)...
10. qt.targets(66,3):元素＜Import＞中的“Project”特性的值无效