twitter-bootstrap 带有预览和进度条的 Twitter Bootstrap 图像上传
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13666243/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap Image Upload with Preview and Progress Bar
提问by azeem
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.
我如何使用 Twitter Bootstrap 上传带有预览和进度条的单个图像。目前，在我保存图像之前，我看不到任何预览或进度条来上传图像。
回答by Paul Oliver
Jasny's fork of Bootstrap allows you to do come close. See documentation.
Jasny 的 Bootstrap 分支允许你接近。请参阅文档。
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.
不幸的是，它似乎没有进度条。
回答by Egon Olieux
I made a jQuery plugin which previews images from both file and URL. However, there's no progress bar (yet).
我制作了一个 jQuery 插件，它可以从文件和 URL 中预览图像。但是，还没有进度条（还）。
Code: https://github.com/egonolieux/bootstrap-imageupload
代码：https: //github.com/egonolieux/bootstrap-imageupload
回答by Abhishek Divekar
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
http://plugins.krajee.com/file-input 上有一个插件。它需要 Bootstrap 3 和 JQuery 2.1
You can see some demos hereand get the source hereor 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.
您可以在此处查看一些演示并在此处或此处获取源代码。该源码在其/examples/文件夹中还有其他AJAX上传方案、拖放等示例。它比 Jensy 插件更通用。
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:
以下代码是我在我的网站上使用的代码。请注意，这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>
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.jsand set the following in previewCacheline 454:
您可以设置data-min-file-count="x"是否要确保用户至少上传 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"}
};
回答by Hanny Setiawan
Hereby, to upload directly using HTML Blob & FormData :
在此，使用 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...
