• 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>
  • 相关阅读:
    完全图解scrollLeft,scrollWidth,clientWidth,offsetWidth 获取相对途径,滚动图片
    Input的size,width,maxlength属性
    Linux,VI命令详解
    Javascript 第十章
    Javascript 第七章
    IE css hack
    Javascript 第九章
    js中document.documentElement 和document.body 以及其属性
    关于xmlhttp.status == 0的问题
    Javascript 第八章
  • 原文地址:https://www.cnblogs.com/ajuan/p/12085339.html
Copyright © 2020-2023  润新知