html5读取本地文件示例代码


Posted in HTML / CSS onApril 22, 2014

html结构样式如下:

复制代码
代码如下:

<div class="addpic">
<button>添加图片</button>
<form>
<input id="logoimg" class="addlogo" type="file" multiple accept="image/*" name="logo">
</form>
</div>
<img id="showlogo" src="" alt="">

从样式上说应不显示input元素的输入框,这时需将input设置为透明样式,然后将其覆盖到button元素上方,这时方可实现点击button上传图片。将accepted设置为“image/*”,则只允许图片类文件上传。

Css样式如下

复制代码
代码如下:

.addpic{
position:relative;
margin-left:100px;
width:95px;
height:30px;
}
.addlogo {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
cursor: pointer;
font-size: 30px;
opacity: 0;
position: absolute;
right: 0;
top: 0;
z-index: 10;
}

js代码
复制代码
代码如下:

function readFiles(evt){
var files=evt.target.files;
if(!files){
console.log("the file is invaild");
return;
}
for(var i=0, file; file=files[i]; i++){
var imgele=new Image();
var thesrc=window.URL.createObjectURL(file);
imgele.src=thesrc;
imgele.onload=function(){
$("#showlogo").attr("src",this.src);
}
}
}
复制代码
代码如下:

$(document).ready(function(){
$("#logoimg").change(function(e){
readFiles(e)
});
});
HTML / CSS 相关文章推荐
详解CSS3 用border写 空心三角箭头 (两种写法)
Sep 29 HTML / CSS
HTML5 CSS3给网站设计带来出色效果
Jul 16 HTML / CSS
彻底弄明白CSS3的Media Queries(跨平台设计)
Jul 27 HTML / CSS
Web页面中八种创建多列等高(等高列布局)的实现技术
Dec 24 HTML / CSS
CSS3 实现倒计时效果
Nov 25 HTML / CSS
HTML5 Canvas绘制文本及图片的基础教程
Mar 14 HTML / CSS
html5指南-2.如何操作document metadata
Jan 07 HTML / CSS
HTML5实现预览本地图片
Feb 17 HTML / CSS
HTML5制作表格样式
Nov 15 HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
Jun 16 HTML / CSS
html,css,javascript是怎样变成页面的
May 07 HTML / CSS
使用html5制作loading图的示例
Apr 14 #HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
Apr 14 #HTML / CSS
html5图片上传预览示例分享
Apr 14 #HTML / CSS
HTML5 Canvas锯齿图代码实例
Apr 10 #HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
Apr 10 #HTML / CSS
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
Apr 10 #HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
Apr 10 #HTML / CSS
You might like
php获取目录所有文件并将结果保存到数组(实例)
2013/10/25 PHP
thinkphp获取栏目和文章当前位置的方法
2014/10/29 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
phpstorm编辑器乱码问题解决
2014/12/01 PHP
PHP7.1方括号数组符号多值复制及指定键值赋值用法分析
2016/09/26 PHP
laravel 解决groupBy时出现的错误 isn't in Group By问题
2019/10/17 PHP
uploadify 3.0 详细使用说明
2012/06/18 Javascript
jquery()函数的三种语法介绍
2013/10/09 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
2016/06/08 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
AngularJS bootstrap启动详解及实例代码
2016/09/14 Javascript
bootstrap datetimepicker日期插件使用方法
2017/01/13 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
2017/05/14 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
谈谈IntersectionObserver懒加载的具体使用
2019/10/15 Javascript
js实现打字小游戏
2019/12/17 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
Python学习笔记之常用函数及说明
2014/05/23 Python
Python写的Discuz7.2版faq.php注入漏洞工具
2014/08/06 Python
Django小白教程之Django用户注册与登录
2016/04/22 Python
python脚本实现验证码识别
2018/06/07 Python
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
解决python调用自己文件函数/执行函数找不到包问题
2020/06/01 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
美团网旗下网上订餐平台:美团外卖
2020/03/05 全球购物
文言文形式的学生求职信
2013/12/03 职场文书
证婚人搞笑证婚词
2014/01/10 职场文书
考试不及格的检讨书
2014/01/22 职场文书
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
陕西导游词
2015/02/04 职场文书
教师节简报
2015/07/20 职场文书
女儿满月酒致辞
2015/07/29 职场文书