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. RaspberryPi（一）

    [1]格式化TF卡 // 注意格式 [2]烧录系统 // 烧录完成后不要点弹出的击格式化选项 [3]查找IP.修改静态IP(保持和台式机或笔记本同网段) arp -a //物理地址以B8开头 //或者 ...

  2. Spring Boot使用Swagger2

    1.添加Swagger2依赖 <dependency> <groupId>io.springfox</groupId> <artifactId>spri ...

  3. Activiti流程实例管理

    1.启动流程 在完成了流程定义部署后,就要启动流程实例了. /** * 1 启动流程 * 当流程到达一个节点时,会在act_ru_execution表中产生1条数据 * 如果当前节点是用户任务节点,这 ...

  4. 第一次个人项目【词频统计】——测试样例分析&性能分析

    [空文件测试](认为空文件行数为0) [基本测试] [大小写测试] 可以看出abcd同类型的词出现了三次,而单词树中存储的是ABCd,满足大小写要求. [复杂文件测试] 前三项数据比较接近,但是单词和 ...

  5. Leetcode240. Search a 2D Matrix II搜索二维矩阵2

    编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target.该矩阵具有以下特性: 每行的元素从左到右升序排列. 每列的元素从上到下升序排列. 示例: 现有矩阵 matrix ...

  6. 如何查看PostgreSQL正在执行的SQL

    SELECT     procpid,     start,     now() - start AS lap,     current_query FROM     (SELECT          ...

  7. Vue 本地代理 纯前端技术解决跨域

    vue-axios获取数据很多小伙伴都会使用,但如果前后端分离且后台没设置跨域许可,那要怎样才能解决跨域问题? 常用方法有几种: 通过jsonp跨域 通过修改document.domain来跨子域 使 ...

  8. Web交互增强

    刚刚google了一下这个概念,在其他的领域已经存在了这个概念,但是web方面还是没有被人提及的,所以我在这里第一次声明web方面的交互增强 交互增强 (interaction enhance) 相对 ...

  9. megacli在线raid构建详解(转载自用)

    版权声明:本文为博主原创文章,未经博主允许不得转载,转载附上原文链接即可. https://blog.csdn.net/GX_1_11_real/article/details/83213959 ht ...

  10. 关于JEECMS套站工具的使用要点

      第一步:在[界面—资源]下面引入资源文件(js,css,img…) 第二步:在[界面—模板]下面将网站的入口页面写在[index]文件下 此时修改index页面中的 js,css,图片 的路径,路 ...