将文件转换为base64编码的字符串 上传结果显图 可复制编码

chenyajun  2022-10-16 13:57:57  阅读 1366 次 评论 0 条
<!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>


本文地址:http://chenyajun.net/index.php/post/104.html
版权声明:本文为原创文章,版权归 chenyajun 所有,欢迎分享本文,转载请保留出处!

评论已关闭!