• 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>
  • 相关阅读:
    61. 最长不含重复字符的子字符串
    60. 礼物的最大价值 (未理解)
    59. 把数字翻译成字符串
    58. 把数组排成最小的数
    57. 数字序列中某一位的数字 (不懂)
    spring data jpa 官方文档
    idea 编译报错 源发行版 1.8 需要目标发行版 1.8
    idea maven 依赖报错 invalid classes root
    solr
    spring boot 官方文档
  • 原文地址:https://www.cnblogs.com/ajuan/p/12085339.html
Copyright © 2020-2023  润新知