찾다

집  >  기사  >  웹 프론트엔드  >  부트스트랩 파일 입력 플러그인이 사진 미리보기 및 업로드 기능을 구현하는 방법에 대한 자세한 설명

부트스트랩 파일 입력 플러그인이 사진 미리보기 및 업로드 기능을 구현하는 방법에 대한 자세한 설명

PHPz
PHPz원래의
2018-05-22 15:58:458053검색

本文主要介绍了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用法文章，欢迎参考

위 내용은 부트스트랩 파일 입력 플러그인이 사진 미리보기 및 업로드 기능을 구현하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：JS는 드래그를 기반으로 객체의 크기를 변경하는 방법을 구현합니다.다음 기사：JS는 드래그를 기반으로 객체의 크기를 변경하는 방법을 구현합니다.

관련 기사

더보기