网上搜搜不一大把吗?
这个JS版的,你可以看看
http://blog.csdn.net/liushuijinger/article/details/8687684

解决方案 »

  1.   


    <!DOCTYPE html>
    <html>
        <head>
            <title>TODO supply a title</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
            <script type="text/javascript">
                function getBase64Image(obj) {
                    var loader = $.Deferred(),
                            fReader = new FileReader();
                    fReader.onload = function (e) {
                        loader.resolve(e.target.result);
                    };
                    fReader.onerror = loader.reject;
                    fReader.onprogress = loader.notify;
                    fReader.readAsDataURL(obj.files[0]);
                    $.when(loader.promise()).done(function (dataUrl) {
                        $('#img-show').html('<img src="' + dataUrl + '">');
                    });
                }
            </script>
        </head>
        <body>
            <input type="file" id="image_input" onchange="getBase64Image(this);" accept="image/*"/>
            <div contenteditable id="img-show"></div>
        </body>
    </html>