首页
所有分类
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 相关文章推荐
jquery 触发a链接点击事件解决方案
May 02 Javascript
地址栏传递中文参数乱码在js里用escape转码
Aug 28 Javascript
javascript生成随机颜色示例代码
May 05 Javascript
js事件绑定快捷键以ctrl+k为例
Sep 30 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
jQuery自定义滚动条完整实例
Jan 08 Javascript
js实现楼层效果的简单实例
Jul 15 Javascript
bootstrap轮播模板使用方法详解
Nov 17 Javascript
傻瓜式vuex语法糖kiss-vuex整理
Dec 21 Javascript
通过GASP让vue实现动态效果实例代码详解
Nov 24 Javascript
javascript浅层克隆、深度克隆对比及实例解析
Feb 09 Javascript
node.js通过url读取文件
Oct 16 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
希腊购物网站(6) 缅甸购物网站(1) 摩纳哥购物网站(1) 越南购物网站(9) 秘鲁购物网站(1) 巴基斯坦购物网站(2) 匈牙利购物网站(11) 亚洲购物网站(6) 乌克兰购物网站(27) 北美洲购物网站(1)
You might like
PHP学习 运算符与运算符优先级
2008/06/15 PHP
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
PHP实现抓取HTTPS内容
2014/12/01 PHP
Laravel下生成验证码的类
2017/11/15 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
PHP检测一个数组有没有定义的方法步骤
2019/07/20 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
js 页面刷新location.reload和location.replace的区别小结
2009/12/24 Javascript
javascript innerText和innerHtml应用
2010/01/28 Javascript
整理一些JavaScript的IE和火狐的兼容性注意事项
2011/03/17 Javascript
jQuery动画animate方法使用介绍
2013/05/06 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
html5+javascript制作简易画板附图
2014/04/25 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
JS完成画圆圈的小球
2017/03/07 Javascript
ES6中Iterator与for..of..遍历用法分析
2017/03/31 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
2019/09/01 Javascript
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
在Django中使用Sitemap的方法讲解
2015/07/22 Python
python实现学员管理系统
2019/02/26 Python
Python time库基本使用方法分析
2019/12/13 Python
Python图像处理库PIL的ImageGrab模块介绍详解
2020/02/26 Python
python 操作excel表格的方法
2020/12/05 Python
Python: glob匹配文件的操作
2020/12/11 Python
20佳惊艳的HTML5应用程序示例分享
2011/05/03 HTML / CSS
LODI女鞋在线商店：阿利坎特的鞋类品牌
2019/02/15 全球购物
高中生毕业学习总结的自我评价
2013/11/14 职场文书
高三语文教学反思
2014/01/15 职场文书
应届毕业生自荐书
2014/06/18 职场文书
祖国在我心中演讲稿450字
2014/09/05 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
MySQL创建管理RANGE分区
2022/04/13 MySQL