html预览手机本地图片

来源：互联网发布：照片书制作软件下载编辑：程序博客网时间：2024/04/29 01:27
<!DOCTYPE html>    <html>    <head>    <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"><meta name="format-detection" content="telephone=no"><meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /><meta http-equiv="Pragma" content="no-cache" /><meta http-equiv="Expires" content="0" /><style>.file_div1{width:33%;background-position:center;background-repeat:no-repeat;position:relative;float:left;margin-left:0.3%}.file_img{width:100%;height:100%;}input{width:100%;height:100%;float:left;position:absolute;left:0px;top:0px;background:#ff0000;opacity:0;}.pic_container{margin-top:20px;padding-bottom:20px;}</style><script type="text/javascript">  function preImg(sourceId, targetId) {      if (typeof FileReader === 'undefined') {          alert('Your browser does not support FileReader...');          return;      }      var reader = new FileReader();        reader.onload = function(e) {          var img = document.getElementById(targetId);          img.src = this.result;      }      reader.readAsDataURL(document.getElementById(sourceId).files[0]);  }  </script>  </head>  <body>  <form action="">      <div class="file_div1"> <img class="file_img" src="image/cover.png" id="pic_1"/>    <input type="file" capture="camera" accept="image/*" id="cameraInput1" name="cameraInput" onchange="preImg(this.id,'pic_1');">  </div> </form>  </body>  </html>
0 0