html5中如何读取本地文件-创新互联

这篇文章将为大家详细讲解有关html5中如何读取本地文件,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

创新互联专注骨干网络服务器租用十年,服务更有保障!服务器租用,服务器托管雅安 成都服务器租用,成都服务器托管,骨干网络带宽,享受低延迟,高速访问。灵活、实现低成本的共享或公网数据中心高速带宽的专属高性能服务器。

代码如下:

  
   
 

从样式上说应不显示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中如何读取本地文件就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


分享标题:html5中如何读取本地文件-创新互联
本文链接:http://bzwzjz.com/article/dpehgi.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 成都网站建设公司 重庆网站设计 手机网站制作 LED网站设计方案 网站建设 攀枝花网站设计 成都网站制作 成都网站建设 成都网站建设 重庆网站制作 温江网站设计 成都定制网站建设 营销型网站建设 成都网站建设公司 成都网站建设推广 成都网站建设 网站设计制作 响应式网站建设 成都网站制作 重庆企业网站建设 网站建设推广 成都网站制作