首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

bootstrap fileinput插件实现预览上传照片功能

Posted in Javascript onJanuary 23, 2018

 效果图如下所示：

bootstrap fileinput插件实现预览上传照片功能 

具体代码如下：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" >
  <link rel="stylesheet" href="bootstrap-fileinput.css" rel="external nofollow" >
  <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="bootstrap-fileinput.js"></script>
 </head>
 <body>
  <div class="form-group">
   <div class="col-md-8">
    <div class="fileinput fileinput-new" data-provides="fileinput" id="uploadImageDiv">
     <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
      <img src="${companyInfo.image}" alt="" />
     </div>
     <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
     <div>
      <span class="btn default btn-file"> <span
           class="fileinput-new">选择图片</span> <span class="fileinput-exists">更改</span> <input type="file" name="uploadImage" id="uploadImage" /></span>
      <a href="#" rel="external nofollow" class="btn default fileinput-exists" data-dismiss="fileinput">移除</a>
      <span>请选择1M以内图片</span>
     </div>
    </div>
    <div id="titleImageError" style="color: #a94442"></div>
   </div>
  </div>
 </body>
 <script>
  var handleEvent = function() {
   $("#uploadImage").fileupload({
    url: "design/resource/uploadFile",
    dataType: 'json',
    autoUpload: false,
    acceptFileTypes: /(gif|jpe?g|png)$/i,
    maxFileSize: 1000000, // 1 MB
    imageMaxWidth: 100,
    imageMaxHeight: 100,
    messages: {
     acceptFileTypes: '文件类型不匹配',
     maxFileSize: '文件过大',
     minFileSize: '文件过小'
    }
   }).on("fileuploadadd", function(e, data) {
    $("#titleImageError").html("");
    $("#addBtn,#updateBtn").off("click").on("click", function() {
     if($("#dialogForm").validate().form()) {
      customGlobal.blockUI("#modalContent");
      data.submit()
     }
    })
   }).on("fileuploadprocessalways", function(e, data) {
    var index = data.index,
     file = data.files[index];
    if(file.error) {
     $("#titleImageError").html(file.error)
    }
    $("#addBtn,#updateBtn").prop('disabled', !!data.files.error);
   }).on("fileuploaddone", function(e, data) {
    if(data.result.returnState == "ERROR") {
     toastr.warning(data.result.returnMsg);
     customGlobal.ajaxCallback(data);
     return;
    }
    addNews(data.result.returnData.url);
   });
  }
 </script>
</html>

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

/*!
 * Jasny Bootstrap v3.1.3 (http://jasny.github.io/bootstrap)
 * Copyright 2012-2014 Arnold Daniels
 * Licensed under Apache-2.0 (https://github.com/jasny/bootstrap/blob/master/LICENSE)
 */
.btn-file {
 position: relative;
 overflow: hidden;
 vertical-align: middle;
}
.btn-file > input {
 position: absolute;
 top: 0;
 right: 0;
 width: 100%;
 height: 100%;
 margin: 0;
 font-size: 23px;
 cursor: pointer;
 filter: alpha(opacity=0);
 opacity: 0;
 direction: ltr;
}
.fileinput {
 display: inline-block;
 margin-bottom: 9px;
}
.fileinput .form-control {
 display: inline-block;
 padding-top: 7px;
 padding-bottom: 5px;
 margin-bottom: 0;
 vertical-align: middle;
 cursor: text;
}
.fileinput .thumbnail {
 display: inline-block;
 margin-bottom: 5px;
 overflow: hidden;
 text-align: center;
 vertical-align: middle;
}
.fileinput .thumbnail > img {
 max-height: 100%;
}
.fileinput .btn {
 vertical-align: middle;
}
.fileinput-exists .fileinput-new,
.fileinput-new .fileinput-exists {
 display: none;
}
.fileinput-inline .fileinput-controls {
 display: inline;
}
.fileinput-filename {
 display: inline-block;
 overflow: hidden;
 vertical-align: middle;
}
.form-control .fileinput-filename {
 vertical-align: bottom;
}
.fileinput.input-group {
 display: table;
}
.fileinput.input-group > * {
 position: relative;
 z-index: 2;
}
.fileinput.input-group > .btn-file {
 z-index: 1;
}
.fileinput-new.input-group .btn-file,
.fileinput-new .input-group .btn-file {
 border-radius: 0 4px 4px 0;
}
.fileinput-new.input-group .btn-file.btn-xs,
.fileinput-new .input-group .btn-file.btn-xs,
.fileinput-new.input-group .btn-file.btn-sm,
.fileinput-new .input-group .btn-file.btn-sm {
 border-radius: 0 3px 3px 0;
}
.fileinput-new.input-group .btn-file.btn-lg,
.fileinput-new .input-group .btn-file.btn-lg {
 border-radius: 0 6px 6px 0;
}
.form-group.has-warning .fileinput .fileinput-preview {
 color: #8a6d3b;
}
.form-group.has-warning .fileinput .thumbnail {
 border-color: #faebcc;
}
.form-group.has-error .fileinput .fileinput-preview {
 color: #a94442;
}
.form-group.has-error .fileinput .thumbnail {
 border-color: #ebccd1;
}
.form-group.has-success .fileinput .fileinput-preview {
 color: #3c763d;
}
.form-group.has-success .fileinput .thumbnail {
 border-color: #d6e9c6;
}
.input-group-addon:not(:first-child) {
 border-left: 0;
}
bootstrap-fileinput.js:
/* ===========================================================
 * Bootstrap: fileinput.js v3.1.3
 * http://jasny.github.com/bootstrap/javascript/#fileinput
 * ===========================================================
 * Copyright 2012-2014 Arnold Daniels
 *
 * Licensed under the Apache License, Version 2.0 (the "License")
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ========================================================== */
+function ($) { "use strict";
 var isIE = window.navigator.appName == 'Microsoft Internet Explorer'
 // FILEUPLOAD PUBLIC CLASS DEFINITION
 // =================================
 var Fileinput = function (element, options) {
 this.$element = $(element)
 this.$input = this.$element.find(':file')
 if (this.$input.length === 0) return
 this.name = this.$input.attr('name') || options.name
 this.$hidden = this.$element.find('input[type=hidden][name="' + this.name + '"]')
 if (this.$hidden.length === 0) {
  this.$hidden = $('<input type="hidden">').insertBefore(this.$input)
 }
 this.$preview = this.$element.find('.fileinput-preview')
 var height = this.$preview.css('height')
 if (this.$preview.css('display') !== 'inline' && height !== '0px' && height !== 'none') {
  this.$preview.css('line-height', height)
 }
 this.original = {
  exists: this.$element.hasClass('fileinput-exists'),
  preview: this.$preview.html(),
  hiddenVal: this.$hidden.val()
 }
 this.listen()
 }
 Fileinput.prototype.listen = function() {
 this.$input.on('change.bs.fileinput', $.proxy(this.change, this))
 $(this.$input[0].form).on('reset.bs.fileinput', $.proxy(this.reset, this))
 this.$element.find('[data-trigger="fileinput"]').on('click.bs.fileinput', $.proxy(this.trigger, this))
 this.$element.find('[data-dismiss="fileinput"]').on('click.bs.fileinput', $.proxy(this.clear, this))
 },
 Fileinput.prototype.change = function(e) {
 var files = e.target.files === undefined ? (e.target && e.target.value ? [{ name: e.target.value.replace(/^.+\\/, '')}] : []) : e.target.files
 e.stopPropagation()
 if (files.length === 0) {
  this.clear()
  return
 }
 this.$hidden.val('')
 this.$hidden.attr('name', '')
 this.$input.attr('name', this.name)
 var file = files[0]
 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") {
  var reader = new FileReader()
  var preview = this.$preview
  var element = this.$element
  reader.onload = function(re) {
  var $img = $('<img>')
  $img[0].src = re.target.result
  files[0].result = re.target.result
  element.find('.fileinput-filename').text(file.name)
  // if parent has max-height, using `(max-)height: 100%` on child doesn't take padding and border into account
  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))
  preview.html($img)
  element.addClass('fileinput-exists').removeClass('fileinput-new')
  element.trigger('change.bs.fileinput', files)
  }
  reader.readAsDataURL(file)
 } else {
  this.$element.find('.fileinput-filename').text(file.name)
  this.$preview.text(file.name)
  this.$element.addClass('fileinput-exists').removeClass('fileinput-new')
  this.$element.trigger('change.bs.fileinput')
 }
 },
 Fileinput.prototype.clear = function(e) {
 if (e) e.preventDefault()
 this.$hidden.val('')
 this.$hidden.attr('name', this.name)
 this.$input.attr('name', '')
 //ie8+ doesn't support changing the value of input with type=file so clone instead
 if (isIE) { 
  var inputClone = this.$input.clone(true);
  this.$input.after(inputClone);
  this.$input.remove();
  this.$input = inputClone;
 } else {
  this.$input.val('')
 }
 this.$preview.html('')
 this.$element.find('.fileinput-filename').text('')
 this.$element.addClass('fileinput-new').removeClass('fileinput-exists')
 if (e !== undefined) {
  this.$input.trigger('change')
  this.$element.trigger('clear.bs.fileinput')
 }
 },
 Fileinput.prototype.reset = function() {
 this.clear()
 this.$hidden.val(this.original.hiddenVal)
 this.$preview.html(this.original.preview)
 this.$element.find('.fileinput-filename').text('')
 if (this.original.exists) this.$element.addClass('fileinput-exists').removeClass('fileinput-new')
  else this.$element.addClass('fileinput-new').removeClass('fileinput-exists')
 this.$element.trigger('reset.bs.fileinput')
 },
 Fileinput.prototype.trigger = function(e) {
 this.$input.trigger('click')
 e.preventDefault()
 }
 // FILEUPLOAD PLUGIN DEFINITION
 // ===========================
 var old = $.fn.fileinput
 $.fn.fileinput = function (options) {
 return this.each(function () {
  var $this = $(this),
   data = $this.data('bs.fileinput')
  if (!data) $this.data('bs.fileinput', (data = new Fileinput(this, options)))
  if (typeof options == 'string') data[options]()
 })
 }
 $.fn.fileinput.Constructor = Fileinput
 // FILEINPUT NO CONFLICT
 // ====================
 $.fn.fileinput.noConflict = function () {
 $.fn.fileinput = old
 return this
 }
 // FILEUPLOAD DATA-API
 // ==================
 $(document).on('click.fileinput.data-api', '[data-provides="fileinput"]', function (e) {
 var $this = $(this)
 if ($this.data('bs.fileinput')) return
 $this.fileinput($this.data())
 var $target = $(e.target).closest('[data-dismiss="fileinput"],[data-trigger="fileinput"]');
 if ($target.length > 0) {
  e.preventDefault()
  $target.trigger('click.bs.fileinput')
 }
 })
}(window.jQuery);

总结

以上所述是小编给大家介绍的bootstrap fileinput插件实现预览上传照片功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

bootstrap fileinput插件实现预览上传照片功能

- Author -

祈澈姑娘

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
彻底搞懂JS无缝滚动代码
Jan 03 Javascript
List the Stored Procedures in a SQL Server database
Jun 20 Javascript
使用jQuery的ajax功能实现的RSS Reader 代码
Sep 03 Javascript
IE与FireFox中的childNodes区别
Oct 20 Javascript
详解JS 比较两个Json对象的值是否相等的实例
Nov 20 Javascript
jQuery实现可展开折叠的导航效果示例
Sep 12 Javascript
谈谈JavaScript数组常用方法总结
Jan 24 Javascript
了解VUE的render函数的使用
Jun 08 Javascript
Windows安装Node.js报错:2503、2502的解决方法
Oct 25 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
Nov 13 Javascript
详解基于node.js的脚手架工具开发经历
Jan 28 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
Aug 26 Javascript
php 解压zip压缩包内容到指定目录的实例
Jan 23 #Javascript
three.js 入门案例详解
Jan 23 #Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
Jan 23 #Javascript
vuex的使用及持久化state的方式详解
Jan 23 #Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 #jQuery
js 实现复选框只能选择一项的示例代码
Jan 23 #Javascript
Vue 换肤的示例实践
Jan 23 #Javascript
检讨书(456) 表扬信(62) 辞职信(98) 邀请函(127) 广播稿(323) 教学反思(909) 介绍信(57) 感言(394) 道歉信(39) 事迹材料(636)
You might like
PHP 利用Mail_MimeDecode类提取邮件信息示例
2014/01/26 PHP
php通过array_unshift函数添加多个变量到数组前端的方法
2015/03/18 PHP
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
解决在Laravel 中处理OPTIONS请求的问题
2019/10/11 PHP
jquery多浏览器捕捉回车事件代码
2010/06/22 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
JavaScript闭包实例讲解
2014/04/22 Javascript
究竟什么是Node.js？Node.js有什么好处？
2015/05/29 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
2015/09/23 Javascript
JS实现字符串转日期并比较大小实例分析
2015/12/09 Javascript
js 将图片连接转换成base64格式的简单实例
2016/08/10 Javascript
JS验证图片格式和大小并预览的简单实例
2016/10/11 Javascript
jQuery实现背景滑动菜单
2016/12/02 Javascript
浅析jQuery操作select控件的取值和设值
2016/12/07 Javascript
jQuery实现6位数字密码输入框
2016/12/29 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
Vue 项目部署到服务器的问题解决方法
2017/12/05 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
基于Vue CSR的微前端实现方案实践
2020/05/27 Javascript
js实现双人五子棋小游戏
2020/05/28 Javascript
一文读懂vue动态属性数据绑定（v-bind指令）
2020/07/20 Javascript
JavaScript常用工具函数汇总（浏览器环境）
2020/09/17 Javascript
通过mod_python配置运行在Apache上的Django框架
2015/07/22 Python
Python爬虫利用cookie实现模拟登陆实例详解
2017/01/12 Python
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
python提取具有某种特定字符串的行数据方法
2018/12/11 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
python字符串反转的四种方法详解
2019/12/02 Python
PyCharm 在Windows的有用快捷键详解
2020/04/07 Python
打印tensorflow恢复模型中所有变量与操作节点方式
2020/05/26 Python
HTML5等待加载动画效果
2017/07/27 HTML / CSS
考试不及格检讨书
2014/01/09 职场文书
七一表彰活动方案
2014/01/18 职场文书
幼儿园教师奖惩制度
2014/02/01 职场文书
新生入学欢迎词
2015/01/26 职场文书
晶体管来复再生式二管收音机
2021/04/22 无线电