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 elment.style样式修改（第三方组件自生成元素）

    参考:https://blog.csdn.net/dcxia89/article/details/80402490         https://blog.csdn.net/jianglibo102 ...

  2. highchart接收后台数据用法

    最近做数据分析的时候使用了highchart这个插件,从后台中接收数据的时候出了一些问题,记录下来免得以后忘了. $(function () { var list = {$weeklist}; var ...

  3. 关于ubuntu中ifconfig得到的ip地址为127.0.0.1

    我们的解决办法是 重新添加一个网络适配

  4. koa中同步与异步的写法

    koa中间件洋葱圈模型,同步的写法 //node server.js //中间件机制 const Koa = require('koa') const app = new Koa() // app.u ...

  5. sql server 获取指定格式的当前日期

    使用sqlserver日期函数中的getdate()可以获取当现的日期,下面就将为您介绍这种使用sqlserver日期函数获取当前日期的方法. 但是如果我们只需要得到当前的日期,不需要时间部分,或者不 ...

  6. LRU Cache数据结构简介

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

  7. Python实例3-字符图网格

    假定有一个列表的列表, 内层列表的每个值都是包含一个字符的字符串, 像这样: grid = [['.', '.', '.', '.', '.', '.'], ['.', 'O', 'O', '.', ...

  8. 再也不怕数据丢失！阿里云RDS MySQL 8.0上线回收站功能

    背景 MySQL 在生产环境使用过程中,会伴随着开发和运维人员的误操作,比如 DROP TABLE / DATABASE,这类 DDL 语句不具有可操作的回滚特性,而导致数据丢失,AliSQL 8.0 ...

  9. Mac OS X中，有三种方式来实现启动项的配置

    Mac OS x 启动项设置 Mac OS X的启动原理: 1,mac固件激活,初始化硬件,加载BootX引导器. 2,BootX加载内核与内核扩展(kext). 3,内核启动launchd进程. 4 ...

  10. C++/CLI 创建WinForm程序

    本文演示下用CLR创建一个简单的winform程序,IDE:VS2015 可以参考另一篇文章:http://blog.csdn.net/wcc27857285/article/details/7813 ...