带有预览和进度条的 Twitter Bootstrap 图像上传答案

【问题标题】：Twitter Bootstrap Image Upload with Preview and Progress Bar带有预览和进度条的 Twitter Bootstrap 图像上传
【发布时间】：2012-12-02 03:51:50
【问题描述】：

如何使用 Twitter Bootstrap 上传带有预览和进度条的单个图像。目前，在我保存图像之前，我看不到上传图像的任何预览或进度条。

【问题讨论】：

标签： image file-upload twitter-bootstrap preview

【解决方案1】：

Jasny 的 Bootstrap 分支可以让你接近。见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>

不幸的是，它似乎没有进度条。

【讨论】：

如何使用 ajax 上传图片？
链接中未找到 404 页面。

【解决方案2】：

我制作了一个 jQuery 插件，它可以从文件和 URL 中预览图像。但是，还没有进度条。

代码：https://github.com/egonolieux/bootstrap-imageupload

演示：https://egonolieux.github.io/bootstrap-imageupload

【讨论】：

【解决方案3】：

我尝试了接受的答案，但无法正常工作。

http://plugins.krajee.com/file-input 有一个插件。它需要 Bootstrap 3 和 JQuery 2.1

您可以查看一些演示 here 并获取源代码 here 或 here。该源在其/examples/ 文件夹中还有其他AJAX 上传方案、拖放等示例。它比 Jensy 插件更通用。

以下代码是我在我的网站上使用的。请注意，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"}
    };

【讨论】：

【解决方案4】：

特此，使用 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...

【讨论】：