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跳转相同路由不同参数，解决页面数据不自动刷新

    参考: https://www.cnblogs.com/ainyi/p/9340311.html https://blog.csdn.net/weixin_41888813/article/detai ...

  2. 验证sll证书与密钥

    $crtParse = openssl_x509_parse($ssl_content); //$ssl_content 证书内容 .crt文件内容 if (!$crtParse) { return ...

  3. const 有什么用途

    可以定义const 常量:const可以修饰函数的参数.返回值,甚至函数的定义体.被const 修饰的东西都受到强制保护,可以预防意外的变动,能提高程序的健壮性

  4. HDU 6003 Problem Buyer

    贪心题(好久不做了) 题解 考虑最一般的,判断合法性? 经典贪心问题:左端点升序,左端点相同,右端点降序,c[i]升序 优先队列,每次选择覆盖x的右端点最小的区间. 称此方法为“区间匹配贪心” 最小的 ...

  5. JSON操作总结（转自陈新汉）

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意 ...

  6. LRU Cache数据结构简介

    什么是LRU Cache LRU是Least Recently Used的缩写,意思是最近最少使用,它是一种Cache替换算法. 什么是Cache?狭义的Cache指的是位于CPU和主存间的快速RAM ...

  7. C++ Primer 阅读小结

    一.变量和基本类型 类型是C++程序设计的基础. 每种类型都定义了其存储空间要求和可以在该类型的所有对象上执行的操作.C++提供了一组基本内置类型,如int.char等.这些类型与它们在机器硬件上的标 ...

  8. debian下编译安装poco

    系统环境: debian版本:Linux localhost.localdomain 3.10.0-862.14.4.el7.x86_64 #1 SMP Wed Sep 26 15:12:11 UTC ...

  9. Spring Cloud Eureka集群配置及注意事项(Greenwich版本)

    Spring Cloud Eureka集群配置及注意事项(Greenwich版本) 一·概述 Spring Cloud Netflix Eureka 是一个提供服务注册与发现的套件.服务提供者只需要将 ...

  10. linux上源码安装python

    Linux安装Python2.7 以下例子基于python 2.7.9,其他版本同理.# 1.下载python# wget https://www.python.org/ftp/python/2.7. ...