一个上传图片，预览图片的小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 ...
随机推荐
- 团队作业part1--团队展示&选题
一.团队展示 1.队名 DiligentVegetableChicken 2.队员信息 纪昂学(组长):3118005053 廖业成:3118005060 蔡越:3118005086 周梓波:3118 ...
- 学生证申请Idea
1.地址:https://www.jetbrains.com/shop/eform/students2.英语不好的一键翻译,说明:三五天下来3.上图:
- ReentrantReadWriterLock源码(state设计、读写锁、共享锁、独占锁及锁降级）
ReentrantReadWriterLock 读写锁类图(截图来源https://blog.csdn.net/wangbo199308/article/details/108688148) stat ...
- CVE-2019-2618任意文件上传漏洞复现
CVE-2019-2618任意文件上传漏洞复现 漏洞介绍: 近期在内网扫描出不少CVE-2019-2618漏洞,需要复测,自己先搭个环境测试,复现下利用过程,该漏洞主要是利用了WebLogic组件中的 ...
- JS C# 正则表达式去除html字符中所有的标签（img em标签除外）
js去除em标签 $(this).html().replace(/<(?!em|\/em).*?>/g, '') C#去除 System.Text.RegularExpressions.R ...
- MVC中Autofac的使用
参考博文 https://www.cnblogs.com/liupeng/p/4806184.html https://blog.csdn.net/qq_37214567/article/detail ...
- 【进程/作业管理】篇章一：Linux进程及其管理（进程管理类工具）----pstree、ps、top、htop、kill、（killall、pkill、pgrep、pidof）
主要讲解进程管理类命令及工具的使用:pstree.ps.top.htop.kill.(killall.pkill.pgrep.pidof) pstree 以树状图的方式展现进程之间的派生关系,显示效果 ...
- Next.js+React聊天室|Next仿微信桌面端|next.js聊天实例
一.项目介绍 next-webchat 基于Next.js+React.js+Redux+Antd+RScroll+RLayer等技术构建的PC桌面端仿微信聊天项目.实现了消息/表情发送.图片/视频预 ...
- 将notepad++关联到右键菜单
Step1: 新建txt文本, 将以下内容复制到文本中: Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT*\Shell\NotePad+ ...
- JIRA 知多少：聊一聊 Android Studio 、工作流相关设置
Android Studio 相关 配置 JIRA 服务器 如果细心的话会发现有一个选项卡:Commit Message.这一段代码是不是有点熟悉呢?你没有猜错,这段代码就是 commit 模板,当你 ...