html5中怎么读取本地文件

发布时间:2022-04-25 10:47:02 作者:iii
来源:亿速云 阅读:358

本文小编为大家详细介绍“html5中怎么读取本地文件”,内容详细,步骤清晰,细节处理妥当,希望这篇“html5中怎么读取本地文件”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

代码如下:

<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) 
}); 
});

读到这里,这篇“html5中怎么读取本地文件”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. js如何读取本地文件
  2. 利用java如何实现读取本地文件

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html5

上一篇:Html5中如何实现百叶窗效果

下一篇:html5中如何实现图片上传预览功能

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》