Bootstrap 3 : 图片上传预览 image upload preview


<link href="//" rel="stylesheet">
<script type='text/javascript' src="//"></script>
<script type='text/javascript' src="//"></script>


方法一: Input File – Popover Preview Image  DEMO


<div class="container">
    <div class="row">    
        <div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">  
            <!-- image-preview-filename input [CUT FROM HERE]-->
            <div class="input-group image-preview">
                <input type="text" class="form-control image-preview-filename" disabled="disabled"> <!-- don't give a name === doesn't send on POST/GET -->
                <span class="input-group-btn">
                    <!-- image-preview-clear button -->
                    <button type="button" class="btn btn-default image-preview-clear" style="display:none;">
                        <span class="glyphicon glyphicon-remove"></span> Clear
                    <!-- image-preview-input -->
                    <div class="btn btn-default image-preview-input">
                        <span class="glyphicon glyphicon-folder-open"></span>
                        <span class="image-preview-input-title">Browse</span>
                        <input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview"/> <!-- rename it -->
            </div><!-- /input-group image-preview [TO HERE]--> 


.image-preview-input {
    position: relative;
	overflow: hidden;
	margin: 0px;    
    color: #333;
    background-color: #fff;
    border-color: #ccc;    
.image-preview-input input[type=file] {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
	font-size: 20px;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0);
.image-preview-input-title {


$(document).on('click', '#close-preview', function(){ 
    // Hover befor close the preview
        function () {
         function () {

$(function() {
    // Create the close button
    var closebtn = $('<button/>', {
        text: 'x',
        id: 'close-preview',
        style: 'font-size: initial;',
    closebtn.attr("class","close pull-right");
    // Set the popover default content
        title: "<strong>Preview</strong>"+$(closebtn)[0].outerHTML,
        content: "There's no image",
    // Clear event
        $('.image-preview-input input:file').val("");
    // Create the preview image
    $(".image-preview-input input:file").change(function (){     
        var img = $('<img/>', {
            id: 'dynamic',
        var file = this.files[0];
        var reader = new FileReader();
        // Set preview image into the popover data-content
        reader.onload = function (e) {


方法二:Beautiful jQuery File Upload Plugin with Bootstrap  下载



方法三: Image Upload Preview Plugin With jQuery And Bootstrap – img-upload  下载


How to use it:

1. Load Bootstrap’s stylesheet and the img-upload.css in the head section of the document.

<link rel="stylesheet" href="bootstrap.min.css">
<link href="css/bootstrap-imgupload.css" rel="stylesheet">

2. Build the html structure for the image uploader ui with a preview area.

  <div class="form-group">
    <div class="imgupload panel panel-default">
      <div class="panel-heading clearfix">
        <h3 class="panel-title pull-left">Upload image</h3>
        <div class="btn-group pull-right">
          <button type="button" class="btn btn-default active">File</button>
          <button type="button" class="btn btn-default">URL</button>
      <div class="file-tab panel-body">
          <button type="button" class="btn btn-default btn-file">
          <input type="file" name="file-input">
          <button type="button" class="btn btn-default">Remove</button>
      <div class="url-tab panel-body">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Image URL">
          <div class="input-group-btn">
            <button type="button" class="btn btn-default">Submit</button>
        <input type="hidden" name="url-input">

3. Load both jQuery library and the jQuery img-upload plugin’s script at the end of the document.

<script src="//"></script>
<script src="js/bootstrap-imgupload.js"></script>

4. Call the imgUpload() function to active the plugin.


5. Available plugin options.

  allowedFormats: [ "jpg", "jpeg", "png", "gif" ],
  previewWidth: 250,
  previewHeight: 250,
  maxFileSizeKb: 2048


方法四: bootstrap-fileinput   DEMO  下载

An enhanced HTML 5 file input for Bootstrap 3.x with file preview, multiple selection, and more features.

Selection_028 Selection_029


Step 1: Load the following assets in your header.

<link href="" rel="stylesheet">
<link href="path/to/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="//"></script>
<!-- canvas-to-blob.min.js is only needed if you wish to resize images before upload.
     This must be loaded before fileinput.min.js -->
<script src="path/to/js/plugins/canvas-to-blob.min.js" type="text/javascript"></script>
<script src="path/to/js/fileinput.min.js"></script>
<!-- bootstrap.js below is only needed if you wish to the feature of viewing details
     of text file preview via modal dialog -->
<script src="" type="text/javascript"></script>
<!-- optionally if you need translation for your language then include 
    locale file as mentioned below -->
<script src="path/to/js/fileinput_locale_<lang>.js"></script>

If you noticed, you need to load the jquery.min.js and bootstrap.min.css in addition to the fileinput.min.css and fileinput.min.js. The locale file fileinput_locale_<lang>.js can be optionally included for translating for your language if needed.

NOTE: The canvas-to-blob.min.js file is the source for the JavaScript-Canvas-to-Blob plugin by blueimp. It is required to be loaded before fileinput.js if you wish to use the image resize feature of the bootstrap-fileinput plugin. For ease of access, the plugin source for JavaScript-Canvas-to-Blob is included in the js/plugins folder of this project repository.

Step 2: Initialize the plugin on your page. For example,

// initialize with defaults

// with plugin options
$("#input-id").fileinput({'showUpload':false, 'previewFileType':'any'});

The #input-id is the identifier for the input (e.g. type = file) on your page, which is hidden automatically by the plugin.

Alternatively, you can directly call the plugin options by setting data attributes to your input field.

<input id="input-id" type="file" class="file" data-preview-file-type="text" >



Bootstrap 3 添加外部页面到弹出窗口Bootstrap 3 with remote Modal

Bootstrap3 价格滑动块 price range bootstrap-slider

Bootstrap 3: 图标转换事件 Change icons when toggle

jQuery 缩放 旋转 裁剪图片 Image Cropper


本文: Bootstrap 3 : 图片上传预览 image upload preview



Add a Comment

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.