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>

jQuery 图片上传的更多相关文章

  1. jquery 图片上传本地预览V1.2

    基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 代码进行小小的压缩 如果看源码 自己解压就行了 版本已升级  修复jquery版本问题  支持任意jqu ...

  2. Jquery图片上传组件，支持多文件上传

    Jquery图片上传组件,支持多文件上传http://www.jq22.com/jquery-info230jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传.取消. ...

  3. Jquery图片上传预览效果

    uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...

  4. jquery图片上传

    总结两个图片上传的方法: 一:使用jquery.form中的ajaxSubmit来实现上传. <script src="~/JavaScript/jquery-1.10.2.min.j ...

  5. jQuery图片上传前先在本地预览（不经过后端处理）

    前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到预览的效果,但在实现的时候无论怎样都取不到file上图片的真实路径,得 ...

  6. jQuery图片上传前先在本地预览

    js代码: /* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持saf ...

  7. 【转】HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...

  8. HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择 ...

  9. jquery图片上传前预览剪裁

    http://www.webmotionuk.co.uk/jquery/image_upload_crop.php http://keleyi.com/a/bjad/liuvpkke.htm 不错的d ...

随机推荐

  1. vue 使用QRcode生成二维码或在线生成二维码

    参考:https://blog.csdn.net/zhuswy/article/details/80267748 1.安装qrcode.js npm install qrcodejs2 --save ...

  2. 初学C#的简单编程题合集(更新)

    一 编写一个控制台应用程序,要求完成下列功能. 1)   接收一个整数 n. 2)   如果接收的值 n 为正数,输出 1 到 n 间的全部整数. 3)   如果接收的值为负值,用 break 或者 ...

  3. [JSOI2010]连通数 （dfs或tarjan或bitset）+bitset学习

    题目描述 输入格式 输入数据第一行是图顶点的数量,一个正整数N. 接下来N行,每行N个字符.第i行第j列的1表示顶点i到j有边,0则表示无边. 输出格式 输出一行一个整数,表示该图的连通数. 样例 样 ...

  4. 第二章 Odoo 12开发之开发环境准备

    在更深入了解 Odoo 开发之前,我们应配置好开发环境并学习相关的基础管理任务.本文中,我们将学习创建 Odoo 应用所需用到的工具和环境配置.这里采用 Ubuntu 系统来作为开发服务器实例的主机, ...

  5. BZOJ 2683: 简单题(CDQ 分治)

    题面 Time Limit: 50 Sec  Memory Limit: 128 MB Description 你有一个N*N的棋盘,每个格子内有一个整数,初始时的时候全部为0,现在需要维护两种操作: ...

  6. CPA专业阶段单科成绩有5年有效期限，即从通过科目考试的第一年算起

    你为什么不去参加注册会计师考试? 注册会计师考试出考率极低,大家都有自己的原因,可以客观地说,每年注会考场出考人数不足三成,到底是什么原因不去考试呢?大家是这么说的. 1.没有好好复习呗,还怎么去考试 ...

  7. 深入浅出 Java Concurrency (7): 锁机制 part 2 AQS[转]

    在理解J.U.C原理以及锁机制之前,我们来介绍J.U.C框架最核心也是最复杂的一个基础类:java.util.concurrent.locks.AbstractQueuedSynchronizer. ...

  8. spring基于接口的代理报错

    报错: 1.在service层加上@Transactional注解.浏览器端报错(如下),eclipse控制台无信息 2.去掉@Transactional注解,无报错,但是数据库没有信息插入. 解决方 ...

  9. day1(老男孩-Python3.5-S14期全栈开发)

    作者:赵俊            发布日期:2019/10/18 一.第一个python程序 1.在解释器下写hello world程序运行,与运行外部文件方法 运行外部文件,必须在相应位置创建一个p ...

  10. Python学习之循环--绕圈圈（蛇形盘）

    效果图: 注意哦,右边多出来的一点不是程序有问题,是打印的时候我用的\t,但100,三个字符顶格的时候给顶出去的,我太懒了,不想再调输出格式了,就这么凑合看吧 实现代码: sum = int(inpu ...