cari

Rumah  >  Artikel  >  hujung hadapan web  >  bootstrap fileinput插件实现预览上传照片功能方法详解

bootstrap fileinput插件实现预览上传照片功能方法详解

PHPz
PHPzasal
2018-05-22 15:58:458050semak imbas

本文主要介绍了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>
  <p class="form-group">
   <p class="col-md-8">
    <p class="fileinput fileinput-new" data-provides="fileinput" id="uploadImagep">
     <p class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
      <img src="${companyInfo.image}" alt="" />
     </p>
     <p class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></p>
     <p>
      <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>
     </p>
    </p>
    <p id="titleImageError" style="color: #a94442"></p>
   </p>
  </p>
 </body>
 <script>
  var handleEvent = function() {
   $("#uploadImage").fileupload({
    url: "design/resource/uploadFile",
    dataType: &#39;json&#39;,
    autoUpload: false,
    acceptFileTypes: /(gif|jpe?g|png)$/i,
    maxFileSize: 1000000, // 1 MB
    imageMaxWidth: 100,
    imageMaxHeight: 100,
    messages: {
     acceptFileTypes: &#39;文件类型不匹配&#39;,
     maxFileSize: &#39;文件过大&#39;,
     minFileSize: &#39;文件过小&#39;
    }
   }).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(&#39;disabled&#39;, !!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 == &#39;Microsoft Internet Explorer&#39;
 // FILEUPLOAD PUBLIC CLASS DEFINITION
 // =================================
 var Fileinput = function (element, options) {
 this.$element = $(element)
 this.$input = this.$element.find(&#39;:file&#39;)
 if (this.$input.length === 0) return
 this.name = this.$input.attr(&#39;name&#39;) || options.name
 this.$hidden = this.$element.find(&#39;input[type=hidden][name="&#39; + this.name + &#39;"]&#39;)
 if (this.$hidden.length === 0) {
  this.$hidden = $(&#39;<input type="hidden">&#39;).insertBefore(this.$input)
 }
 this.$preview = this.$element.find(&#39;.fileinput-preview&#39;)
 var height = this.$preview.css(&#39;height&#39;)
 if (this.$preview.css(&#39;display&#39;) !== &#39;inline&#39; && height !== &#39;0px&#39; && height !== &#39;none&#39;) {
  this.$preview.css(&#39;line-height&#39;, height)
 }
 this.original = {
  exists: this.$element.hasClass(&#39;fileinput-exists&#39;),
  preview: this.$preview.html(),
  hiddenVal: this.$hidden.val()
 }
 this.listen()
 }
 Fileinput.prototype.listen = function() {
 this.$input.on(&#39;change.bs.fileinput&#39;, $.proxy(this.change, this))
 $(this.$input[0].form).on(&#39;reset.bs.fileinput&#39;, $.proxy(this.reset, this))
 this.$element.find(&#39;[data-trigger="fileinput"]&#39;).on(&#39;click.bs.fileinput&#39;, $.proxy(this.trigger, this))
 this.$element.find(&#39;[data-dismiss="fileinput"]&#39;).on(&#39;click.bs.fileinput&#39;, $.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(/^.+\\/, &#39;&#39;)}] : []) : e.target.files
 e.stopPropagation()
 if (files.length === 0) {
  this.clear()
  return
 }
 this.$hidden.val(&#39;&#39;)
 this.$hidden.attr(&#39;name&#39;, &#39;&#39;)
 this.$input.attr(&#39;name&#39;, 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 = $(&#39;<img>&#39;)
  $img[0].src = re.target.result
  files[0].result = re.target.result
  element.find(&#39;.fileinput-filename&#39;).text(file.name)
  // if parent has max-height, using `(max-)height: 100%` on child doesn&#39;t take padding and border into account
  if (preview.css(&#39;max-height&#39;) != &#39;none&#39;) $img.css(&#39;max-height&#39;, parseInt(preview.css(&#39;max-height&#39;), 10) - parseInt(preview.css(&#39;padding-top&#39;), 10) - parseInt(preview.css(&#39;padding-bottom&#39;), 10) - parseInt(preview.css(&#39;border-top&#39;), 10) - parseInt(preview.css(&#39;border-bottom&#39;), 10))
  preview.html($img)
  element.addClass(&#39;fileinput-exists&#39;).removeClass(&#39;fileinput-new&#39;)
  element.trigger(&#39;change.bs.fileinput&#39;, files)
  }
  reader.readAsDataURL(file)
 } else {
  this.$element.find(&#39;.fileinput-filename&#39;).text(file.name)
  this.$preview.text(file.name)
  this.$element.addClass(&#39;fileinput-exists&#39;).removeClass(&#39;fileinput-new&#39;)
  this.$element.trigger(&#39;change.bs.fileinput&#39;)
 }
 },
 Fileinput.prototype.clear = function(e) {
 if (e) e.preventDefault()
 this.$hidden.val(&#39;&#39;)
 this.$hidden.attr(&#39;name&#39;, this.name)
 this.$input.attr(&#39;name&#39;, &#39;&#39;)
 //ie8+ doesn&#39;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(&#39;&#39;)
 }
 this.$preview.html(&#39;&#39;)
 this.$element.find(&#39;.fileinput-filename&#39;).text(&#39;&#39;)
 this.$element.addClass(&#39;fileinput-new&#39;).removeClass(&#39;fileinput-exists&#39;)
 if (e !== undefined) {
  this.$input.trigger(&#39;change&#39;)
  this.$element.trigger(&#39;clear.bs.fileinput&#39;)
 }
 },
 Fileinput.prototype.reset = function() {
 this.clear()
 this.$hidden.val(this.original.hiddenVal)
 this.$preview.html(this.original.preview)
 this.$element.find(&#39;.fileinput-filename&#39;).text(&#39;&#39;)
 if (this.original.exists) this.$element.addClass(&#39;fileinput-exists&#39;).removeClass(&#39;fileinput-new&#39;)
  else this.$element.addClass(&#39;fileinput-new&#39;).removeClass(&#39;fileinput-exists&#39;)
 this.$element.trigger(&#39;reset.bs.fileinput&#39;)
 },
 Fileinput.prototype.trigger = function(e) {
 this.$input.trigger(&#39;click&#39;)
 e.preventDefault()
 }
 // FILEUPLOAD PLUGIN DEFINITION
 // ===========================
 var old = $.fn.fileinput
 $.fn.fileinput = function (options) {
 return this.each(function () {
  var $this = $(this),
   data = $this.data(&#39;bs.fileinput&#39;)
  if (!data) $this.data(&#39;bs.fileinput&#39;, (data = new Fileinput(this, options)))
  if (typeof options == &#39;string&#39;) data[options]()
 })
 }
 $.fn.fileinput.Constructor = Fileinput
 // FILEINPUT NO CONFLICT
 // ====================
 $.fn.fileinput.noConflict = function () {
 $.fn.fileinput = old
 return this
 }
 // FILEUPLOAD DATA-API
 // ==================
 $(document).on(&#39;click.fileinput.data-api&#39;, &#39;[data-provides="fileinput"]&#39;, function (e) {
 var $this = $(this)
 if ($this.data(&#39;bs.fileinput&#39;)) return
 $this.fileinput($this.data())
 var $target = $(e.target).closest(&#39;[data-dismiss="fileinput"],[data-trigger="fileinput"]&#39;);
 if ($target.length > 0) {
  e.preventDefault()
  $target.trigger(&#39;click.bs.fileinput&#39;)
 }
 })
}(window.jQuery);

相关推荐：

Bootstrap教程

基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

详解Bootstrap fileinput文件上传组件的实例

推荐9款常用的fileinput用法文章，欢迎参考

Atas ialah kandungan terperinci bootstrap fileinput插件实现预览上传照片功能方法详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JS实现基于拖拽改变物体大小的方法Artikel seterusnya：JS实现点击下拉菜单把选择的内容同步到input输入框内的实例

Artikel berkaitan

Lihat lagi