<!doctype html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"> <meta name="description" content="Convert file to base64 encoded string"> <meta name="author" content="Pon Cheol Ku (@bbonkr)"> <title>Convert file to base64 encoded string</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="https://cdn.jsdelivr.net/bootbox/4.4.0/bootbox.min.js"></script> <style>
.container{
max-width:600px;
}
.top{
margin-top:150px;
}
.item {
margin-top: 10px;
background: #F5F5F5;
padding: 20px;
-ms-border-radius: 10px;
-o-border-radius:10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.remove {
opacity: 0.5;
}
.vertical-middle {
display: inline-block;
vertical-align: middle;
float: none;
}
textarea {
width: 100%;
margin: 2px 0px;
height: 120px;
font-family: Courier;
border: none;
background: whitesmoke;
}
/* #results {
position: relative;
margin: 50px;
}*/
#dropzone {
/*position: absolute;
top: 0;
left: 0;*/
/*min-width: 400px;*/
min-height: 300px;
background-color:whitesmoke;
width:100%;
height:100%;
border-style:dashed;
border-width: 2px;
-ms-border-radius: 10px;
-o-border-radius:10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#dropzone.hover {
opacity: 0.5;
background: lightblue;
z-index: 100;
}
.file {
width:100%;
}
</style> </head> <body> <div class="container top"> <div class="page-header"> <h1>Convert file to base64 encoded string</h1> <h2 class="bg-dander text-danger"> <noscript> Please Javascript enable.
</noscript> </h2> </div> <div id="dropzone" class="row"> <div class="text-center horizontal-middle"> <p>Drop files here</p> </div> <input type="file" id="file" class="form-control file" multiple /> </div> <div id="results" class="row"> </div> </div> <script>
$(document).ready(function(){
if (typeof window.FileReader === 'undefined'){
bootbox.alert('File API & FileReader not supported');
}
else{
$('#file').on('change', function(e){
e.preventDefault();
var files = [].slice.call(e.originalEvent.target.files);
$.each(files, function(index, item){
var reader = new FileReader();
reader.onload = function(event) {
fileLoaded(item.name, event.target.result);
};
reader.readAsDataURL(item);
});
$(this).removeClass('hover');
$(this).val('');
});
$('#dropzone').on('dragover', function(e){
e.preventDefault();
$(this).addClass('hover');
});
$('#dropzone').on('dragleave', function(e){
e.preventDefault();
$(this).removeClass('hover');
});
$('#dropzone').on('dragend', function(e){
e.preventDefault();
$(this).removeClass('hover');
});
$('#dropzone').on('drop', function(e){
e.preventDefault();
var files = [].slice.call(e.originalEvent.dataTransfer.files);
$.each(files, function(index, item){
var fileReader = new FileReader();
fileReader.onload = function(ev) {
fileLoaded(item.name, ev.target.result);
};
fileReader.readAsDataURL(item);
});
$(this).removeClass('hover');
});
if (typeof window.FileReader === 'undefined'){
bootbox.alert('File API & FileReader not supported')
}
else {
if(localStorage){
for(var filename in localStorage){
if(filename.indexOf("base64-") === 0){
fileLoaded(filename.replace("base64-",""), localStorage.getItem(filename));
}
}
}
}
}
});
function fileLoaded(filename, dataUri) {
//var divId = 'result' + new Date().getTime() + filename ;
var $results = $('#results');
var $name = $('<div></div>').addClass('text-left').text(filename);;
var $div = $('<div></div>').addClass('row item');
var $removeDiv = $('<div></div>').addClass('text-right');
var $remove = $('<button></button>').addClass('btn btn-default remove').text('x');
$remove.on('click', function(e){
if(localStorage) localStorage.removeItem('base64-' + filename);
$div.remove();
});
$removeDiv.append($remove);
$div.append($removeDiv);
$div.append($name);
if(/^data:image/.test(dataUri)) {
var $imgDiv = $('<div></div>');
var $img = $('<img />');
$img.attr('src', dataUri).css({'max-width': '100px', 'height-width':'100px'});
$imgDiv.append($img);
$div.append($imgDiv);
}
var $textarea = $('<textarea></textarea>');
$textarea.on('click', function(e){
$(this).select();
});
var $download = $('<a></a>').addClass('btn btn-primary').attr('href',dataUri).text('Download');
$textarea.val(dataUri);
$div.append($textarea);
$div.append($download);
$results.append($div);
if(localStorage) localStorage.setItem('base64-' + filename, dataUri);
}
</script> </body> </html>
评论已关闭！
