一个上传图片，预览图片的小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 ...
随机推荐
- nodjs html 转 pdf
var fs = require('fs');var pdf = require('html-pdf');//模块//读取html 文件 var html = fs.readFileSync('./s ...
- NOI Online 题解
T1 对\(t_i = 1\)的边,将\(u_i, v_i\)连一条边权为\(1\)的边.否则连一条边权为\(0\)的边. 对于每一个连通块,若图中不存在一条边权之和为奇数的圈,则可以将这个连通块二染 ...
- CF1406E 【Deleting Numbers】
蒟蒻语 蒟蒻这次 \(CF\) 又双叒叕掉分了,\(C\) 都没有调出来. 还好再最后 \(10\) 秒钟调了下 \(E\) 块长 (块长 \(100\) => \(98\)),才没有掉得那么惨 ...
- Java IO源码分析（二）——ByteArrayInputStream 和 ByteArrayOutputStream
简介 ByteArrayInputStream 是字节数组输入流,它继承于InputStream. 它的内部数据存储结构就是字节数组. ByteArrayOutputStream是字节数组输出流,它继 ...
- Echarts入门教程精简实用系列
引语:echarts.js是百度团队推出的一款用于图表可视化的插件,用于以图表的形式展现数据,功能强大,上手简单 1.从官方网站中下载所需的echarts.js文件,该文件因功能广泛,包体较大,可自行 ...
- sql注入之union注入
联合查询注入利用的前提: 必须要有回显 联合查询过程: 判断是否存在注入点 判断是什么类型注入(字符型or数字型) 判断闭合方式 查询列数个数(order by) 5, 获得数据库名 获得表名 获得字 ...
- SpringBoot基于EasyExcel解析Excel实现文件导出导入、读取写入
1. 简介 Java解析.生成Excel比较有名的框架有Apache poi.jxl.但他们都存在一个严重的问题就是非常的耗内存,poi有一套SAX模式的API可以一定程度的解决一些内存溢出的问题 ...
- swig python dynamic module does not define init function
example_module = Extension('_example', sources=['example_wrap.c', 'example.c'], ) setup (name = 'exa ...
- 移动端 canvas统计图
一.折线图 1. 获取画布画笔 2. 封装画线的方法 3. 画坐标轴 4. 循环数据画横轴 > 4.1 画刻度 > 4.2 刻度文字 > 4.3 画折线 > 4.4 画点 5. ...
- Pyhton3 文件拷贝
目录 Pyhton3 文件拷贝 shutil.copy()简单使用说明 Pyhton3 文件拷贝 导入模块shutil,使用模块中的shutil.copy()函数进行文件拷贝 shutil.cop ...