jQuery 图片上传

1. 概述

1.1 说明

　　在一些前后端不分离的项目中，经常有一些需要把文件或者图片上传的功能，故记录此代码以便后期使用。

1.2 要求

1.上传，10M以内，限bmp,jpg,png,jpeg等图片格式。提示语：限上传10M以内bmp,jpg,png，jpeg等格式的图片。

2.点击上传按钮上传图片，图片在按钮下方展示；按钮名称更改为重新上传。

3.点击表单确定按钮时，才把表单信息与上传图片信息一同上传至服务器。

1.3 展示

　　未上传展示：

　　

　　上传展示：

　　

 2. 代码

  1. 引用jQuery
  2. 上传后如果不符合要求，则清除上传内容信息(直接.val('')赋值不起作用)
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>图片上传示例</title>
  <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <style type="text/css">
    .imageWrapper {
      display: flex;
      flex-direction: column;
    }

    .imageWrapper .fontTip {
      color: #ccc;
      line-height: 24px;
    }

    .imageWrapper .btnUpload {
      height: 33px;
      min-width: 24px;
      padding: 0 20px;
      border: 1px solid #0064b6;
      border-radius: 3px;
      background: #0071ce;
      color: #fff;
      font-size: 14px;
      line-height: 33px;
      text-align: center;
      display: inline-block;
      cursor: pointer;
    }

    .imageShow {
      margin-top: 16px;
      width: 76px;
      height: 84px;
      border: 1px solid rgba(151, 151, 151, 1);
    }

    .imageShow>img {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div class="imageWrapper">
    <div>
      <button id="uploadButton" type="button" class="btnUpload"></button>
      <input id="imagePic" name="imagePic" type="file"
        accept=".bmp,.jpg,.png,.jpeg,image/bmp,image/jpg,image/png,image/jpeg" style="display:none" />
    </div>
    <div class="fontTip">
      限上传不超过10M的bmp,jpg,png,jpeg格式的图片
    </div>
    <div class="imageShow">
      <img id="uploadImageShow" src="" />
    </div>
  </div>
</body>
<script type="text/javascript">
  var btnUploadText = '上传';
  $(document).ready(function () {
    $("#uploadButton").text(btnUploadText)
    $(".imageShow").hide()
    $('#uploadButton').click(function () {
      $('#imagePic').click();
    });
    $("#imagePic").on("change", function (e) {
      var file = e.target.files[0]; //获取图片资源
      var fileTypes = ["bmp", "jpg", "png", "jpeg"];
      var bTypeMatch = false
      for (var i = 0; i < fileTypes.length; i++) {
        var start = file.name.lastIndexOf(".");
        var fileType = file.name.substring(start + 1);
        if (fileType.toLowerCase() == fileTypes[i]) {
          bTypeMatch = true;
          break;
        }
      }
      if (bTypeMatch) {
        if (file.size <= 1024 * 1024 * 10) {
          var reader = new FileReader();
          reader.readAsDataURL(file); // 读取文件
          // 渲染文件
          reader.onload = function (arg) {
            $(".imageShow").show()
            $("#uploadImageShow").attr("src", arg.target.result)
            btnUploadText = '重新上传'
            $("#uploadButton").text(btnUploadText)
          }
        } else {
          alert('仅支持不超过10M的图片');
          emptyImageUpload("#imagePic")
          $("#uploadImageShow").attr("src", "")
          $(".imageShow").hide()
          btnUploadText = '上传'
          $("#uploadButton").text(btnUploadText)
          return false;
        }
      } else {
        alert('仅限bmp，jpg，png，jpeg图片格式');
        emptyImageUpload("#imagePic")
        $("#uploadImageShow").attr("src", "")
        $(".imageShow").hide()
        btnUploadText = '上传'
        $("#uploadButton").text(btnUploadText)
        return false;
      }
    });
  })
  //清空上传图片信息
  function emptyImageUpload(selector) {
    var fi;
    var sourceParent;
    if (selector) {
      fi = $(selector);
      sourceParent = fi.parent();
    } else {
      return;
    }
    $("<form id='tempImgForm'></form>").appendTo(document.body);

    var tempImgForm = $("#tempImgForm");
    tempImgForm.append(fi);
    tempImgForm.get(0).reset();
    sourceParent.append(fi);
    tempImgForm.remove();
  }
</script>

</html>
posted @ 2019-12-23 18:45  ajuan  阅读(13454)  评论(0)  编辑  收藏  举报