一个上传图片，预览图片的小demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3</title>
<script>
function getFullPath(obj) {
if (obj) {
//Internet Explorer
if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
obj.select();
return document.selection.createRange().text;
}
//Firefox
if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
if (obj.files) {
return obj.files.item(0).getAsDataURL();
}
return obj.value;
} //兼容chrome、火狐等，HTML5获取路径
if (typeof FileReader != "undefined") {
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById("pic").src = e.target.result + "";
}
reader.readAsDataURL(obj.files[0]);
} else if (browserVersion.indexOf("SAFARI") > -1) {
alert("暂时不支持Safari浏览器!");
} }
} function showPic(obj) {
var fullPath = getFullPath(obj);
if (fullPath) {
document.getElementById("pic").src = fullPath + "";
}
}
</script>
</head>
<body>
<input type="file" onchange="showPic(this)">
<img src="" id="pic">
</body>
</html>
由于工作需要，自己写了个小demo，通过自己组装，可以实现一定的需求。
原创文章如转载，请注明出处
一个上传图片，预览图片的小demo的更多相关文章
- KindEditor的简单使用，以及上传图片预览图片，用户删除图片后的数据处理（重点），以及 BeautifulSoup，shutil两模块了解
KindEditor的简单了解 http://www.cnblogs.com/wupeiqi/articles/6307554.html 简单使用: <div class="comm& ...
- ipad iphone 开发的应用，加一个启动预览图片
如果你想在你的ipad,iphone应用启动是不显示黑屏幕,而是用一个图片代替的话,你只需要吧一张名为 Default.png 的图片加到项目里就行了. 很简单吧,新手们记得去这样美化下你的应用吗,很 ...
- 通过HTML5 FileReader实现上传图片预览功能
原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...
- 微信小程序预览图片
选择图片时可设置图片是否是原图,图片来源.这用的也挺常见的,比如个人中心中设置头像,可以与wx.upLoadFile()API使用 主要方法: wx.chooseImage(object) wxml ...
- 【微信小程序】微信小程序wx.previewImage预览图片
一.小知识 二.例子,配合轮播图使用效果更佳!(如图1) 1.wxml <scroll-view scroll-y="true"> <swiper catchta ...
- 微信小程序：点击预览图片
在开发微信小程序时,开发人员会参考着小程序api来开发小程序,但有的时候根据情况不同很容易出现bug,以下是我在开发小程序时出现的各种bug,在开发时有需要预览图片. 1.xml <view c ...
- file上传图片，base64转换、压缩图片、预览图片、将图片旋转到正确的角度
/** * 将base64转换为文件对象 * (即用文件上传输入框上传文件得到的对象) * @param {String} base64 base64字符串 */ function convertBa ...
- input file 模拟预览图片。
首先申明,接下来内容只是单纯的预览图片,最多选择九张,并没有和后台交互,交互的话需要自己另外写js. 本来想写一个调用摄像头的demo,意外的发现input file 在手机端打开的话,ios可以调用 ...
- 异步上传&预览图片-压缩图片
移动端普及的时代,流量是用户最关心的,手机拍出来的照片基本上都在1~2M以上,这样上传会非常耗流量,影响用户体验,此例能在保证清晰度的情况下,将4.5M的图片压缩为30K <!DOCTYPE h ...
随机推荐
- 使用darkarmour免杀mimikatz
darkarmour是一个可用来免杀exe的项目,github地址:https://github.com/bats3c/darkarmour 我们使用darkarmour来免杀mimikatz. ./ ...
- When you received Ubuntu...
翻译软件 Goldendict 安装命令: sudo apt install goldendict 在 dit -> Dictinoaries -> Websites 中添加有道的链接: ...
- Linux修改系统时间为东八区北京时间（上海时间）
1. Linux时间 Linux的时间分为 System Clock(系统时间)和 Real Time Clock(硬件时间,简称RTC). 系统时间:指系统内核中的时间. 硬件时间:指主 ...
- Kafka Connect使用入门-Mysql数据导入到ElasticSearch
1.Kafka Connect Connect是Kafka的一部分,它为在Kafka和外部存储系统之间移动数据提供了一种可靠且伸缩的方式,它为连接器插件提供了一组API和一个运行时-Connect负责 ...
- Angular入门，开发环境搭建，使用Angular CLI创建你的第一个Angular项目
前言: 最近一直在使用阿里的NG-ZORRO(Angular组件库)开发公司后端的管理系统,写了一段时间的Angular以后发现对于我们.NET后端开发而言真是非常的友善.因此这篇文章主要是对这段时间 ...
- 使用xshell软件进行文件的上传和下载
1.选择xshell的文件里面的属性-->文件传输,把上传路径和下载路径设置好. 上传路径:介绍我们需要向Linux系统里面传东西. 下载路径:就是我们把Linux系统里面的大小拷贝出来. 2. ...
- Error:(12, 24) 警告: [deprecation] android.hardware中的Camera已过时.android
问题:android studio编译项目时出现: Error:(12, 24) 警告: [deprecation] android.hardware中的Camera已过时 解决:(只是让其不提示) ...
- Git提交错了不用慌，这三招帮你修改记录
大家好,今天我们来聊聊git当中一个很重要的功能--历史记录的修改. 有的时候我们会突然发现某个地方需要修改,最常见的某个不应该被提交的文件被提交了进来.我们希望它不只是在后序的版本当中不再出现,而是 ...
- ava基础MySQL存储过程 Java基础 JDBC连接MySQL数据库
1.MySQL存储过程 1.1.什么是存储过程 带有逻辑的sql语句:带有流程控制语句(if while)等等 的sql语句 1.2.存储过程的特点 1)执行效率非常快,存储过程是数据库的服 ...
- Springboot 源码解析-自定装配
面试官经常会问你知道springboot的自定装配吗?它是怎么实现的吗?今天我们就来通过源码一起分析下它吧.首先我们先搭建一个springboot的简单项目,找到启动类, 然后通过这个注解我们进入到@ ...