Twitter Bootstrap Image Upload with Preview and Pr

2019-03-10 03:22发布

站内问答 / 后端开发
404 4 2

How can i use Twitter Bootstrap to upload a single image with preview and progress bar. As currently, Until I save the image, I can not see what any preview or progress bar to upload the image.

4条回答
Evening l夕情丶
2楼-- · 2019-03-10 03:49

I made a jQuery plugin which previews images from both file and URL. However, there's no progress bar (yet).

Code: https://github.com/egonolieux/bootstrap-imageupload

Demo: https://egonolieux.github.io/bootstrap-imageupload

查看更多
0人赞 添加讨论(0) 举报
太酷不给撩
3楼-- · 2019-03-10 03:52

Jasny's fork of Bootstrap allows you to do come close. See documentation.

The code:

<div class="fileupload fileupload-new" data-provides="fileupload">
  <div class="fileupload-preview thumbnail" style="width: 200px; height: 150px;"></div>
  <div>
    <span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" /></span>
    <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
  </div>
</div>

It doesn't seem to have a progress bar, unfortunately.

查看更多
0人赞 添加讨论(0) 举报
【Aperson】
4楼-- · 2019-03-10 03:54

Hereby, to upload directly using HTML Blob & FormData :

// Now, let's do the upload thingy for our beloved image(s)...
//Bulk Uploading, mannn....

$('.btn-upload').on('click', function (evt) {
    var xhr = new XMLHttpRequest();
    var fd = new FormData();
    fd.append("file", document.getElementById('(your beloved id/class html element)').files[0]);
    xhr.open("POST", "/(your beloved id/class html element)/", true);
    xhr.send(fd);
    xhr.addEventListener("load", function (event) {
        var parseData = $.parseJSON(event.target.response);

        location.reload();
    }, false);
});
// end of bulk uploading...
查看更多
0人赞 添加讨论(0) 举报
狗以群分
5楼-- · 2019-03-10 04:06

I tried the accepted answer, but couldn't get it to work.

There's a plugin at http://plugins.krajee.com/file-input. It requires Bootstrap 3 and JQuery 2.1

You can see some demos here and get the source here or here. The source also has other examples of AJAX uploading schemes, drag and drop, etc, in its /examples/ folder. It's much more versatile than the Jensy plugin.

The following code is what I use on my websites. Note that file_path/kartik-v-bootstrap-fileinput-51ddb7c/ is the extracted source code folder on your machine:

<html>
<head>
  <!-- Start of Karthik upload plugin -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
  <link href="file_path/kartik-v-bootstrap-fileinput-51ddb7c/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="file_path/kartik-v-bootstrap-fileinput-51ddb7c/js/fileinput.js" type="text/javascript"></script>
  <script src="file_path/kartik-v-bootstrap-fileinput-51ddb7c/js/fileinput_locale_fr.js" type="text/javascript"></script>
  <script src="file_path/kartik-v-bootstrap-fileinput-51ddb7c/js/fileinput_locale_es.js" type="text/javascript"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>
</head>

<body>
  <div class="form-group col-md-6 col-xs-12">
  <form>
    <h2>Upload a picture:</h2>
      <!-- Source: http://plugins.krajee.com/file-input -->
      <div class="container kv-main">
        <div enctype="multipart/form-data">
          <div class="row">
            <div class="form-group col-md-6 col-xs-12">
              <input id="file-0a" class="file" type="file" multiple data-min-file-count="1">
            </div>
          </div>
        </div>
      </div>
  </form>
  </div>
</body>
<script>
$('#file-fr').fileinput({
  language: 'fr',
  uploadUrl: '#',
  allowedFileExtensions: ['jpg', 'png', 'gif'],
});
$('#file-es').fileinput({
  language: 'es',
  uploadUrl: '#',
  allowedFileExtensions: ['jpg', 'png', 'gif'],
});
$("#file-0").fileinput({
  'allowedFileExtensions': ['jpg', 'png', 'gif'],
});
$("#file-1").fileinput({
  uploadUrl: '#', // you must set a valid URL here else you will get an error
  allowedFileExtensions: ['jpg', 'png', 'gif'],
  overwriteInitial: false,
  maxFileSize: 1000,
  maxFilesNum: 10,
  //allowedFileTypes: ['image', 'video', 'flash'],
  slugCallback: function(filename) {
    return filename.replace('(', '_').replace(']', '_');
  }
});
/*
$(".file").on('fileselect', function(event, n, l) {
    alert('File Selected. Name: ' + l + ', Num: ' + n);
});
*/
$("#file-3").fileinput({
  showUpload: false,
  showCaption: false,
  browseClass: "btn btn-primary btn-lg",
  fileType: "any",
  previewFileIcon: "<i class='glyphicon glyphicon-king'></i>"
});
$("#file-4").fileinput({
  uploadExtraData: {
    kvId: '10'
  }
});
$(".btn-warning").on('click', function() {
  if ($('#file-4').attr('disabled')) {
    $('#file-4').fileinput('enable');
  } else {
    $('#file-4').fileinput('disable');
  }
});
$(".btn-info").on('click', function() {
  $('#file-4').fileinput('refresh', {
    previewClass: 'bg-info'
  });
});
/*
$('#file-4').on('fileselectnone', function() {
    alert('Huh! You selected no files.');
});
$('#file-4').on('filebrowse', function() {
    alert('File browse clicked for #file-4');
});
*/
$(document).ready(function() {
  $("#test-upload").fileinput({
    'showPreview': false,
    'allowedFileExtensions': ['jpg', 'png', 'gif'],
    'elErrorContainer': '#errorBlock'
  });
  /*
  $("#test-upload").on('fileloaded', function(event, file, previewId, index) {
      alert('i = ' + index + ', id = ' + previewId + ', file = ' + file.name);
  });
  */
});
</script>

</html>

You can set data-min-file-count="x" if you want to make sure the use uploads at least x photos. I also personally like to edit source/js/fileinput.js and set the following in previewCache line 454: 

defaultPreviewSettings = {
        image: {width: "100%", height: "auto"},
        html: {width: "213px", height: "160px"},
        text: {width: "160px", height: "136px"},
        video: {width: "213px", height: "160px"},
        audio: {width: "213px", height: "80px"},
        flash: {width: "213px", height: "160px"},
        object: {width: "160px", height: "160px"},
        other: {width: "160px", height: "160px"}
    };
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(2)