input type="file" 上传文件

最新推荐文章于 2024-08-06 15:05:05 发布

chu_geng

最新推荐文章于 2024-08-06 15:05:05 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/chu_geng/article/details/89840536

版权

input type="file" 上传文件，显示上传图片，并替换上传按钮的位置

限制上传格式可以用 accept=" "，比如 accept=".doc,.docx" （限制上传文件为doc/docx）其他的都不可以

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
.lccid {
  overflow: hidden;
  display: inline-block;
  width: 100%;
  height: 250px;
  background: #4e4eec;
  color: #fff;
  font-size: 16px;
  position: relative;
  border-radius: 4px;
  text-decoration: none;
  text-indent: 0;
  margin: 10px 0;
}

.file {
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0;
  top: 0;
  opacity: 0;
}

.lccid > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.title {
  color: #FFF;
  padding: 0;
  width: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  margin: -30px 0 0 0;
  letter-spacing: 2px;
  font-size: 16px;
  text-align: center;
}

  </style>
  <script src="./jquery-2.1.2.min.js"></script>
</head>

<body>
  <div class="lccid">
    <p class="title">
      <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
      行驶证</p>
    <img src="" / class="img">
    <input type="file" class="file" placeholder="ICCID" accept="image/*" capture="camera"> //匹配所有image的格式

  </div>
  
  <script>
$(".lccid").on("change", "input[type=file]", function() {
  var fileInput = $('.file').get(0).files[0];
  console.log(fileInput)
  $(this).prev().css("opacity", "1")

  var filePath = $(this).val(); //读取图片路径

  var fr = new FileReader(); //创建new FileReader()对象
  var imgObj = this.files[0]; //获取图片

  fr.readAsDataURL(imgObj); //将图片读取为DataURL
  var obj = $(this).prev()[0]; //

  if (filePath.indexOf("jpg") != -1 || filePath.indexOf("JPG") != -1 || filePath.indexOf("PNG") != -1 || filePath.indexOf("png") != -1) {
    var arr = filePath.split('\\');
    var fileName = arr[arr.length - 1];

    $(this).parent().next().show();
    fr.onload = function() {
      obj.src = this.result;
    };
  } else {
    $(this).parent().next().show();
    $(this).parent().next().children("i").html("您未上传文件，或者您上传文件类型有误！").css("color", "red");
    //$(this).parent().next().html("您未上传文件，或者您上传文件类型有误！").css("color","red");
    return false
  }
});


  </script>
</body>

</html>