实际项目中运用：


功能：实现上传图片，更改上传图片，移除图片的功能

  1. <!DOCTYPE html>
  2. <html>
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title></title>
  7.         <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
  8.         <link rel="stylesheet" href="bootstrap-fileinput.css">
  9.         <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
  10.         <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  11.         <script src="bootstrap-fileinput.js"></script>
  12.     </head>
  14.     <body>
  15.         <div class="form-group">
  16.             <div class="col-md-8">
  17.                 <div class="fileinput fileinput-new" data-provides="fileinput" id="uploadImageDiv">
  18.                     <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
  19.                         <img src="${companyInfo.image}" alt="" />
  20.                     </div>
  21.                     <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
  22.                     <div>
  23.                         <span class="btn default btn-file"> <span
  24.                                             class="fileinput-new">选择图片</span> <span class="fileinput-exists">更改</span> <input type="file" name="uploadImage" id="uploadImage" /></span>
  25.                         <a href="#" class="btn default fileinput-exists" data-dismiss="fileinput">移除</a>
  26.                         <span>请选择1M以内图片</span>
  27.                     </div>
  28.                 </div>
  29.                 <div id="titleImageError" style="color: #a94442"></div>
  30.             </div>
  31.         </div>
  32.     </body>
  33.      <script>
  34.        var url = '';
  35. $("#uploadImage").fileupload({
  36.     url : ROOT + "/security/company/uploadFile",
  37.     dataType : 'json',
  38.     autoUpload : false,
  39.     acceptFileTypes : /(gif|jpe?g|png)$/i,
  40.     maxFileSize : 1000000, // 1 MB
  41.     imageMaxWidth : 100,
  42.     imageMaxHeight : 100,
  43.     messages : {
  44.         acceptFileTypes : '文件类型不匹配',
  45.         maxFileSize : '文件过大',
  46.         minFileSize : '文件过小'
  47.     }
  48. }).on("fileuploadadd", function(e, data) {
  49.     // 当文件添加上去时候调用
  50.     $("#titleImageError").html("");
  51.     data.submit()
  52. }).on("fileuploaddone", function(e, data) {
  53.     // 上传完成时调用
  54.     if (data.result.returnState == "ERROR") {
  55.         alert("上传失败")
  56.         return;
  57.     }
  58.     url = data.result.returnData.url;
  59. });
  61. function updateMsg() {
  62.     $.ajax({
  63.         url : ROOT + "/security/company/updateInfo",
  64.         data : {
  65.             id : $("#companyId").val(),
  66.             image : url,
  67.             companyName : $("#companyName").val(),
  68.             companySite : $("#companySite").val(),
  69.             companyLinker : $("#companyLinker").val(),
  70.             companyTel : $("#companyTel").val()
  71.         },
  72.         type : "post",
  73.         success : function(data) {
  74.             if (data.returnState == "OK") {
  75.                 layer.msg('操作成功', {
  76.                     icon : 6,
  77.                     shade : 0.01,
  78.                     offset : [ '57px', '1100px' ]
  79.                 });
  80.                 $table.bootstrapTable('refresh');
  81.             } else {
  82.                 layer.msg('操作失败', {
  83.                     icon : 5,
  84.                     shade : 0.01,
  85.                     offset : [ '90px', '900px' ]
  86.                 });
  87.             }
  88.         }
  89.     });
  90. }
  91.     </script>
  93. </html>

bootstrap-fileinput.css文件：（github目前正在维护中，之后所有代码上传至我的github）

  1. /*!
  2.  * Jasny Bootstrap v3.1.3 (http://jasny.github.io/bootstrap)
  3.  * Copyright 2012-2014 Arnold Daniels
  4.  * Licensed under Apache-2.0 (https://github.com/jasny/bootstrap/blob/master/LICENSE)
  5.  */
  7. .btn-file {
  8.   position: relative;
  9.   overflow: hidden;
  10.   vertical-align: middle;
  11. }
  12. .btn-file > input {
  13.   position: absolute;
  14.   top: 0;
  15.   right: 0;
  16.   width: 100%;
  17.   height: 100%;
  18.   margin: 0;
  19.   font-size: 23px;
  20.   cursor: pointer;
  21.   filter: alpha(opacity=0);
  22.   opacity: 0;
  24.   direction: ltr;
  25. }
  26. .fileinput {
  27.   display: inline-block;
  28.   margin-bottom: 9px;
  29. }
  30. .fileinput .form-control {
  31.   display: inline-block;
  32.   padding-top: 7px;
  33.   padding-bottom: 5px;
  34.   margin-bottom: 0;
  35.   vertical-align: middle;
  36.   cursor: text;
  37. }
  38. .fileinput .thumbnail {
  39.   display: inline-block;
  40.   margin-bottom: 5px;
  41.   overflow: hidden;
  42.   text-align: center;
  43.   vertical-align: middle;
  44. }
  45. .fileinput .thumbnail > img {
  46.   max-height: 100%;
  47. }
  48. .fileinput .btn {
  49.   vertical-align: middle;
  50. }
  51. .fileinput-exists .fileinput-new,
  52. .fileinput-new .fileinput-exists {
  53.   display: none;
  54. }
  55. .fileinput-inline .fileinput-controls {
  56.   display: inline;
  57. }
  58. .fileinput-filename {
  59.   display: inline-block;
  60.   overflow: hidden;
  61.   vertical-align: middle;
  62. }
  63. .form-control .fileinput-filename {
  64.   vertical-align: bottom;
  65. }
  66. .fileinput.input-group {
  67.   display: table;
  68. }
  69. .fileinput.input-group > * {
  70.   position: relative;
  71.   z-index: 2;
  72. }
  73. .fileinput.input-group > .btn-file {
  74.   z-index: 1;
  75. }
  76. .fileinput-new.input-group .btn-file,
  77. .fileinput-new .input-group .btn-file {
  78.   border-radius: 0 4px 4px 0;
  79. }
  80. .fileinput-new.input-group .btn-file.btn-xs,
  81. .fileinput-new .input-group .btn-file.btn-xs,
  82. .fileinput-new.input-group .btn-file.btn-sm,
  83. .fileinput-new .input-group .btn-file.btn-sm {
  84.   border-radius: 0 3px 3px 0;
  85. }
  86. .fileinput-new.input-group .btn-file.btn-lg,
  87. .fileinput-new .input-group .btn-file.btn-lg {
  88.   border-radius: 0 6px 6px 0;
  89. }
  90. .form-group.has-warning .fileinput .fileinput-preview {
  91.   color: #8a6d3b;
  92. }
  93. .form-group.has-warning .fileinput .thumbnail {
  94.   border-color: #faebcc;
  95. }
  96. .form-group.has-error .fileinput .fileinput-preview {
  97.   color: #a94442;
  98. }
  99. .form-group.has-error .fileinput .thumbnail {
  100.   border-color: #ebccd1;
  101. }
  102. .form-group.has-success .fileinput .fileinput-preview {
  103.   color: #3c763d;
  104. }
  105. .form-group.has-success .fileinput .thumbnail {
  106.   border-color: #d6e9c6;
  107. }
  108. .input-group-addon:not(:first-child) {
  109.   border-left: 0;
  110. }

bootstrap-fileinput.js:

  1. /* ===========================================================
  2.  * Bootstrap: fileinput.js v3.1.3
  3.  * http://jasny.github.com/bootstrap/javascript/#fileinput
  4.  * ===========================================================
  5.  * Copyright 2012-2014 Arnold Daniels
  6.  *
  7.  * Licensed under the Apache License, Version 2.0 (the "License")
  8.  * you may not use this file except in compliance with the License.
  9.  * You may obtain a copy of the License at
  10.  *
  11.  * http://www.apache.org/licenses/LICENSE-2.0
  12.  *
  13.  * Unless required by applicable law or agreed to in writing, software
  14.  * distributed under the License is distributed on an "AS IS" BASIS,
  15.  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16.  * See the License for the specific language governing permissions and
  17.  * limitations under the License.
  18.  * ========================================================== */
  20. +function ($) { "use strict";
  22.   var isIE = window.navigator.appName == 'Microsoft Internet Explorer'
  24.   // FILEUPLOAD PUBLIC CLASS DEFINITION
  25.   // =================================
  27.   var Fileinput = function (element, options) {
  28.     this.$element = $(element)
  30.     this.$input = this.$element.find(':file')
  31.     if (this.$input.length === 0) return
  33.     this.name = this.$input.attr('name') || options.name
  35.     this.$hidden = this.$element.find('input[type=hidden][name="' + this.name + '"]')
  36.     if (this.$hidden.length === 0) {
  37.       this.$hidden = $('<input type="hidden">').insertBefore(this.$input)
  38.     }
  40.     this.$preview = this.$element.find('.fileinput-preview')
  41.     var height = this.$preview.css('height')
  42.     if (this.$preview.css('display') !== 'inline' && height !== '0px' && height !== 'none') {
  43.       this.$preview.css('line-height', height)
  44.     }
  46.     this.original = {
  47.       exists: this.$element.hasClass('fileinput-exists'),
  48.       preview: this.$preview.html(),
  49.       hiddenVal: this.$hidden.val()
  50.     }
  52.     this.listen()
  53.   }
  55.   Fileinput.prototype.listen = function() {
  56.     this.$input.on('change.bs.fileinput', $.proxy(this.change, this))
  57.     $(this.$input[0].form).on('reset.bs.fileinput', $.proxy(this.reset, this))
  59.     this.$element.find('[data-trigger="fileinput"]').on('click.bs.fileinput', $.proxy(this.trigger, this))
  60.     this.$element.find('[data-dismiss="fileinput"]').on('click.bs.fileinput', $.proxy(this.clear, this))
  61.   },
  63.   Fileinput.prototype.change = function(e) {
  64.     var files = e.target.files === undefined ? (e.target && e.target.value ? [{ name: e.target.value.replace(/^.+\\/, '')}] : []) : e.target.files
  66.     e.stopPropagation()
  68.     if (files.length === 0) {
  69.       this.clear()
  70.       return
  71.     }
  73.     this.$hidden.val('')
  74.     this.$hidden.attr('name', '')
  75.     this.$input.attr('name', this.name)
  77.     var file = files[0]
  79.     if (this.$preview.length > 0 && (typeof file.type !== "undefined" ? file.type.match(/^image\/(gif|png|jpeg)$/) : file.name.match(/\.(gif|png|jpe?g)$/i)) && typeof FileReader !== "undefined") {
  80.       var reader = new FileReader()
  81.       var preview = this.$preview
  82.       var element = this.$element
  84.       reader.onload = function(re) {
  85.         var $img = $('<img>')
  86.         $img[0].src = re.target.result
  87.         files[0].result = re.target.result
  89.         element.find('.fileinput-filename').text(file.name)
  91.         // if parent has max-height, using `(max-)height: 100%` on child doesn't take padding and border into account
  92.         if (preview.css('max-height') != 'none') $img.css('max-height', parseInt(preview.css('max-height'), 10) - parseInt(preview.css('padding-top'), 10) - parseInt(preview.css('padding-bottom'), 10)  - parseInt(preview.css('border-top'), 10) - parseInt(preview.css('border-bottom'), 10))
  94.         preview.html($img)
  95.         element.addClass('fileinput-exists').removeClass('fileinput-new')
  97.         element.trigger('change.bs.fileinput', files)
  98.       }
  100.       reader.readAsDataURL(file)
  101.     } else {
  102.       this.$element.find('.fileinput-filename').text(file.name)
  103.       this.$preview.text(file.name)
  105.       this.$element.addClass('fileinput-exists').removeClass('fileinput-new')
  107.       this.$element.trigger('change.bs.fileinput')
  108.     }
  109.   },
  111.   Fileinput.prototype.clear = function(e) {
  112.     if (e) e.preventDefault()
  114.     this.$hidden.val('')
  115.     this.$hidden.attr('name', this.name)
  116.     this.$input.attr('name', '')
  118.     //ie8+ doesn't support changing the value of input with type=file so clone instead
  119.     if (isIE) {
  120.       var inputClone = this.$input.clone(true);
  121.       this.$input.after(inputClone);
  122.       this.$input.remove();
  123.       this.$input = inputClone;
  124.     } else {
  125.       this.$input.val('')
  126.     }
  128.     this.$preview.html('')
  129.     this.$element.find('.fileinput-filename').text('')
  130.     this.$element.addClass('fileinput-new').removeClass('fileinput-exists')
  132.     if (e !== undefined) {
  133.       this.$input.trigger('change')
  134.       this.$element.trigger('clear.bs.fileinput')
  135.     }
  136.   },
  138.   Fileinput.prototype.reset = function() {
  139.     this.clear()
  141.     this.$hidden.val(this.original.hiddenVal)
  142.     this.$preview.html(this.original.preview)
  143.     this.$element.find('.fileinput-filename').text('')
  145.     if (this.original.exists) this.$element.addClass('fileinput-exists').removeClass('fileinput-new')
  146.      else this.$element.addClass('fileinput-new').removeClass('fileinput-exists')
  148.     this.$element.trigger('reset.bs.fileinput')
  149.   },
  151.   Fileinput.prototype.trigger = function(e) {
  152.     this.$input.trigger('click')
  153.     e.preventDefault()
  154.   }
  156.   // FILEUPLOAD PLUGIN DEFINITION
  157.   // ===========================
  159.   var old = $.fn.fileinput
  161.   $.fn.fileinput = function (options) {
  162.     return this.each(function () {
  163.       var $this = $(this),
  164.           data = $this.data('bs.fileinput')
  165.       if (!data) $this.data('bs.fileinput', (data = new Fileinput(this, options)))
  166.       if (typeof options == 'string') data[options]()
  167.     })
  168.   }
  170.   $.fn.fileinput.Constructor = Fileinput
  172.   // FILEINPUT NO CONFLICT
  173.   // ====================
  175.   $.fn.fileinput.noConflict = function () {
  176.     $.fn.fileinput = old
  177.     return this
  178.   }
  180.   // FILEUPLOAD DATA-API
  181.   // ==================
  183.   $(document).on('click.fileinput.data-api', '[data-provides="fileinput"]', function (e) {
  184.     var $this = $(this)
  185.     if ($this.data('bs.fileinput')) return
  186.     $this.fileinput($this.data())
  188.     var $target = $(e.target).closest('[data-dismiss="fileinput"],[data-trigger="fileinput"]');
  189.     if ($target.length > 0) {
  190.       e.preventDefault()
  191.       $target.trigger('click.bs.fileinput')
  192.     }
  193.   })
  195. }(window.jQuery);

自荐前端干货：

进阶攻略|前端最全的框架总结：https://www.jianshu.com/p/2a8ce7075d79
web开发快速提高工作效率的一些资源：https://www.jianshu.com/p/3cede64e87e5
前端学习的几个网站：https://www.jianshu.com/p/c36463dd56db
老司机程序员用到的各种网站整理：https://www.jianshu.com/p/c806eabe5bec
进阶攻略|前端完整的学习路线：https://www.jianshu.com/p/ed50ee3889d4
八款前端开发人员更轻松的实用在线工具：https://www.jianshu.com/p/267a01fb8bdb
前端几个常用简单的开发手册拿走不谢：https://www.jianshu.com/p/fd9689046a9b
程序员常用的六大技术博客类：https://www.jianshu.com/p/d1614f890282
九款优秀的企业项目协作工具推荐：https://www.jianshu.com/p/7df25e438610
移动端手势的七个事件库：https://www.jianshu.com/p/0754d5daa27e
Bootstrap相关优质项目学习清单：https://www.jianshu.com/p/80d229e7fedc
2018前端越来越流行的的技术：https://www.jianshu.com/p/d4af2aa96cee

原文作者：祈澈姑娘
原文链接：https://www.jianshu.com/u/05f416aefbe1
创作不易，转载请告知

90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。

文末福利：

福利一：前端，Java，产品经理，微信小程序，Python等10G资源合集大放送：https://www.jianshu.com/p/e8197d4d9880

福利二：微信小程序入门与实战全套详细视频教程。

【领取方法】

关注 【编程微刊】微信公众号：

回复【小程序demo】一键领取130个微信小程序源码demo资源。

回复【领取资源】一键领取前端，Java，产品经理，微信小程序，Python等资源合集10G资源大放送。

bootstrap+fileinput插件实现可预览上传照片功能的更多相关文章

  1. JS代码实用代码实例（输入框监听，点击显示点击其他地方消失,文件本地预览上传)

    前段时间写前端,遇到一些模块非常有用,总结以备后用 一.input框字数监听 <!DOCTYPE html> <html lang="en"> <he ...

  2. php实现头像预览上传功能

    最近在做php第二阶段的项目,需要用到头像上传的功能 我们要完成头像上传功能,一共要写两个php页面,第一个页面我们叫做touxiang.php,第二个页面我们叫做upload.php 1.touxi ...

  3. 对百度WebUploader的二次封装,精简前端代码之图片预览上传(两句代码搞定上传)

    前言 本篇文章上一篇: 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传) 此篇是在上面的基础上扩展出来专门上传图片的控件封装. 首先我们看看效果: 正文 使用方式同 ...

  4. H5实现多图片预览上传，可点击可拖拽控件介绍

    版权声明:欢迎转载,请注明出处:http://blog.csdn.net/weixin_36380516 在做图片上传时发现一个蛮好用的控件,支持多张图片同时上传,可以点击选择图片,也可以将图片拖拽到 ...

  5. 【项目相关】MVC中使用WebUploader进行图片预览上传以及编辑

    项目中需要用到多图片上传功能,于是在百度搜了一下,首先使用了kissy uploader,是由阿里前端工程师们发起创建的一个开源 JS 框架中的一个上传组件...但,后面问题出现了. 在对添加的信息进 ...

  6. jquery.uploadView 实现图片预览上传

    图片上传,网上有好多版本,今天也要做一个查了好多最终找到了一个uploadview 进行了一下修改 来看代码 @{ Layout = null; } <!DOCTYPE html> < ...

  7. js获取base64格式图片预览上传并用php保存到本地服务器指定文件夹

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  8. MUI 单个图片上传预览（拍照+系统相册）：先选择->预览->上传提交

    1 html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  9. ***Bootstrap FileInput插件的使用经验汇总

    插件下载地址: https://github.com/kartik-v/bootstrap-fileinput/ 官方DEMO查看: http://plugins.krajee.com/file-ba ...

随机推荐

  1. 【Django】序列化

    Django中序列化主要应用于将数据库中检索的数据返回给客户端用户,特别是Ajax请求一般返回为Json格式. * 1.from django.core import serializers** fr ...

  2. syslog日志介绍

    一. syslog简介 syslog是一种工业标准的协议,可用来记录设备的日志.在UNIX系统,路由器.交换机等网络设备中,系统日志(System Log)记录系统中任何时间发生的大小事件.管理者可以 ...

  3. 【Henu ACM Round #12 C】 Alice, Bob, Two Teams

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 考虑任意两个字符串(a,b) 假设a在b的前面 那么如果a+b>=b+a 这里的+表示字符串的链接 那么显然需要交换a,b的位 ...

  4. Windows学习总结（3）——成为电脑高手必备的cmd命令大全

    曾经看电影和电视里面电脑黑客快速敲击电脑键盘,一行行命令在电脑屏幕闪过,一个回车过后,一排排英文象走马灯一样在屏幕上转瞬即逝,那才是我们梦寐以求的高手,有木有!实际上,不光是黑客和系统维护人员,一般的 ...

  5. absolute、relative，toggle()

    測试代码例如以下: <div> <div class="global">不应用样式</div> <div class="glob ...

  6. VPS搭建与IPv6使用教程

    VPS搭建与IPv6使用教程 SoftEther命令: yum -y install gcc zlib-devel openssl-devel readline-devel ncurses-devel ...

  7. 热点共享SS网络

    # 测试系统: Ubuntu 16.04 LTS-lxde-ARM # ***-libev 安装脚本源于 秋水逸冰: https://teddysun.com/358.html # ss-tproxy ...

  8. js39---组合模式，查找遍历树

    /** *有这样一个需求 *有一个学校有2个班(一班,二班) *每个班级分2个小组(一班一组,一班二组,二班一组,二班二组) *学校计算机教室有限,每一个小组分着来上课. *考试的时候大家一起考 *请 ...

  9. PHP和JSON

    PHP和JSON 一.总结 1.php中json的使用方法:php中json的使用超级简单啦,主要是两个函数json_encode(编码)和json_decode(解码),像md5加密 2.json的 ...

  10. Spark MLlib架构解析（含分类算法、回归算法、聚类算法和协同过滤）

    Spark MLlib架构解析 MLlib的底层基础解析 MLlib的算法库分析 分类算法 回归算法 聚类算法 协同过滤 MLlib的实用程序分析 从架构图可以看出MLlib主要包含三个部分: 底层基 ...