用js实现预览待上传的本地图片
js实现预览待上传的本地图片,代码如下:
<form name="form5" id="form5" method="post" action="#">
<input type="file" name="file5" id="file5" onchange="preview5()"/>
</form>
<script type="text/javascript">
//预览待上传的图片
//by www.jbxue.com
function preview5(){
var x = document.getElementById("file5");
if(!x || !x.value) return;
var patn = /\.jpg$|\.jpeg$|\.gif$/i;
if(patn.test(x.value)){
var y = document.getElementById("img5");
if(y){
y.src = "file://localhost/" + x.value;
}else{
var img=document.createElement("img"); img.setAttribute("src","file://localhost/"+x.value);
img.setAttribute("width","120");
img.setAttribute("height","90");
img.setAttribute("id","img5");
document.getElementById("form5").appendChild(img);
}
}else{
alert("您选择的不是图像文件。");
}}
</script>
用js实现预览待上传的本地图片的更多相关文章
- 原生js实现图片预览并上传
最近主导的PC客户端网站重构工程告一段落,下一阶段开始给公司APP开发H5页面,技术栈是react.最近碰到一个需求:需要在H5页面上添加身份证照片,预览并上传.因为要兼容安卓4.4以下版本的手机,所 ...
- 基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现
前言 图片上传是web项目常见的需求,我基于之前的博客的代码(请戳:formData批量上传的多种实现)里的第三种方法实现多图片的预览.上传,并且支持三种方式添加图片到上传列表:选择图片.复制粘贴图片 ...
- js多图预览及上传功能
<%-- Created by IntelliJ IDEA. User: Old Zhang Date: 2018/12/27 Time: 11:17 To change this templa ...
- H5-FileReader实现图片预览&Ajax上传文件
图片预览 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- 前端图片预览,上传前预览,兼容IE7、8、9、10、11,Firefox,Chrome(学习到的知识)
文章地址:http://www.cnblogs.com/rubylouvre/p/4597344.html 一.window.URL 在Chrome中,window.URL和window.webkit ...
- Mark : Bootstrap fileInput控制预览页面上传、删除、详情按钮
Bootstrap fileInput默认预览上传效果: 而我们可能想要的结果是: 这时候可以通过初始参数layoutTemplates来控制:
- html5 选择多张图片在页面内预览并上传到后台
版权声明:本文为博主原创文章,未经博主允许不得转载. http://blog.csdn.net/huangxin112/article/details/74956462 需求:点击选择图片(可选多张) ...
- js-jssdk微信H5选择多张图片预览并上传(兼容ios,安卓,已测试)
值得注意的是: 1.在微信H5中选择图片运用:wx.chooseImage,成功后返回: res.localIds用于上传图片使用 上传图片:wx.uploadImage. 2.上传图片的时候 ...
- 如何预览将要上传的图片-使用H5的FileAPI
这篇将要说的东西已经不新鲜了. 参考资料: Reading files in JavaScript using the File APIs (鉴于作者在美国, 我姑且认为作者母语是英语, 当然链接中有 ...
随机推荐
- struts2基础梳理(二)
本篇主要有:设置struts2匹配的扩展名.使用通配符,值栈,声明式异常以及标签. 设置扩展名: 默认是对.action和不加不论什么扩展名的进行处理.能够设置: <constant name= ...
- shapefile文件的符号化问题
我们都知道,ArcGIS的shp文件只以坐标形式保存地图数据,地图的显示方法则是存储都数据库或地图文件(mxd)中,这一点是深信不疑的. 如果我们打开ArcMap,新建一个普通的地图文件(使用标准的模 ...
- MyEclipse中使用Junit插件进行单元测试
http://wenku.baidu.com/view/ec904a116bd97f192279e9a6.html
- sql distinct 不能比较或排序 text、ntext 和 image 数据类型,除非使用 IS NULL 或 LIKE 运算符
有个文章的表内容是列项,类型是text 我查询的是内容相同的文章,把其中的一个删除 select 内容 from 文章 group by 内容 having count(*)>1 查询ID和题目 ...
- 各种样式的table 及 代码
1.模板一 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...
- CSS3 calc()函数使用
1.calc是什么? calc是英文单词calculate(计算)的缩写,用于动态计算长度值. calc()函数支持 "+", "-", "*&quo ...
- 如何固定OpenERP顶的主菜单,方便滚动至第二屏以及多屏时,快速切换主菜单
如何固定OpenERP顶的主菜单,方便滚动至第二屏以及多屏时,快速切换主菜单 作者:广州-步科,来自OpenERP应用群() 将“addons\web\static\src\css”目录下的“base ...
- AIX常用命令汇总(转)
在本文中,我将讨论这其中的一些核心命令.其目的旨在为您提供一个可用作便捷参考的列表.虽然这些命令的行为在所有 AIX 版本中都应该相同,但是仅在 AIX 5.3 下对它们进行了测试. 注意:以下段落中 ...
- springMVC + hadoop + httpclient 文件上传请求直接写入hdfs
1.首先是一个基于httpclient的java 应用程序,代码在这篇文章的开头:点击打开链接 2.我们首先写一个基于springMVC框架的简单接收请求上传的文件保存本地文件系统的demo,程序代码 ...
- [ACM] POJ 3258 River Hopscotch (二分,最大化最小值)
River Hopscotch Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 6697 Accepted: 2893 D ...