BootStrap file upload style is super nice [continuously updated]

BootStrap file upload style is super nice [continuously updated]_javascript skills

WBOY

Release： 2016-05-16 09:00:13

Original

3942 people have browsed it

1. use bootstrap directly and use simple js control

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

very simple, the code is as follows:

<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>

Copy after login

the effect is as follows:

no other js or css is required, just introduce bootstrap and jquery

in fact, this is spliced together, and then js controls the display of the file name.

the effect is as follows:

two bootstrap-filestyle

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

note: this style can only use bootstrap2 css. the css version of bootstrap3 is incompatible! ! (damn it, i’ve been testing for a long time just because of this.. fuck

the effect is as follows:

three bootstrap-file-input

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>

Copy after login

introduced bootstrap.file-input.js but there is a slight problem with the direct introduction, saying that bootstrapfileinput cannot be found this method. so i changed a little 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); 
};

Copy after login

okay, it’s time to see the effect~~

four fine uploader

http://fineuploader.com/demos.html

there is a fee for downloading from the official website. . i downloaded one from github.

download link

after downloading and decompressing, it looks like this:

<!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>

Copy after login

you can find js and css by searching in the folder, but there is all.fineuploader-4.3.1.min.js, which i copied from the official website using chrome to review elements. . it can be used after testing

pay attention to the template in the intermediate code

without this paragraph, the console will report an error: