用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 (鉴于作者在美国, 我姑且认为作者母语是英语, 当然链接中有 ... 
随机推荐
- C#.NET常见问题(FAQ)-想要另存一个项目,sln文件丢了怎么办,如何打开高版本的项目
			如下图所示,我想要另存一个工程,把 V4.4整个的项目另存为V4.5,我可以把解决方案文件(.sln)改名字,但是我没法把文件夹改名字,改了打开sln就说找不到. 很简单的一个思路是反正sln是多 ... 
- 修改上一篇文章的node.js代码,支持调用自定义页面
			上一篇文章所有请求只能调用index.html,现在做个改造,允许调用自定义页面 服务端 app.js var app = require('http').createServer(handler) ... 
- LoadRunner录制:关联
			一般请求中看到 hash strings, random strings, session ID 这种,就需要动态去获取该内容,这样就需要用到关联. 回放时自动关联 1. 录制脚本并执行. 2. 打开 ... 
- 10个最受欢迎的Java类(转)
			原文:http://www.csdn.net/article/2012-06-04/2806277 每一个Java程序员都有一份属于自己的Java类排名表.这个排名表没有严格的规定,也没有可遵循的规则 ... 
- ADS中编译现存项目时常见错误:无法打开文件\…\…\2440init.o的解决办法
			错误提示如下: 解决方法: 重新编译即可. 
- “最大子序列和”算法 java
			maxSubSum各自是最大子序列和的4中java算法实现. 第一种算法执行时间为O(N^3),另外一种算法执行时间为O(N^2),第三种算法执行时间为O(nlogn),第四种算法执行时间为线性N p ... 
- SwaggerUI+SpringMVC——构建RestFul API的可视化界面
			今天给大家介绍一款工具,这个工具眼下可预见的优点是:自己主动维护最新的接口文档. 我们都知道,接口文档是非常重要的,可是随着代码的不断更新,文档却非常难持续跟着更新,今天要介绍的工具,完美的攻克了这个 ... 
- JDK1.7的一些新特性
			整理了几条对开发可能用到概率高的 1.swicth支持对String的判断:(以前只能支持Int及以下的) switch (s) { case "1": break; case & ... 
- python之函数用法round()
			# -*- coding: utf-8 -*- #python 27 #xiaodeng #python之函数用法round() #http://www.cnblogs.com/hongfei/p/3 ... 
- MySQL必知必会笔记(六)存储过程 游标  触发器
			留印:http://blog.sina.com.cn/s/articlelist_1254871964_5_1.html 第二十三章 使用存储过程 MySQL5 中添加了存储过程的支持. ... 
