html5 实现 图片上传预览
2019独角兽企业重金招聘Python工程师标准>>>
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择的文件显示在img标签中,实现图片预览功能。请选择支持HTML API的浏览器,比如谷歌Chrome和火狐等。
<!DOCTYPE html>
<html>
<head>
<title>HTML5上传图片预览</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
</head>
<body>
<h3>请选择图片文件:JPG/GIF</h3>
<form name="form0" id="form0" >
<input type="file" name="file0" id="file0" multiple="multiple" /><br><img src="" id="img0" >
</form>
<script>
$("#file0").change(function(){
var objUrl = getObjectURL(this.files[0]) ;
console.log("objUrl = "+objUrl) ;
if (objUrl) {
$("#img0").attr("src", objUrl) ;
}
}) ;
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
</script>
</body>
</html>
转载于:https://my.oschina.net/u/615191/blog/318424
html5 实现 图片上传预览相关推荐
- js实现图片上传预览及进度条
js实现图片上传预览及进度条 原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器 ...
- 模拟QQ心情图片上传预览
出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...
- html 手机qq图片预览,模拟QQ心情图片上传预览示例
出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...
- Angular6自定义指令实现多图片上传预览
在做移动端开发多时候经常会遇到用户图片上传的需求,有单图片上传预览的需求,也有多图片上传预览的需求.自己刚遇到这个需求的时候有踩到各种个样到坑.经过多番尝试,下面将本人成功的一个案例分享出来(公司对外 ...
- php 图片上传预览(转)
网上找的图片上传预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- JAVA实现一个图片上传预览功能
这个小项目主要使用java实现了一个简单的图片上传预览功能,废话不多说,先上实现成果 ^ _ ^
- java 图片上传 预览 demo_图片上传预览
[实例简介] 实现图片上传预览,可以增加新的空数组,并上传和替换.还有删除功能:提交的时候,还可以判断是否有空的img [实例截图] [核心代码] 613ddc50-96b8-4197-ba2e-1e ...
- JavaScript 图片上传预览效果
图片上传预览是一种在图片上传之前对图片进行本地预览的技术. 使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验. 但随着浏览器安全性的提高,要实现图片上传预览也越来越困难. 不过群众的智慧 ...
- ASP.NET工作笔记之一:图片上传预览及无刷新上传
转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...
最新文章
- java对象的访问定位_2、JVM-Java对象的创建、对象结构、对象访问定位-Go语言中文社区...
- Spring在Java领域的统治地位:86% 的Java开发者依赖它!
- 【Spring注解驱动开发】自学java和三大框架要多久
- 笔记本nc10装linux,绝配:Ubuntu 9.04与上网本(NC10)
- shiro整合ehcache
- OpenStack组件
- 为什么说任何基于比较的算法将 5 个元素排序都需要 7 次?
- 联想小新模式切换不了_小新Pro 14 2021正式发布,联想举行秋季新品发布会,10款新品齐亮相...
- 编程指南_halide编程技术指南(连载一)
- 2串口两串口三串口多串口3串口转WiFi透传模块实现多通道与服务器透传
- 集成融云即时通讯碰到的一些问题
- 计算机ppt用快捷键,【搞定PPT】高效重复快捷键F4
- JavaEE | 线程安全(锁、线程间通信、内存可见性、CAS、线程的状态)
- 单体架构和微服务架构
- 互联网日报 | 7月21日 星期四 | 脉脉CEO再回应点评招聘评论真实性;​微信版本再更新;上半年前十位SUV品牌销量排名出炉...
- linux将日历信息导出到,在 Linux 命令行中规划你的假期日历
- Python+Vue计算机毕业设计张家界旅游景点网站e3b6c(源码+程序+LW+部署)
- 29 | 无锁的原子操作:Redis如何应对并发访问?
- win10升级win11后电源设置里面找不到休眠功能
- c语言编程思想的题目,c语言方面毕业设计选题范文.docx
热门文章
- mongodb ssl java_MongoDB自签名SSL连接:SSL对等证书验证失败
- LKT系列加密芯片如何预置openssl生成的rsa密钥完成运算(三)
- vb用鼠标实现屏幕绘图
- vb使用open方法读写文件
- ANSI字符与Unicode字符的互相转换
- 面试指南(二):想跳槽,这些技术点你会了吗?
- 一文看懂深度学习新王者「AutoML」:是什么、怎么用、未来如何发展?
- Yann LeCun遭三位UC伯克利教授连怼:双重职位多重危害
- Dota2团战AI击败人类最全解析:能团又能gank,AI一日人间180年
- 一场谷歌与苹果的合作:TensorFlow Lite开始支持Core ML