用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 (鉴于作者在美国, 我姑且认为作者母语是英语, 当然链接中有 ...
随机推荐
- rapidxml 节点加入另一个xml
void TestRapidXml() { ]; sprintf(xmlContent,"<root><head>aaa</head><body&g ...
- Step by Step iOS Project In Action - 视图控制器
1. 什么是视图控制器(View Controller) 简单来说,视图控制器用来管理你所有的视图. 他们是你的视图和模型的粘合剂. 如果你做过MVC的Web项目,我想你应该不会对它感到陌生. 2. ...
- oracle 之flashback 深入研究。
oracle 之flashback 深入研究. 今天是2013-08-24,开始进行oracle flashback 内部原理研究,记录一下笔记. SQL> startup ORACLE ins ...
- taro 不支持render中,使用函数多条件渲染
不支持render中,使用函数多条件渲染 h5不报错,但是编译成小程序时 会报错 错误写法: onRenderContent = () => { const { verified, recogn ...
- Java 提示“找不到或无法加载主类” 解决方法
1.检查环境变量配置,我的安装路径是F:\java\jdk1.8.0_91,因为是6以上版本,故不需配置Classpath 否则 CLASSPATH=.;%JAVA_HOME%\lib\dt.jar; ...
- MSSQL语句批量替换表中某列字段内容的某个字符
UPdate 表 Set 字段名=REPLACE(字段名,'查找目标字符','要替换的字符') 比如:在Products表中把字段CharCode中含有ch-的字符全部替换为dw- UPDATE Pr ...
- python学习笔记之函数(方法)
def func(x): print 'x is', x x = 2 print 'Changed local x to', x x = 50 func(x) print 'x is still', ...
- 链接、ip地址及端口号
# encoding=utf-8 #python 2.7.10 #xiaodeng #链接(即报文如何通过传输控制协议链接从一个地方搬移到另外一个地方) #HTTP权威指南 13页 #TCP/IP # ...
- div最小高度的2种写法
1.第一种写法: 原理:在IE6中,使用CSS定义div的高度的时候经常遇到这个问题,就是当div的最小高度小于一定的值以后,就会发现,无论你怎么设置最小高度,div的高度会固定在一个值不再发生变动, ...
- zabbix 介绍
zabbix实现原理及架构详解想要用好zabbix进行监控,那么我们首要需要了解下zabbix这个软件的实现原理及它的架构.建议多阅读官方文档. 一.总体上zabbix的整体架构如下图所示: 重要组件 ...