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. BMP 图片格式

     BMP根据颜色深度,可以分为2(1位).16(4位).256(8位).65536(16位)和1670万(24位)以及32位含有alpha通道.8位图像可以是 索引彩色图像外,也可以是灰阶图像,而索引 ...

  2. VS2005下安装boost

    本文参照http://dxwang.blog.51cto.com/384651/711798 (一)boost的安装和编译 1:下载boost版本,目前最新的版本为1-47-0    下载地址为htt ...

  3. vue:父子组件间通信，父组件调用子组件方法进行校验子组件的表单

    参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...

  4. Luogu P1850 换教室(期望dp)

    P1850 换教室 题意 题目描述 对于刚上大学的牛牛来说,他面临的第一个问题是如何根据实际情况申请合适的课程. 在可以选择的课程中,有\(2n\)节课程安排在\(n\)个时间段上.在第\(i(1\l ...

  5. mysql工具使用

    mysql -u user_name -p123456 -h host_name -P 3306 -D database_name -e "show full processlist;&qu ...

  6. Oracele 11.2.0.3 的一个问题

    最近又在折腾Oracle.由于要用到Oracle spatial对Google投影的空间数据的操作,所以得安装11.2.0.3以上版本的Oracle.但是发现这样的一个问题,当我在64位系统的笔记本上 ...

  7. jeecms v9导入myeclipse 2015 ehcache.xml报错问题

    1.找不到ehcache.xml文件问题 cache-context.xml <property name="configLocation"> <value> ...

  8. Angular-cli 的安装

    一.先安装node.js(若已经安装就跳过) 1.下载node.js安装包 http://nodejs.cn 按照自己电脑的配置,下载相应的安装包(我下载的是 node-v6.10.3-x64.msi ...

  9. Elasticsearch快速开始

    Elasticsearch是一个分布式RESTful风格的搜索和数据分析引擎 查询:Elasticsearch允许执行和合并多种类型的搜索——结构化.非结构化.地理位置.度量指标.搜索方式随心而变 分 ...

  10. 10 种最常见的 Javascript 错误(频率最高)

    本文是小编给大家收藏的JavaScript 中频度最高的 10 种错误,我们会告诉你什么原因导致了这些错误,以及如何防止这些错误发生.写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学 ...