web-dev-qa-db-ja.com

Twitter Bootstrapプレビューとプログレスバー付きの画像アップロード

Twitter Bootstrapを使用して、プレビューとプログレスバーを含む単一の画像をアップロードする方法を教えてください。現在のところ、画像を保存するまで、画像をアップロードするプレビューまたはプログレスバーを確認できません。

imagefile-uploadtwitter-bootstrappreview
19
azeem

BootstrapのJasnyのフォークは、あなたが近づくことを可能にします。 documentation を参照してください。

コード：

<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>

残念ながら、進行状況バーはないようです。

25
Paul Oliver

ファイルとURLの両方から画像をプレビューするjQueryプラグインを作成しました。ただし、進行状況バーはありません（まだ）。

コード： https://github.com/egonolieux/bootstrap-imageupload

デモ： https://egonolieux.github.io/bootstrap-imageupload

4
Egon Olieux

私は受け入れられた答えを試しましたが、それを機能させることができませんでした。

http://plugins.krajee.com/file-input にプラグインがあります。 Bootstrap 3およびJQuery 2.1が必要です

いくつかのデモを見ることができます here およびソースを取得 here または here 。ソースには、/examples/フォルダーにAJAXアップロードスキーム、ドラッグアンドドロップなど）の他の例もあります。Jensyプラグインよりもはるかに汎用性があります。

次のコードは、私のWebサイトで使用しているものです。 file_path/kartik-v-bootstrap-fileinput-51ddb7c/は、マシン上の抽出されたソースコードフォルダーであることに注意してください。

<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>

使用時に少なくともx枚の写真がアップロードされるようにする場合は、data-min-file-count="x"を設定できます。私は個人的にsource/js/fileinput.jsを編集し、previewCache行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"}
    };
1
Abhishek Divekar

これにより、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
Hanny Setiawan