将任意格式的文件用BASE64编码后嵌入到单文件静态网页里面，浏览器打开 jsp页面上怎么用javascript获取base64编码的...
\u5982\u4f55\u901a\u8fc7js\u5c06\u4e00base64\u7f16\u7801\u7684\u56fe\u7247\u663e\u793a\u5728html\u4e2d\u8981\u5b8c\u6210\u8fd9\u4e2a\u6548\u679c\uff0c\u6709\u4ee5\u4e0b\u51e0\u6b65\uff1a
\u5c06\u56fe\u7247\u8f6c\u5316\u4e3abase64\u7f16\u7801\u683c\u5f0f\u3002
\u8f93\u5165
var img = new Image();//\u521b\u5efaimg\u5bb9\u5668
img.src=\u2018\u8fd9\u513f\u5c31\u662f\u590d\u5236\u586b\u5199\u4e0a\u9762\u90a3\u4e00\u5927\u4e32\u2019\uff1b//\u7ed9img\u5bb9\u5668\u5f15\u5165base64\u7684\u56fe\u7247
3.\u6700\u540e\u4e00\u6b65\uff1a
document.body.appendChild(img)\uff1b//\u5c06img\u5bb9\u5668\u6dfb\u52a0\u5230html\u7684\u8282\u70b9\u4e2d\u5c31\u884c\u4e86\u3002
\u7b80\u4ecb\uff1a
JavaScript\u4e00\u79cd\u76f4\u8bd1\u5f0f\u811a\u672c\u8bed\u8a00\uff0c\u662f\u4e00\u79cd\u52a8\u6001\u7c7b\u578b\u3001\u5f31\u7c7b\u578b\u3001\u57fa\u4e8e\u539f\u578b\u7684\u8bed\u8a00\uff0c\u5185\u7f6e\u652f\u6301\u7c7b\u578b\u3002\u5b83\u7684\u89e3\u91ca\u5668\u88ab\u79f0\u4e3aJavaScript\u5f15\u64ce\uff0c\u4e3a\u6d4f\u89c8\u5668\u7684\u4e00\u90e8\u5206\uff0c\u5e7f\u6cdb\u7528\u4e8e\u5ba2\u6237\u7aef\u7684\u811a\u672c\u8bed\u8a00\uff0c\u6700\u65e9\u662f\u5728HTML\uff08\u6807\u51c6\u901a\u7528\u6807\u8bb0\u8bed\u8a00\u4e0b\u7684\u4e00\u4e2a\u5e94\u7528\uff09\u7f51\u9875\u4e0a\u4f7f\u7528\uff0c\u7528\u6765\u7ed9HTML\u7f51\u9875\u589e\u52a0\u52a8\u6001\u529f\u80fd\u3002
\u57281995\u5e74\u65f6\uff0c\u7531Netscape\u516c\u53f8\u7684Brendan Eich\uff0c\u5728\u7f51\u666f\u5bfc\u822a\u8005\u6d4f\u89c8\u5668\u4e0a\u9996\u6b21\u8bbe\u8ba1\u5b9e\u73b0\u800c\u6210\u3002\u56e0\u4e3aNetscape\u4e0eSun\u5408\u4f5c\uff0cNetscape\u7ba1\u7406\u5c42\u5e0c\u671b\u5b83\u5916\u89c2\u770b\u8d77\u6765\u50cfJava\uff0c\u56e0\u6b64\u53d6\u540d\u4e3aJavaScript\u3002\u4f46\u5b9e\u9645\u4e0a\u5b83\u7684\u8bed\u6cd5\u98ce\u683c\u4e0eSelf\u53caScheme\u8f83\u4e3a\u63a5\u8fd1\u3002
\u4e3a\u4e86\u53d6\u5f97\u6280\u672f\u4f18\u52bf\uff0c\u5fae\u8f6f\u63a8\u51fa\u4e86JScript\uff0cCEnvi\u63a8\u51faScriptEase\uff0c\u4e0eJavaScript\u540c\u6837\u53ef\u5728\u6d4f\u89c8\u5668\u4e0a\u8fd0\u884c\u3002\u4e3a\u4e86\u7edf\u4e00\u89c4\u683c\uff0c\u56e0\u4e3aJavaScript\u517c\u5bb9\u4e8eECMA\u6807\u51c6\uff0c\u56e0\u6b64\u4e5f\u79f0\u4e3aECMAScript\u3002
base64\u7b80\u5355\u5730\u8bf4\uff0c\u5b83\u628a\u4e00\u4e9b 8-bit \u6570\u636e\u7ffb\u8bd1\u6210\u6807\u51c6 ASCII \u5b57\u7b26\uff0c\u6211\u4eec\u628a\u56fe\u50cf\u6587\u4ef6\u7684\u5185\u5bb9\u76f4\u63a5\u5199\u5728\u4e86HTML \u6587\u4ef6\u4e2d\uff0c\u8fd9\u6837\u505a\u7684\u597d\u5904\u662f\uff0c\u8282\u7701\u4e86\u4e00\u4e2aHTTP \u8bf7\u6c42
Data URI scheme\u3002
Data URI scheme\u662f\u5728RFC2397\u4e2d\u5b9a\u4e49\u7684\uff0c\u76ee\u7684\u662f\u5c06\u4e00\u4e9b\u5c0f\u7684\u6570\u636e\uff0c\u76f4\u63a5\u5d4c\u5165\u5230\u7f51\u9875\u4e2d\uff0c\u4ece\u800c\u4e0d\u7528\u518d\u4ece\u5916\u90e8\u6587\u4ef6\u8f7d\u5165\u3002\u6bd4\u5982\u4e0a\u9762\u90a3\u4e32\u5b57\u7b26\uff0c\u5176\u5b9e\u662f\u4e00\u5f20\u5c0f\u56fe\u7247\uff0c\u5c06\u8fd9\u4e9b\u5b57\u7b26\u590d\u5236\u9ecf\u8d34\u5230\u706b\u72d0\u7684\u5730\u5740\u680f\u4e2d\u5e76\u8f6c\u5230\uff0c\u5c31\u80fd\u770b\u5230\u5b83\u4e86\uff0c\u4e00\u5f202*2\u7684\u767d\u8272gif\u56fe\u7247\u3002
\u5728\u4e0a\u9762\u7684Data URI\u4e2d\uff0cdata\u8868\u793a\u53d6\u5f97\u6570\u636e\u7684\u534f\u5b9a\u540d\u79f0\uff0cimage/gif\u662f\u6570\u636e\u7c7b\u578b\u540d\u79f0\uff0cbase64 \u662f\u6570\u636e\u7684\u7f16\u7801\u65b9\u6cd5\uff0c\u9017\u53f7\u540e\u9762\u5c31\u662f\u8fd9\u4e2aimage/gif\u6587\u4ef6base64\u7f16\u7801\u540e\u7684\u6570\u636e\u3002
\u76ee\u524d\uff0cData URI scheme\u652f\u6301\u7684\u7c7b\u578b\u6709\uff1a
data:,\u6587\u672c\u6570\u636e
data:text/plain,\u6587\u672c\u6570\u636e
data:text/html,HTML\u4ee3\u7801
data:text/html;base64,base64\u7f16\u7801\u7684HTML\u4ee3\u7801
data:text/css,CSS\u4ee3\u7801
data:text/css;base64,base64\u7f16\u7801\u7684CSS\u4ee3\u7801
data:text/javascript,Javascript\u4ee3\u7801
data:text/javascript;base64,base64\u7f16\u7801\u7684Javascript\u4ee3\u7801
data:image/gif;base64,base64\u7f16\u7801\u7684gif\u56fe\u7247\u6570\u636e
data:image/png;base64,base64\u7f16\u7801\u7684png\u56fe\u7247\u6570\u636e
data:image/jpeg;base64,base64\u7f16\u7801\u7684jpeg\u56fe\u7247\u6570\u636e
data:image/x-icon;base64,base64\u7f16\u7801\u7684icon\u56fe\u7247\u6570\u636e
base64\u7b80\u5355\u5730\u8bf4\uff0c\u5b83\u628a\u4e00\u4e9b 8-bit \u6570\u636e\u7ffb\u8bd1\u6210\u6807\u51c6 ASCII \u5b57\u7b26\uff0c\u7f51\u4e0a\u6709\u5f88\u591a\u514d\u8d39\u7684base64 \u7f16\u7801\u548c\u89e3\u7801\u7684\u5de5\u5177\uff0c\u5728PHP\u4e2d\u53ef\u4ee5\u7528\u51fd\u6570base64_encode() \u8fdb\u884c\u7f16\u7801\uff0c\u5982echo base64_encode(file_get_contents(\u2018images/log.gif\u201d'));
\u76ee\u524d\uff0cIE8\u3001Firfox\u3001Chrome\u3001Opera\u6d4f\u89c8\u5668\u90fd\u652f\u6301\u8fd9\u79cd\u5c0f\u6587\u4ef6\u5d4c\u5165\u3002
\u4e3e\u4e2a\u56fe\u7247\u7684\u4f8b\u5b50\uff1a
\u7f51\u9875\u4e2d\u4e00\u5f20\u56fe\u7247\u53ef\u4ee5\u8fd9\u6837\u663e\u793a\uff1a
\u4ee3\u7801\u5982\u4e0b:
\u4e5f\u53ef\u4ee5\u8fd9\u6837\u663e\u793a\uff1a
\u4ee3\u7801\u5982\u4e0b:
\u6211\u4eec\u628a\u56fe\u50cf\u6587\u4ef6\u7684\u5185\u5bb9\u76f4\u63a5\u5199\u5728\u4e86HTML \u6587\u4ef6\u4e2d\uff0c\u8fd9\u6837\u505a\u7684\u597d\u5904\u662f\uff0c\u8282\u7701\u4e86\u4e00\u4e2aHTTP \u8bf7\u6c42\u3002\u574f\u5904\u5462\uff0c\u5c31\u662f\u6d4f\u89c8\u5668\u4e0d\u4f1a\u7f13\u5b58\u8fd9\u79cd\u56fe\u50cf\u3002
但如果是任意文件，貌似无解，这里涉及同源策略问题，即一个（不受控）的网站，通过前端页面，通过js读取本地（非同源）任意文件，得到这个文件的内容。也就是说，你的要求其实可以看作，用任意网站，可以在未授权的情况下，读取你操作系统关键的配置文件，想想也是很不安全的事件对吧。这个功能应该需要浏览器插件授权支持。
============================================
不过我在网站上找到这个代码，以本地打开的方式运行是可以实现你要的功能的。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="在线Base64生成转换小工具，可以实现任意文件转Base64 Data-URI编码，文件往页面中一拖即可。" />
<meta name="keywords" content="base64, FileReader, readAsDataURL, 文件" />
<meta name="author" content="谢勇彬，XYB" />
<title>任意文件转base64-直接拖进来</title>
<style>
body { word-break: break-all; margin: 0 1em; min-height: 100vh; font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace; overflow: hidden;}
.empty::before{position: absolute; font-size: 50px; content: '任意文件\A拖到这里'; white-space: pre; left: 50%; top: 50%; transform: translate(-50%,-50%); color: gray;}
</style>
</head>
<body class="empty">
<script>
window.addEventListener("dragenter", function(event) { event.preventDefault(); }, false);
window.addEventListener("dragover", function(event) { event.preventDefault(); }, false);
window.addEventListener("drop", function(event) {
var reader = new FileReader();
reader.onload = function(e) {
document.body.insertAdjacentHTML("afterBegin", '<p>' + e.target.result + '</p>');
document.body.classList.remove('empty');
};
reader.readAsDataURL(event.dataTransfer.files[0]);
event.preventDefault();
}, false);
</script>
</body>
</html>
绛旓細浠涔堟槸Base64锛熸寜鐓FC2045鐨勫畾涔夛紝Base64琚畾涔変负锛欱ase64鍐呭浼犻佺紪鐮佽璁捐鐢ㄦ潵鎶婁换鎰搴忓垪鐨8浣嶅瓧鑺傛弿杩颁负涓绉嶄笉鏄撹浜虹洿鎺ヨ瘑鍒殑褰㈠紡銆傦紙The Base64 Content-Transfer-Encoding is designed to represent arbitrary sequences of octets in a form that need not be humanly readable.锛変负浠涔堣浣跨敤...
绛旓細4. RSA瀵嗙爜绠楁硶锛歊SA鏄竴绉嶉潪瀵圭О鍔犲瘑绠楁硶锛屽畠闇瑕佷竴瀵瑰叕閽ュ拰绉侀挜鏉ュ姞瀵嗗拰瑙ｅ瘑鏁版嵁銆俁SA绠楁硶鐨勭壒鐐规槸瀹夊叏鎬ч珮锛屽瘑閽ラ暱搴﹀彲浠ョ伒娲昏皟鏁达紝鐢ㄤ簬鏁板瓧璇佷功銆佸姞瀵嗛氫俊绛夐鍩熴備絾鏄敱浜庡姞瑙ｅ瘑閫熷害鎱紝涓嶉傚悎澶ч噺鏁版嵁鐨勫姞瀵嗗拰瑙ｅ瘑銆5. Base64缂栫爜锛欱ase64鏄竴绉嶇紪鐮佺畻娉曪紝鍙互灏嗕换鎰忕殑浜岃繘鍒舵暟鎹紪鐮佹垚绾枃鏈鏍煎紡锛...
绛旓細鎸夌収RFC2045鐨勫畾涔夛紝Base64琚畾涔変负锛欱ase64鍐呭浼犻佺紪鐮佽璁捐鐢ㄦ潵鎶婁换鎰搴忓垪鐨8浣嶅瓧鑺傛弿杩颁负涓绉嶄笉鏄撹浜虹洿鎺ヨ瘑鍒殑褰㈠紡銆傦紙The Base64 Content-Transfer-Encoding is designed to represent arbitrary sequences of octets in a form that need not be humanly readable.锛 涓轰粈涔堣浣跨敤Base64锛 鍦...
绛旓細浣嗘槸锛屾垜浠彲浠閫氳繃Base64缂栫爜鍚庣殑鐗瑰緛鏉ュ垽鏂ぇ姒傚垽鏂紙鍙兘璇垽锛夈侭ase64鏄竴绉灏嗕换鎰鏁版嵁涓诧紝杞崲鎴愬彲浠ョ敤 [A-Za-z0-9/+=] 杩64涓瓧绗︾粍鎴愮殑鍙瀛楃涓茬殑鏂规硶銆傚叾涓 鈥=鈥濆彧鑳藉嚭鐜板湪鏈熬锛屾渶澶2涓紝鏈灏0涓傚洜姝わ紝褰撲竴涓瓧绗︿覆姝ｅ垯鍖归厤 [A-Za-z0-9/+]+[=]{0,2} 鐨勯泦鍚堜腑鏃讹紝鍒...
绛旓細鏂规浜岋細濡傛灉 base64 杞崲鍓嶇殑澶у皬锛 灏卞ぇ浜 澶囨敞瀛楁鐨勪笂闄愪簡锛岄偅涔堝皾璇曚娇鐢ㄤ笅闈㈡暟鎹被鍨嬬殑涓绉嶏細OLE 瀵硅薄 Microsoft Access 琛ㄤ腑閾炬帴 锛圤LE/DDE 閾炬帴锛歄LE 瀵硅薄鍙婂叾 OLE 鏈嶅姟鍣ㄤ箣闂达紝鎴栧姩鎬佹暟鎹氦鎹 (DDE) 鐨勬簮鏂囨。涓庣洰鏍囨枃妗ｄ箣闂寸殑涓绉嶈繛鎺ャ傦級鎴栧祵鍏 锛堝祵鍏ワ細鐢ㄤ簬鎻掑叆鏉ヨ嚜鍏朵粬搴旂敤绋嬪簭鐨 OLE 瀵硅薄...
绛旓細灏嗘寚瀹氱殑 String锛堝畠灏嗕簩杩涘埗鏁版嵁缂栫爜涓 base 64 鏁板瓧锛夎浆鎹㈡垚绛夋晥鐨 8 浣嶆棤绗﹀彿鏁存暟鏁扮粍銆傝娉 public static byte[] FromBase64String(string s )鍙傛暟 s 绫诲瀷锛歋ystem..::.String String銆傝繑鍥炲 绫诲瀷锛歛rray<System..::.Byte>[]()[]绛夋晥浜 s 鐨 8 浣嶆棤绗﹀彿鏁存暟鏁扮粍銆俿 鐢卞熀 64 鏁板瓧銆...
绛旓細鍔犲瘑閫熷害蹇, 鍙互鍔犲瘑澶鏂囦欢 瀵嗘枃鍙, 涓鏃﹀瘑閽ユ枃浠舵硠婕, 灏变細瀵艰嚧鏁版嵁鏆撮湶 鍔犲瘑鍚庣紪鐮佽〃鎵句笉鍒板搴斿瓧绗, 鍑虹幇涔辩爜锛屾晠涓鑸粨鍚Base64浣跨敤 鍔犲瘑妯″紡 ECB : Electronic codebook, 鐢靛瓙瀵嗙爜鏈. 闇瑕佸姞瀵嗙殑娑堟伅鎸夌収鍧楀瘑鐮佺殑鍧楀ぇ灏忚鍒嗕负鏁颁釜鍧楋紝骞跺姣忎釜鍧楄繘琛岀嫭绔嬪姞瀵 浼樼偣 : 鍙互骞惰澶勭悊鏁版嵁 缂虹偣 : ...
绛旓細File URL: 浠 "file://" 寮澶达紝琛ㄧず璁块棶鏈湴鏂囦欢绯荤粺涓鐨勬枃浠銆備緥濡傦細file:///C:/example.txt Data URL: 浠 "data:" 寮澶达紝琛ㄧず璧勬簮鏁版嵁鏄洿鎺ュ祵鍏ュ湪 URL 涓殑銆傝繖绉嶆柟寮忛氬父鐢ㄤ簬宓屽叆鍥惧儚鎴栧叾浠栧獟浣撴枃浠躲備緥濡: data:image/png;base64,iVBORw0KGg...Tel URL: 浠 "tel:" 寮澶达紝琛ㄧず鐢佃瘽鍙...
绛旓細4銆佷娇鐢╓PS2000杞崲鍐呯爜 WPS2000涔熻兘杞崲鍐呯爜,鏀寔GB2312銆丅IG5銆丟BK绛変笁绉嶄富瑕佺殑姹夊瓧缂栫爜,骞跺彲鍦ㄨ緭鍑篟TF銆乀XT銆丠TM鏍煎紡鏂囦欢鏃跺鍐呯爜杩涜杞崲銆 鍥涖佸浣曟秷闄ょ綉椤典贡鐮? 銆愬舰鎴愬師鍥犮:缃戦〉涔辩爜鏄祻瑙堝櫒(IE绛)瀵笻TML缃戦〉瑙ｉ噴鏃跺舰鎴愮殑,濡傛灉缃戦〉鍒朵綔鏃剁紪鐮佷负A,娴忚鍣ㄥ嵈浠ョ紪鐮丅鏄剧ず璇ョ綉椤,灏变細鍑虹幇涔辩爜,鍥犳鍙浣犲湪娴忚...
绛旓細FILE_NAME_PATTERN鏄笂浼鏂囦欢鐨鍛藉悕鏍煎紡銆傜涓涓獅}鏀剧殑鏄笂浼犳椂闂,鏍煎紡鏄痽yyyMMddHHmmss,绮剧‘鍒扮銆傜浜屼釜{}鏀剧殑鏄笂浼犳枃浠剁殑鍘熷鏂囦欢鍚嶃傚浣曞皢瀵屾枃鏈唴瀹瑰瓨鍌ㄤ负鍥剧墖 鍦ㄦ帴鏀跺瘜鏂囨湰鍐呭鏃,灏嗘帴鏀跺埌鐨勫浘鐗囪浆鎹负鏂囦欢涓婁紶鍒癕inio(Minio鍏蜂綋浣跨敤鍙弬鑰冩枃妗),鐒跺悗灏哹ase64缂栫爜鏇挎崲涓哄浘鐗囧湴鍧淇濆瓨鐢ㄥ埌鐨勫伐鍏风被...
