img标签显示本地文件
html:
<img src="__IMG__/male.png" id="imgfpic1" style="height: 100%; width: auto; max-width: 100%;">
<input type="file" id="pic" name="pic" onchange="setpreimg();" style="position:absolute; top: 0px; left: 0px; bottom: 0px; width: 100%; height: 100%; z-index: 999; opacity: 0;"/> js:
//使用html5的FileReader属性
if(window.FileReader){
var oFReader = new window.FileReader(),
rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i; oFReader.onload = function (e) {
$("#imgfpic1").attr('src', e.target.result);
}; var aFiles = document.getElementById("pic").files;
if (aFiles.length === 0) { return; }
if (!rFilter.test(aFiles[0].type)) { alert("You must select a valid image file!"); return; }
oFReader.readAsDataURL(aFiles[0]);
}
img标签显示本地文件的更多相关文章
- 使用 <embed> 标签显示 flash文件(swf)格式 ,如何设置 width 和 height 宽度,高度.
1. embed 标签 支持 .swf 格式. .flv 的不支持. 2. 通常情况下, 网站中上传 多个 flash文件. 它的默认大小是不一样的. 而且 可以 宽度 大于 高度(横向的) ...
- <img>标签显示本地路径的图片的.NET解决方案
今天朋友问了我一个奇怪的需求:项目中要求图片上传到工作目录,上传后要在网页中通过<img>显示出来.图片上传后显示,在开发中常见的做法是将它图片上传到网站目录下(upload/),如果保存 ...
- Servlet从本地文件中读取图片,并显示在页面中
import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpSer ...
- QWebView 显示本地HTML 文件
QWebView 显示本地HTML文件的时候,如果直接使用 webView->load(QUrl(QString("file:///c:\\a.html")); 可能会导致a ...
- 选择本地文件上传控件 input标签
当要通过控件来选择本地文件上传的时候的一种方式 <input type="file" id="input-file"/> 注意 type类型一定要是 ...
- HTML5如何播放本地文件
HTML5在操作的过程中,很多朋友会遇到一个问题,那就是在播放本地文件的时候时常会有一些问题存在,使得HTML5才操作的过程中本地文件播放不流畅或者是不能够正常的播放.现在,我们就来看看HTML5如何 ...
- outlook邮箱邮件与企业邮箱同步(outlook本地文件夹邮件,web邮箱里没有)
用惯了outlook2010, 问题:今天将邮件放到自定义文件夹后,发现在web邮箱中看不到邮件了.不能同步到企业邮箱. 解决忙了一天,才知道是账户类型问题,pop3类型,只下载不上传.所以outlo ...
- 将mnist数据集存储到本地文件
参考文章: http://www.csuldw.com/2016/02/25/2016-02-25-machine-learning-MNIST-dataset/ import numpy as np ...
- 爬虫任务二:爬取(用到htmlunit和jsoup)通过百度搜索引擎关键字搜取到的新闻标题和url,并保存在本地文件中(主体借鉴了网上的资料)
采用maven工程,免着到处找依赖jar包 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&quo ...
随机推荐
- Python中单例模式的使用方法
单例模式 单例模式(Singleton Pattern)是一种常用的软件设计模式,该模式的主要目的是确保某一个类只有一个实例存在. 当你希望在整个系统中,某个类只能出现一个实例时,单例对象就能派上用场 ...
- 异常处理、socket基于TCP协议编程
一.异常处理 1.错误和异常 1.程序中难免出现错误,而错误分成两种 (1)语法错误(这种错误过不了Python解释器的语法检测,必须在程序执行前改正) #语法错误示范一 if #语法错误示范二 de ...
- app开发团队人员构成怎么分配?国内著名的app开发团队有哪些
app开发团队人员构成:作为一个独立的app开发团队,人员架构必须包括产品经理,程序开发人员,测试专员,运营团队,UI 设计.这里是对专业的App开发公司而言,一般个人或团队可能一个人会身兼多职,所以 ...
- vim常规操作
原文地址 三种模式 一般模式:可以进行复制.粘贴和删除等操作 编辑模式:按i或a进入编辑模式,按Esc回到一般模式 命令模式:按/或?或:进入命令模式,按Esc回到一般模式 移动操作 h j k l: ...
- SQL模糊查找
编辑器加载中... /*********************实现模糊查找**************************/ SELECT [UserId] ,[UserName] ,[User ...
- render httprequest
render def my_view(request):# View code here... t = loader.get_template('myapp/index.html') c = Requ ...
- SQL SERVER 2005 Express版, 精简版 下载
Microsoft SQL Server 2005 Express Edition(数据库) https://www.microsoft.com/zh-CN/download/details.as ...
- 【HackerRank】Encryption
One classic method for composing secret messages is called a square code. The spaces are removed fr ...
- requestAnimationFrame 的实验性实践
记得当 requestAnimationFrame 出现时我立马就石更了,就跟初次玩耍 transition 时一样,欣喜若狂... 然后,然后特么的就懵逼了,这明明就是口挖不通的深井呀(如果是我傻, ...
- Device Tree(一):背景介绍【转】
本文转载自:http://www.wowotech.net/device_model/why-dt.html 一.前言 作为一个多年耕耘在linux 2.6.23内核的开发者,各个不同项目中各种不同周 ...