html5圖片預覽

html5實現了對已經編碼的base64的圖片進行展示,運用這一點對圖片實現預覽,

如下顯示的是chrome的圖標:

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAAuAC4DAREAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD+gjWNe0PwnoGq+JPEmr2Wi6Ho1ncahqmq6hOlvZ2Nlb73lmmldgEwo2hRl5HCxRo0xRW/tvNczy/JsBjs1zXF0MDl+AoVMTjMbiaipYfDYejGc51atSTSUUltvJ3jHmklF/4rcH8IcTcecTZJwbwbkWZcScU8SZjg8nyLIcnwtXGZnmuZ4utGlhsJg8NSjOdSpUnLmv8Aw6UfaVa1SFGFWa/L34h/8FDdU8Q6lc6X8IraLw74egl8uHxVrFlDdeI9XVGlDXVjpd552n6LZzjJhW+t73U5I/LnkGnzF7Qf59+Jn0uM8x2JxWWeGuGp5Tl1OUqa4hzHC08Rm2MUZVE62DwOJjUwmXUJr+GsZRxWMnT5JyWDq+1w6/6Tfow/sT+DeGsmy7ir6U2Z4njDirEUaeIqeGnDGbYnLOD8i9oozWCzviLK54fOeJMzw9ksTPJcflWSUa8sRhaVTOsJGjmMvJv+GlviFMjzTfEnxr5zA8weLtdso+WYtst7DULa2jDHJISFR0BBVRX824nxa8VMXWqV63iLxjGpNrm+r8SZvg6HxSfu4fBYuhQgnzO3LBe7aKSSSf8Ao1lv0IfosZPhaeAwX0b/AAYqUKNlCWZ+GPB+dYyyiofvMyzrJsfj6z5YJuVbE1G5uVRt1Jybr6X+2r8aPAd+l7pnjm61+1SSN59H8Yn/AISHT7yOMv8AuZbq6mXWrVWHymSw1W2kJyXaRgQfqOFvpBeLXDNeM/8AWnF57hYyg62A4kbzejiIxb92pi8RU/tOlzJ6yw2Ooyb1m5SbPhPEP9mH9EDxWyzFYWv4TZZwDmlSFSOD4j8MVHg7H5dVquf76jlGAoy4YxvLLalmuQY2lCDUKMaS95/p9+yv+2h8O/2klufDSxp4S+JWl2f2rUvB95drPFqdlGVSfWPCd8VibVbCNypvbSSGLU9LaRUureW1MGpSf3Z4TeNvD3ilh54SNP8AsfiXC0o1cZktetGpGtSi5Rni8pxD5Hi8LGTi61OVOGJwrlBVoSpKniqn/P19NX9nh4rfQ3x1HiCvXfHXhFnWOeCyLxCy/A1cLUy7G1Pazw+RcaZZGeIjkWbVacJ/2fiYYnEZTnFOnVqYHFU8dDHZTQ+2VhLZxgHAzgsAMM/ucZ3dBxjHPHP7E5O7a3dvnZz1eltmu9te2v8AA0E1eXM02tbW11l17OyaXqruzZ+F/wDwUg8T+I/HOi3vw48IahdR2XgOWx8TeINLtX2Q+KNUjt5bpdIuwpZriLRtPli1SytwwSXW3iE0Mk0Fs6/wp9LrxYr4rirC+FmX4h08qyqlhMdxK4SlF4vOsZTeJy7CVmpP2mGy7BzoYnkfuSxWMUqsPa4GjM/vT9k/408FfR6+lVwlxX4gZPk+IyTjjA4vw7/1mzPDqpi+AqvEeKwVHA8TZZiJyUcvjXxuGp5Nn2NavQ4YzDN6vOqMcTRq/jV4S13X9f1LSdD8O6fqWt6zrV/Y6Vo+j6TaXN/qmqarfXKWllplhp9qktzd315cyRQWtpBHJPPO8ccCM7DP8h08JVrVYUKNOdWtVnCnSpU4ynUqVJzlGEIQipOU5ydoxV224pXb1/7Ucyp5RhMux2b5hjcJl+W4DC4jG5hj8fWpYbCYHCYalUrYnE4zE15xo4ahh6NKdWtWqzjTp04yqTnyJyf6peHP+CevxTTT9nxY+OXwY+EHiZ7dWfwFqup+LvGnivRryRWeKx8YD4feFfEeh+GrhkKyXFs2uXupWIZE1DT4Jx5TfvfDv0YfFbiLLYZpSymlhKFanz0I4uvSpVakb+7JKrOEJwlpaWHqV9brSalFf5leIH7T76K3BPEeJ4fy+pxLxc8FiY0MXm2T5bSo5W7SlGcsG8XioY6rKDg7RxmAwNKonGpSxE6Mo1ZM8Sf8EwP2hLWwtNb074mfCPxX4W1OWS207xf4S1zxBrXh65u4lLy2E00Xh2K70vU4VIM2laxaWWoptk/0YpHI4/j/AOkDxbn/ANGPMKGG8UvDjivC5fjazw2W8R5cstxWQY7EKFar9Xp4mvjMJiMLiZ0qVSpQw+YYXDVcXRp18RgY4jD0atVfpXh79PfwK8QsFPG8K5ZxLjHTipVsJKORQxdGKlGMpThDOq0JJScVUdKpP2E5Qp1+SrJQlj+D/wDgmr+1F4U8WeH/AB34Q+KXgPQfE3hfVbTWtB1aGbxVG1rf2sjMnmBvDmy4tbmPdbX9nMHtr6wmns7qJ7aWRT/N+W/tEfDjhTNsDnWVZJxjQzLLMTTxWFr4eORucKtOTunCOc+/TqrmpV6U04VqMqtCqpQnOJ9Fx/4/eCXijwHxX4bcd+HnEOfcJcY5Ni8jz/KsVTyVwxWBxcJR56NVZq6mFxuDq+zxmW4+hKOLy/MaOFx+DrU8bQoVof0L+ENR1TU/Dek3OuQ2Vtry2NpD4gt9LluJdMg1yOBF1SLTpbmOG5lsBdb2sZbqKO4ktDBJNGkrSIP+hbwB8ZuGvpC+DvA3jDwpGvRyjjHKpYr6niIxjistzTA43F5TnmVYmNOtWj7XLc3wGMwamqko1adKniIN060JH/Gv4yeHVTwm8VOOeAHWxNbC8P51iKGT43GwowxeY8PYlvG8P5jiqVCUqFLF43KMTgcTjKNCc6NDF1MRh6dWpGm5y/BPxneS3/j34hXM8nmSv428VRuxbccW2vajaRLnJ4jhgjjHJG0DaAq4r/M7xmxNfF+LniXWxE3OouNeJsPGUua/scHnWOweGj7zb9zD0KUEk7JJJJRjyn57gqapYPBwSsvqeFtbypR1a6X0e71bfM7Xfk/7NvgaP4EfFL9p347abFCsvgD4Jf8ACR/CJ96fa/DvjL4kfEzwR8LNZ17So3h+W88C6V4u1e4066jdX0t9a8O3Mckt5Erp+9/Q/wCHcq458VsiwebwpYiOAp4mvPD1rSjVqYXCYrFU5ShJSUqdenhKmHnzWXPVqJbKR/t7nP0/eJ/En9m5HgLE55iYeJnBmf8ADnAPHOOjVqLG59wNSpVlwhn1Sq68qssRjXRwuFzWs3UqYnNOHsfjcUqdLMqFGejpPxiaO3cveM0khJkd5iZHdixZ3Zm3szMWZizFmYksScmv9oKmSXbSglFKKilGySTmkkldcsVayXRx2S1/yPo5xCUZSlPmck7tzbbd5Xcm23duzfnZSb1a+0P2A/jhq2p/H+b4Si7e48L/ABT8I+NodaspG3Wdpq3gzwb4i8b+HPEXO77Pd6fd6DJp6XCY32mqXdtKXSRQf4q/aH+DfCniZ9DzxowPE+HwfNlHCOZZzlGPxUo0v7NzXL4vFZbjvrEqc3SpYHMKGEzGu0nejhKlObdGdaEv376MXHeZ5F4zcLYXLa1V4fOMW8HjcNTvONalGhiakv3afK5zowq4am29HidHzRjJ/p9/n+fv7fz54Of+DX+vzXd9vz1bTb/3GNLwZJm58RxIWKpd2UvGCBJPbSeYAMDAIiQk5OSSBkhjX/VL+xdzLH4v6IvEuCxVWU6GS+NPFuXZbB87VDA1uEPDvOJ0488pJKWYZtj61oKEb1LuMqjnUn/i3+0PwOHwvjlkWIo0+WpmXhzkeMxcoqK9riKfEXF+XwqNqN21hcBhqfvc0rQS5+VRgvwn+K2l3Hg34z/EPw9fBkW81y68Rac7IUW40/Xp5tQ82HOBIkV7Jd2rOmR5sDclixPsfSV4OxXC/i3xZOdKSw2e4yXEeBrcnLGvSzadXE4uUen7vMfruHla7lKnzyacrv8AhfL7YvJ8vxVLXloU6E0rO1SgnTnF+bioySWvvrRy5jX+H/iPQdEvfEGl+LtMudZ8EePPCmteAfHGn6dLBBq7+GddNvK+oaFc3CSW8Gu+H9U07SvEuhvco9sdX0yyjn2Rs06/B+EviPmfhRx1lHGOWp1JYGtCOLw6b/2jCOrGdSny88FJ3pRlKm5w9rT9phnWpxq1ap9Zwjn9DIsdio5hQq4vJc4wNfJ89wdGUYYipl+JkpfWMI6qdOGPwFenRx2BnUXL7ejGlKcKdWdU+YvEv7GP7Q0Ws3n/AApfW/h18aPBDGe60zxRafFH4aeAdZstKEha2HjDwd8S/GHhHWvD+rJAQb62s4tV0qKWOYWusXMJhkf/AGo4P+lv4M8TZNRzHEcVYPJ8VKjGWKy7FxxM61Cpb97ZYehVqRpRduWWLp4eo4tN0k7n0U/D/FY2c63DGf5Hn+WyTqU8S86ybKsZQoNy5f7RyzOcxy/F4OvFNe0iqdWjGSl7OvUi4TP0m/4J4/s+Wvwf1Dxt4/8AFnjPw147+KtxocvhCK28B6mPEHgb4aaZrgt5das5/GEUC6V4o8e6vZwf2bdQeGJ73RPDOiSXIl1u/vNagih/x+/a6ftDeHsD4Q4zwG8LcX9dznxMweMwOcZrTqU+TAcJz9tgc3xK5J1FJZtQqYjKMupqXtXUq47Mqs8NXyvC4fE/3L9CjwPwdfivHceZlmWDzf8A1YlRw9J5bUWKyvDZrV5cTTwcMxhfD43H4eMKeJxn1OpVoYOhKhh51a0sc3T/AEYvryKytpZZHVQqk5Y46GTvkY9yTwM5P8Vf8tWVZdWx+Jp06cHK84rZ6+9P123+a6M/1aik9/w66yXfry6efTW5Z+EzzX2na5rju5g1bVnNiWBBNpZotqjjLcpJIkjxkEqUYMGOa/7Af2ZvhNjvCX6I3BtDNcLPBZpx5mea+IuMw1Sn7OrTw+eQwGAyOpUVk5vG8O5Lk2YQlP34U8VToyv7LX/CT6bfGuD428f8+o5dXp18Hwfl2X8H08RCXPTqYnLamNxma04p3UPqub5lmGDkotpzozmkvaNr4q/a1/Z9vPirokHjHwPFHb+OfC0cxsYZHCx61pRZ5J9GvJgi8sQj2kzKTBclCFEclwzf1x46+EGF8U+G4/V3RocR5OqtXKMXODhCvTmm6+XYqUVNqhiXCnKnVXM8PXjCpFOEsRTqfxPwnnVHA16+BrxccBippxUpqcqFRupyzUuWF9ElJ2XMmt5R978pNN8ZyWV9d6F4htLnR9b02X7NqWk6lE9tfWk6MwKyxSBWZG4MUyboZU2yRO6MGP8AlDxHwXnPD2Y4vLczwGJwGNwtT2dbDYilKE4tOpaXWM6c1aVOrCUqVWm1Up1JU9X+h18rc062HkqkJJOMoO6krySas2nffXVNu7uzvdJkfxVqGneHtEC3Wqa5e2+m2UKtjMtxIV3yNklIo0VpZ5WGyKFZJHYJGzH4HO8dhOF8nzXiDOajoZZkuCr5hjK3K+b2OHjUlyUo3/eVq0lGlQpJ89WtOFKF5yO/hTg/P+MeJsk4UyLCSxebZ7mOGy3AUFGSTrYis6aqVZpNU6FCLniMTWa5KOGhVrTahCTP2B+H1j4S+DvgDSPB2kTwsmm25m1G+JVJNT1e5Ly6lqc2TktcTqfKRifJtFt7ZSI4FU/4p8f1eLvGPj/PONM5o1Y1M0xMYYHBe/OnluUYdulluW0Fa3JhcOo+1mrKviZV8VNe0qzkf9EPhR4b5P4UcA5BwPkyU6OVYWP13GcihVzPNq8nWzPM66tzc+LxN5U4O/sMOqGGhJUqNNPOtNU1n4s602geGvNj0aKVRruvAOLa3thIfNtrSVciW7lUFFVCRGreZISoCv8A6UfQP/Z7514rcQ5Vxz4g5Vics8L8pxWHxteWLo1cPX41rYasnHJcoU4wqTyupUg4Zxm9NqlCh7TL8BVnmUp16H4D9KH6UOReD3D+Y8McMZhhsz8SMyw1TC4XDYerSqw4WhXhVSzbNUpShDHQhJVMsy2onVqVXTxmMpxwMIU8R9jaRp1ro2nWml2MQhtLG2htbeNFwqxwhkXlepOGYnjknJOBX/TBQw+GweGw+EwtKjh8NhqFLD4fD0YQpUaFGjD2dKjSp01GnSpwhFQp04RUIQSjBJJs/wAMa2JxGMxGIxWKrVMRicRWq1q9arOdSrVq1alSpUqVKk5SnUnOd5ynNuUpN80nJSb81tsFGyAwAIbOB03YwuGBGCBjK8dSSFr7SSdmlu7236SqLffVdd9U7Np3/KMP7r1d/htpvrUsnrtdJ+Wm9tfEPiz+yz8HfjfH53i3w7FHqyLi217TC+n6vB9/AS+s2huVQu29ohN5btgyIxHP5/xbwJwpxnh50OIcmwePcEo0684Sp4uiuaTtQxlGUMTSi3OMpQhVjCcr88Jcqb+1yfP8xy6PJSqKpQun7GorxcU5X6vld2tU9Uld3PBfAX/BPiz+HHiaXxL4S+JmsSXH2S5tLGLX7e21JNNjuWAnmtHjtLacXLwL9lE008pFtLcRgBpZZD/LXiH9CPwp8SMqqZHmmdcZ5XlksXRxeIw2S5nktJYqWHlUlQo4iWZcN5pOph6dSUaypcyvWp0aspSnTXN+/wDhD9IDOPCLiWpxdkXC3DWb5ysurYHC1uIqGaYujl8MVKMcTiMBSwGcZVKli61KLwsq9SrVawlbE0YRiqs2/orRP2Y7aW4Wbxn4y1jxDEro50+BvsFjL80h2yrEokaMngpvwy8MT0rzPDz6AP0afDrGUcwhwnieLsfhJ054evxljYZrh4VKbb56mU4bCZdkuL5n73LjctrxjK/s4Qsj9W42+nH49ca4Kvl2FznL+D8HiIypVocJ4GeX4mUJuelPNMVi8wzfCuMWoqeEzChNq/tJTtr9N6F4e0bwzp8Gm6HYW+nWNuqxxwW0axj5QwDHABZjwSzEsT67ef7Gw1HDYOhSwuEw9LD4fD0qdGhQoQhSpUqNOMoUqVKnCKhTp04csYU4JRjFKMUoo/kzEYjF4zEVsVjcTWxeJrVJ1atevUnUq1alScpzqVak5SlOcpNynOTcpyk5SlzK730jbDAN02cnng78dfcEn8OSSxNPW97dOiXWXS1uuna71a0MopOPNey0SSXnO2nN5fi+7P/Z" alt=""/>

下面是一個簡單的前端html+js,顯示圖片並預覽

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>簡單的html5 File測試 for pic2base64</title> 
<style> 
</style> 
<script> 
window.onload = function(){ 
var input = document.getElementById("demo_input"); 
var result= document.getElementById("result"); 
var img_area = document.getElementById("img_area"); 
if ( typeof(FileReader) === 'undefined' ){ 
result.innerHTML = "抱歉,你的瀏覽器不支持 FileReader,請使用現代瀏覽器操作!"; 
input.setAttribute( 'disabled','disabled' ); 
} else { 
input.addEventListener( 'change',readFile,false );} 
} 
function readFile(){ 
var file = this.files[0]; 
//這裏我們判斷下類型如果不是圖片就返回 去掉就可以上傳任意文件 
if(!/image\/\w+/.test(file.type)){ 
alert("請確保文件爲圖像類型"); 
return false; 
} 
var reader = new FileReader(); 
reader.readAsDataURL(file); 
reader.onload = function(e){ 
result.innerHTML = '<img src="'+this.result+'" alt=""/>'; 
img_area.innerHTML = '<div class="sitetip">圖片img標籤展示:</div><img src="'+this.result+'" alt=""/>'; 
} 
} 
</script> 
</head> 
<body> 
<input type="file" value="sdgsdg" id="demo_input" /> 
<textarea id="result" rows=30 cols=300></textarea> 
<p id="img_area"></p> 
</body> 
</html> 


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章