Làm cách nào tôi có thể sử dụng Twitter Bootstrap để tải lên một hình ảnh với thanh xem trước và tiến trình. Như hiện tại, cho đến khi tôi lưu hình ảnh, tôi không thể thấy bất kỳ thanh xem trước hoặc thanh tiến trình nào để tải hình ảnh lên.Tải lên Twitter Bootstrap hình ảnh với thanh xem trước và tiến trình
Dĩa của Bootstrap của Jasny cho phép bạn đến gần. Xem documentation.
Mã:
<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>Nó dường như không có một thanh tiến trình, không may.
văn bản này, để tải lên trực tiếp sử dụng 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...
Tôi đã thử các câu trả lời được chấp nhận, nhưng không thể làm cho nó làm việc.
Có plugin tại http://plugins.krajee.com/file-input. Nó đòi hỏi Bootstrap 3 và JQuery 2.1
Bạn có thể thấy một số bản trình diễn here và lấy nguồn here hoặc here. Nguồn cũng có các ví dụ khác về các lược đồ tải lên AJAX, kéo và thả, v.v. trong thư mục /examples/ của nó. Nó linh hoạt hơn nhiều so với plugin Jensy.
Mã sau đây là những gì tôi sử dụng trên trang web của mình. Lưu ý rằng file_path/kartik-v-bootstrap-fileinput-51ddb7c/ là nguồn gốc chiết xuất đang thư mục trên máy tính của bạn:
<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>
Bạn có thể đặt data-min-file-count="x" nếu bạn muốn chắc chắn rằng các cập nhật sử dụng ít nhất x ảnh. Tôi cũng đích thân thích để chỉnh sửa source/js/fileinput.js và thiết lập sau đây trong previewCache dòng 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"}
};
tôi đã thực hiện một plugin jQuery mà xem trước hình ảnh từ cả hai tập tin và URL. Tuy nhiên, không có thanh tiến trình (chưa).
Hi nhờ ... Tôi có thể tải lên hình ảnh/file ngay sau khi tôi chọn? – azeem
Làm cách nào để tải hình ảnh lên ajax? –
404 trang không tìm thấy trong liên kết. – Clayton