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实现圆角、阴影、透明效果并兼容各大浏览器
Aug 08 HTML / CSS
CSS3实现的文本3D效果附图
Sep 03 HTML / CSS
CSS的background属性及CSS3的背景图片设置总结
Jun 13 HTML / CSS
纯CSS3实现的井字棋游戏
Nov 25 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
Feb 06 HTML / CSS
html5 canvas绘制放射性渐变色效果
Jan 04 HTML / CSS
用HTML5实现手机摇一摇的功能的教程
Oct 30 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
使用phonegap获取位置信息的实现方法
Mar 31 HTML / CSS
html5简介及新增功能介绍
May 18 HTML / CSS
用CSS3画一个爱心
Apr 27 HTML / CSS
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
Aug 23 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
thinkphp查询,3.X 5.0方法(亲试可行)
2017/06/17 PHP
奉献给JavaScript初学者的编写开发的七个细节
2011/01/11 Javascript
js单向链表的具体实现实例
2013/06/21 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
2013/06/27 Javascript
Jquery中val()表单取值赋值的实例代码
2013/08/15 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
2014/06/16 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
Vue.js 和 MVVM 的注意事项
2016/11/07 Javascript
jQuery中的siblings()是什么意思(推荐)
2016/12/29 Javascript
浅谈JS封闭函数、闭包、内置对象
2017/07/18 Javascript
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
利用H5api实现时钟的绘制(javascript)
2020/09/13 Javascript
ant design 日期格式化的实现
2020/10/27 Javascript
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
Python 利用pydub库操作音频文件的方法
2019/01/09 Python
python简单验证码识别的实现方法
2019/05/10 Python
python的依赖管理的实现
2019/05/14 Python
Python实现快速排序的方法详解
2019/10/25 Python
Python面向对象封装操作案例详解
2019/12/31 Python
Django models文件模型变更错误解决
2020/05/11 Python
python实现扫雷游戏的示例
2020/10/20 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
华润集团网上药店:健一网
2016/09/19 全球购物
I.T中国官网:精选时尚设计师单品网购平台
2018/03/26 全球购物
《小小竹排画中游》教学反思
2014/02/26 职场文书
公司授权委托书格式样本
2014/10/01 职场文书
大学生自我评价范文
2015/03/03 职场文书
教师培训学习心得体会
2016/01/21 职场文书
《自己去吧》教学反思
2016/02/16 职场文书
感谢信
2019/04/11 职场文书
python多线程方法详解
2022/01/18 Python
Redis全局ID生成器的实现
2022/06/05 Redis