一个上传图片,预览图片的小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 ...
随机推荐
- Day1 Scrum 冲刺博客
团队作业4--项目冲刺 第一篇博客 一. 各个成员在 Alpha 阶段认领的任务 蔡越,冷沐样:视觉元素设计与方块类Cell开发 周梓波,纪昂学:游戏功能逻辑开发,即抽象出主要元素对应的数据类型 廖业 ...
- FirstCode异常 此引用关系将导致不允许的周期性引用
FirstCode异常 此引用关系将导致不允许的周期性引用 一般由多表里的外键互相引用引起. 解决方法: 1.去掉对应数据类里的外键对应的对象属性. 2.去掉该外键. [Table("TAs ...
- Codeforces Edu Round 52 A-E
A. Vasya and Chocolate 模拟题.数据会爆\(int\),要开\(long\) \(long\) #include <iostream> #include <cs ...
- 学习笔记:斜率优化DP
作为数学渣,先复习一下已知两点\((x_1, y_1)\), \((x_2, y_2)\),怎么求过两点的一次函数的斜率... 待定系数法代入 \(y = kx + b\) 有: \(x_1k + b ...
- MobaXterm无法退格删除
MobaXterm退格删除出现^H,总是要取消输入重新敲语句,很麻烦 解决方法:打开MobaXterm-->settings-->Configuration,把"Backspac ...
- 来体验下Linux吧
在前面的几期中我们从树莓派开始了解Linux,大家可能已经想来试一下手了.趁热打铁,本期我将介绍两种方便体验学习Linux的方法,在线体验或者安装虚拟机. 1 在线体验Linux 如果想快速的体验下L ...
- easyUI验证框赋值
下面来看看easyui的各种验证框赋值的方式: <input name="userId" id="userId" class="easyui-n ...
- oracle 常用语句3
- oracle 函数 select sign(-3),sign(3), sign(0) from dual; select ceil(3.7) from dual; select floor(3.7 ...
- RabbitMq基本概念理解
RabbitMQ的基本概念 RabbitMQ github项目地址 RabbitMQ 2007年发布,是一个在AMQP(高级消息队列协议)基础上完成的,可复用的企业消息系统,是当前最主流的 消息中间件 ...
- 【命令】set命令
1.查看所有的本地变量和环境变量. 2.检测变量是否定义: 开启检测功能: set -u 关闭检测功能: set +u [root@localhost likui]# unset mm 删除了m ...