2. 程式人生 > >bootstrap+fileinput外掛實現可預覽上傳照片功能

bootstrap+fileinput外掛實現可預覽上傳照片功能

阿新 • • 發佈：2018-12-21
            圖片.png

實際專案中運用：


圖片.png

功能：實現上傳圖片，更改上傳圖片，移除圖片的功能

<!DOCTYPE html><html>    <head>        <metacharset="UTF-8">        <title></title>        <linkrel="stylesheet"href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">        <linkrel="stylesheet"
 
href="bootstrap-fileinput.css">        <scriptsrc="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>        <scriptsrc="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>        <scriptsrc="bootstrap-fileinput.js"></script>    </
 
head>    <body>        <divclass="form-group">            <divclass="col-md-8">                <divclass="fileinput fileinput-new"data-provides="fileinput"id="uploadImageDiv">                    <divclass="fileinput-new thumbnail"style="width: 200px; height: 150px;">                        <
 
imgsrc="${companyInfo.image}"alt="" />                    </div>                    <divclass="fileinput-preview fileinput-exists thumbnail"style="max-width: 200px; max-height: 150px;"></div>                    <div>                        <spanclass="btn default btn-file"> <spanclass="fileinput-new">選擇圖片</span> <spanclass="fileinput-exists">更改</span> <inputtype="file"name="uploadImage"id="uploadImage" /></span>                        <ahref="#"class="btn default fileinput-exists"data-dismiss="fileinput">移除</a>                        <span>請選擇1M以內圖片</span>                    </div>                </div>                <divid="titleImageError"style="color: #a94442"></div>            </div>        </div>    </body>     <script>var url = '';$("#uploadImage").fileupload({    url : ROOT + "/security/company/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("");    data.submit()}).on("fileuploaddone", function(e, data) {    // 上傳完成時呼叫if (data.result.returnState == "ERROR") {        alert("上傳失敗")        return;    }    url = data.result.returnData.url;});functionupdateMsg() {    $.ajax({        url : ROOT + "/security/company/updateInfo",        data : {            id : $("#companyId").val(),            image : url,            companyName : $("#companyName").val(),            companySite : $("#companySite").val(),            companyLinker : $("#companyLinker").val(),            companyTel : $("#companyTel").val()        },        type : "post",        success : function(data) {            if (data.returnState == "OK") {                layer.msg('操作成功', {                    icon : 6,                    shade : 0.01,                    offset : [ '57px', '1100px' ]                });                $table.bootstrapTable('refresh');            } else {                layer.msg('操作失敗', {                    icon : 5,                    shade : 0.01,                    offset : [ '90px', '900px' ]                });            }        }    });}    </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 = 
            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
bootstrap+fileinput外掛實現可預覽上傳照片功能

     
             圖片.png實際專案中運用：圖片.png功能：實現上傳圖片，更改上傳圖片，移除圖片的功能<!DOCTYPE html><html>    <head>        <metacharset="UTF-8">        <tit 



  
 

    


    
    
H5實現多圖片預覽上傳，可點選可拖拽控制元件介紹

     
 
								
								            
						
                
在做圖片上傳時發現一個蠻好用的控制元件，支援多張圖片同時上傳，可以點選選擇圖片，也可以將圖片拖拽到上傳框直接上傳，方便，好用，介面也簡單，基本可以直接放到專案裡使用。
先看看他的樣式：


選擇圖片後 



  
 

    


    
    
.net mvc使用FlexPaper外掛實現線上預覽PDF,EXCEL,WORD的方法

     
   
FlexPaper外掛可以實現在瀏覽器中線上預覽pdf，word，excel等。 
在網上看到很多關於這個外掛實現預覽的技術，但是很難做到word和excel線上預覽。 
pdf很好實現。 
  
首先下載相關的外掛資訊，這裡不多說了。 
  
其中這個外掛主要需要配合As 



  
 

    


    
    
bootstrap圖片剪裁預覽上傳

     
 
                
效果圖預覽：

用到的圖片剪裁外掛：http://www.htmleaf.com/jQuery/Image-Effects/201504211716.html
前段ui框架：bootstrap3
java後端框架：spring + mybstis
說明：如果前端ui用的不是 



  
 

    


    
    
jquery.media.js 外掛實現線上預覽PDF檔案

     
 
								
								            
						
                
 程式碼：
<!DOCTYPE html>  
<html>  
<head>
<meta http-equiv="Content-Type" content 



  
 

    


    
    
bootstrap多檔案預覽上傳

     
 
                
效果圖展示：




















使用環境：
檔案上傳外掛：bootstrap-fileinput,文件地址 http://plugins.krajee.com/file-input#pre-requisites
前段ui框架：bootstrap3
ja 



  
 

    


    
    
input預覽上傳圖片

     
 fun   null   files   defined   obj   cnblogs   div   object   style   html代碼

<input type="file" name="file"  id="file" >
<img src=""  id="img"> 



  
 

    


    
    
js預覽上傳圖片

     
 輸出   rip   BE   hang   gin   filter   gid   onchange   QQ   
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="te 



  
 

    


    
    
SSM中使用Kindeditor外掛實現圖片的批量上傳與回顯

     
  
 
  
  
 圖片上傳的方式：  1.上傳到資料庫中的Blob型別，從資料庫中取出來並顯示。詳細見下面連結  http://blog.sina.com.cn/s/blog_5b0745e80102we31.html  2.上傳到伺服器的固定目錄下，在資料庫中僅儲存圖片的地址。詳細見下文 
  
 效果 



  
 

    


    
    
頁面預覽上傳檔案的內容

     
 
								
								            
						
                
功能介紹：
網站通常通過file型別的標籤進行檔案的上傳，檔案為客戶端任意位置（桌面、C盤、D盤……）的檔案。有時，需求需要在檔案上傳到伺服器之前，在頁面的某區域顯示檔案的內容。這在過去的技術中，是很 



  
 

    


    
    
多檔案預覽上傳基於Struts

     
  
 
  
  
 多檔案預覽上傳基於Struts 
 實現多檔案預覽，多檔案上傳，基於struts，使用jquery實現，邏輯簡單轉化為js等方便。
 
  
  頁面程式碼 
  
 <html>
<head>
<link href="../../css/style.css 



  
 

    


    
    
關於微信小程式 預覽上傳藍屏的問題

     
 
                我在使用微信小程式開發的時候，使用了wxparse這個外掛。每次使用都會發現，只要預覽就會藍屏，一開始以為是檔名shutdown造成的，結果發現改了名字還是不行。後來發現是這個表情包造成的。就是emojis這個資料夾。裡面全是表情包。在上傳的時候，可能這個表情包檔案太大了。導 



  
 

    


    
    
jQuery的uploadify外掛實現檔案跨域上傳

     
 
                
1、jQuery的uploadify外掛官網地址：

http://www.uploadify.com/documentation/
2、按照官網要求下載指定的js，css程式碼與swf檔案

<script src="uploadify/jquery.uploadi 



  
 

    


    
    
HTML5使用FileReader預覽上傳的圖片檔案

     
 
								
								            
							
							
							<!--html-->
<div class="form-group control-label">
            <div class="col-sm-2 co 



  
 

    


    
    
java socket 實現c/s檔案上傳下載功能+註冊登入

     
  
 
 使用JAVA SOCKET實現c/s結構的通訊程式，以實現客戶端向伺服器端的檔案的上傳以及伺服器端向客戶端的檔案的下載。 
  
 實現思路： 
 1、在伺服器端，建立SocketServer物件，監聽某一埠，有連線請求則開一個執行緒處理這一請求 
 2、在客戶端，根據伺服器的ip地址以及埠號，建立 



  
 

    


    
    
結合bootstrap fileinput外掛和Bootstrap-table表格外掛，實現檔案上傳、預覽、提交的匯入Excel資料操作流程

     
 1、bootstrap-fileinpu的簡單介紹
在前面的隨筆，我介紹了Bootstrap-table表格外掛的具體專案應用過程，本篇隨筆介紹另外一個Bootstrap FieInput外掛的使用，整合兩者可以實現我們常規的Web資料匯入操作，匯入資料操作過程包括有上傳檔案，預覽資料，選擇並提交記錄等一系 



  
 

    


    
    
基於bootstrap的上傳插件fileinput實現ajax異步上傳功能(支持多文件上傳預覽拖拽)

     
 允許   jquery   pac   locale   錯誤信息   部分   src   alt   date   首先需要導入一些js和css文件



?




1
2
3
4
5
6



<link href="__PUBLIC__/CSS/bootstrap.css" rel="exte 



  
 

    


    
    
web 圖片上傳實現本地預覽

     
 UNC   view   使用   區別   lec   F5   sed   邊界   urn   在說上傳之前先說說如何替換or美化瀏覽器自帶的簡陋上傳按鈕（自定義自己的上傳按鈕 如:img）:
  1.將自定義上傳按鈕上方添加 input file 框，實現input實現透明處理。
  2.對自定義 



  
 

    


    
    
用原生JS實現多張圖片上傳及預覽功能（相容IE8）

     
 最近需要做一個圖片上傳預覽的功能（相容IE8-11、chrome、firefox等瀏覽器），網上現有的檔案上傳元件（如webuploader）總是會遇到一些相容性問題。於是我參考了一些博文（連結找不到了⊙o⊙…），自己用原生JS寫了一個支援多張圖片上傳預覽功能的Demo 
先通過最終效果看一下功能： 
 
  



  
 

    


    
    
input file 方式上傳圖片並實現實時預覽

     
 
                用普通的html的 <input type="file"/> 標籤是不能實現實時預覽功能的，獲取表單的值可以得到圖片所在路徑：C:\fakepath\test.png，如果將它直接賦值給img標籤的href屬性，會報錯：Not allowed to load lo