代码学堂(uxuew.cn)提供付费解决PHP WEB开发等技术服务,如果需要请 点击加我QQ:1662935793.
>web前端 > html教程 > html5实现读取本地文件并上传的实现方法

html5实现读取本地文件并上传的实现方法

html教程 围观6769次 更新日期:2017-07-08 16:26:44 留下足迹

html结构样式如下:

< div class="addpic"><br>
< button>添加图片</button><br>
< form>
< input accept="image/*" class="addlogo" id="logoimg" multiple="multiple" name="logo" type="file">&nbsp;</form>
< /div>
< img id="showlogo">
 
      从样式上说应不显示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)
      });
});

转载请注明:代码学堂>web前端 > html教程 > html5实现读取本地文件并上传的实现方法

喜欢 (327) or 分享 (90)