我如何使用 Twitter Bootstrap 上传带有预览和进度条的单个图像。目前，在我保存图像之前，我看不到上传图像的任何预览或进度条。
问问题
79355 次
4 回答
25
Jasny 的 Bootstrap 分支可以让你接近。请参阅文档。
编码：
<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>不幸的是，它似乎没有进度条。
于 2012-12-02T03:57:12.033 回答
4
我制作了一个 jQuery 插件，它可以从文件和 URL 中预览图像。但是，没有进度条（还）。
于 2016-08-05T21:56:23.033 回答
1
我尝试了接受的答案，但无法使其正常工作。
在http://plugins.krajee.com/file-input有一个插件。它需要 Bootstrap 3 和 JQuery 2.1
您可以在此处查看一些演示并在此处或此处获取源代码。/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>
您可以设置data-min-file-count="x"是否要确保用户上传至少 x 张照片。我个人也喜欢在第 454 行编辑source/js/fileinput.js和设置以下内容：previewCache
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"}
};
于 2016-05-16T05:58:38.880 回答
0
特此，使用 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...
于 2015-10-24T04:18:08.273 回答