cari

Rumah  >  Artikel  >  hujung hadapan web  >  Gaya muat naik fail BootStrap sangat bagus [kemas kini secara berterusan]_kemahiran javascript

Gaya muat naik fail BootStrap sangat bagus [kemas kini secara berterusan]_kemahiran javascript

WBOY
WBOYasal
2016-05-16 09:00:133886semak imbas

1 Gunakan bootstrap secara terus dan gunakan kawalan js mudah

http://duckranger.com/2012/06/pretty-file-input-field-in-bootstrap/

Sangat mudah, kodnya adalah seperti berikut: 

<input id="lefile" type="file" style="display:none"> 
<div class="input-append"> 
<input id="photoCover" class="input-large" type="text" style="height:30px;"> 
<a class="btn" onclick="$('input[id=lefile]').click();">Browse</a> 
</div> 
<script type="text/javascript"> 
$('input[id=lefile]').change(function() { 
$('#photoCover').val($(this).val()); 
}); 
</script>

Kesannya adalah seperti berikut:


Tidak perlu sebarang js dan css lain, cuma perkenalkan bootstrap dan jQuery

Malah, ini disambungkan bersama, dan kemudian js mengawal paparan nama fail.

Kesannya adalah seperti berikut:

dua bootstrap-filestyle

http://markusslima.github.io/bootstrap-filestyle/

Nota: Gaya ini hanya boleh menggunakan bootstrap2 css dan bootstrap3 css tidak serasi! ! (Sial, saya telah mengujinya untuk masa yang lama hanya kerana ini.. Persetan

Kesannya adalah seperti berikut:

Tiga input fail bootstrap

http://www.gregpike.net/demos/bootstrap-file-input/demo.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>bootstrap.file-input</title> 
<link href="css/bootstrap.min.css" rel="stylesheet" /> 
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script> 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
<script type="text/javascript" src="js/bootstrap.file-input.js"></script> 
</head> 
<body> 
<!-- Change the wording using a title tag --> 
<input type="file" title="Search for a file to add 1" class="btn-primary"> 
<br> 
<br> 
<input type="file" title="Search for a file to add 2" class="btn btn-primary"> 
<br> 
<br> 
<input type="file" title="Search for a file to add 3" class="btn-primary"> 
<br> 
<br> 
<input type="file" title="Search for a file to add 4" class="btn-primary"> 
<br> 
<br> 
<br> 
<br> 
<br> 
Disable the styling: 
<!-- Disable the styling --> 
<input type="file" data-bfi-disabled> 
<script type="text/javascript"> 
$('input[type=file]').bootstrapFileInput(); 
</script> 
</body> 
</html>

Memperkenalkan bootstrap.file-input.js, tetapi terdapat sedikit masalah dengan pengenalan langsung, mengatakan bahawa kaedah bootstrapFileInput tidak ditemui. Jadi saya menukar sedikit js: 

/* 
Bootstrap - File Input 
====================== 
This is meant to convert all file input tags into a set of elements that displays consistently in all browsers. 
Converts all 
<input type="file"> 
into Bootstrap buttons 
<a class="btn">Browse</a> 
*/ 
$.fn.bootstrapFileInput = function() { 
这里我直接用这个方法，把前面一行删掉就可以了 
this.each(function(i,elem){ 
.........中间省略 
// Add the styles before the first stylesheet 
// This ensures they can be easily overridden with developer styles 
var cssHtml = '<style>'+ 
'.file-input-wrapper { overflow: hidden; position: relative; cursor: pointer; z-index: 1; }'+ 
'.file-input-wrapper input[type=file], .file-input-wrapper input[type=file]:focus, .file-input-wrapper input[type=file]:hover { position: absolute; top: 0; left: 0; cursor: pointer; opacity: 0; filter: alpha(opacity=0); z-index: 99; outline: 0; }'+ 
'.file-input-name { margin-left: 8px; }'+ 
'</style>'; 
$('link[rel=stylesheet]').eq(0).before(cssHtml); 
};

Baiklah, sudah tiba masanya untuk melihat hasilnya~~


Empat Pemuat Naik Baik

http://fineuploader.com/demos.html

Terdapat bayaran untuk memuat turun dari laman web rasmi. . Saya memuat turun satu daripada github.

Pautan muat turun

Selepas memuat turun dan nyahmampat, ia kelihatan seperti ini: 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>bootstrap.file-input</title> 
<link href="css/bootstrap.min.css" rel="stylesheet" /> 
<link href="css/fineuploader.css" rel="stylesheet" /> 
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script> 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
<script type="text/javascript" src="js/all.fineuploader-4.3.1.min.js"></script> 
</head> 
<body> 
<br> 
<div id="manual-fine-uploader"></div> 
<div id="triggerUpload" class="btn btn-primary" style="margin-top: 10px;"> 
<i class="icon-upload icon-white"></i> Upload now 
</div> 
<script> 
$(document).ready(function() { 
var manualuploader = $('#manual-fine-uploader').fineUploader({ 
request: { 
endpoint: 'server/handleUploads' 
}, 
autoUpload: false, 
text: { 
uploadButton: '<i class="icon-plus icon-white"></i> Select Files' 
} 
}); 
$('#triggerUpload').click(function() { 
manualuploader.fineUploader('uploadStoredFiles'); 
}); 
}); 
</script> 
<script> 
$(document).ready(function () { 
$('#fine-uploader').fineUploader({ 
request: { 
endpoint: 'server/handleUploads' 
} 
}); 
}); 
</script> 
<!-- Fine Uploader CSS 
====================================================================== --> 
<!-- Fine Uploader DOM Element 
====================================================================== --> 
<div id="fine-uploader"></div> 
<!-- Fine Uploader template 
====================================================================== --> 
<script type="text/template" id="qq-template"> 
<div class="qq-uploader-selector qq-uploader"> 
<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone> 
<span>Drop files here to upload</span> 
</div> 
<div class="qq-upload-button-selector qq-upload-button"> 
<div>Upload a file</div> 
</div> 
<span class="qq-drop-processing-selector qq-drop-processing"> 
<span>Processing dropped files...</span> 
<span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span> 
</span> 
<ul class="qq-upload-list-selector qq-upload-list"> 
<li> 
<div class="qq-progress-bar-container-selector"> 
<div class="qq-progress-bar-selector qq-progress-bar"></div> 
</div> 
<span class="qq-upload-spinner-selector qq-upload-spinner"></span> 
<span class="qq-edit-filename-icon-selector qq-edit-filename-icon"></span> 
<span class="qq-upload-file-selector qq-upload-file"></span> 
<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text"> 
<span class="qq-upload-size-selector qq-upload-size"></span> 
<a class="qq-upload-cancel-selector qq-upload-cancel" href="#">Cancel</a> 
<a class="qq-upload-retry-selector qq-upload-retry" href="#">Retry</a> 
<a class="qq-upload-delete-selector qq-upload-delete" href="#">Delete</a> 
<span class="qq-upload-status-text-selector qq-upload-status-text"></span> 
</li> 
</ul> 
</div> 
</script> 
</body> 
</html>

Anda boleh mencari js dan css dengan mencari dalam folder, tetapi terdapat all.fineuploader-4.3.1.min.js, yang saya salin daripada tapak web rasmi menggunakan chrome untuk menyemak elemen. . Ia boleh digunakan selepas ujian

Beri perhatian kepada Templat

dalam kod perantaraan

Jika tiada perenggan ini, konsol akan melaporkan ralat:

Kemudian saya mendapati sebab:

Seperti yang anda boleh baca, anda mesti mempunyai fail templat sebelum ia boleh dijalankan.

Kesannya seperti berikut: (gambar tanpa css agak hodoh)

Kandungan di atas adalah berkaitan dengan gaya muat naik fail BootStrap yang diperkenalkan oleh editor saya harap ia akan membantu semua orang!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Analisis ringkas tentang masalah pengikatan data dalam control_jquery pilih BootstripArtikel seterusnya：Analisis ringkas tentang masalah pengikatan data dalam control_jquery pilih Bootstrip

Artikel berkaitan

Lihat lagi