<!Doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>图片转base64编码</title>
<style>
* {
margin: 0;
padding: 0;
}
.file_div{
width: 50%;
margin: 0px 1px;
padding: 1% 10px;
}
.demo{
width: 50%;
margin: 0px 1px;
padding:0px 10px;
}
.img img
{
width: 600px;
height: 600px;
}
.file {
position: relative;
display: inline-block;
background: #AADFFD;
border: 1px solid #99D3F5;
border-radius: 30px;
padding: 4px 12px;
overflow: hidden;
Color: # 1E88C7;
text-Decoration: none;
text-indent: 0;
Line-height: 130px;
}
.file INPUT {
position: Absolute;
font-size: 100px;
right: 0;
Top: 0;
Opacity: 0;
}
.file: hover {
background: #AADFFD;
border-Color: # 78C3F3;
Color: # 004 974;
text-Decoration: none;
}
</ style>
<Script type = "text / JavaScript">
window. = function the onload () {
// gripping Photo, transcoding result, the display image of DOM
var img_upload = document.getElementById ( "img_upload");
var base64_code = document.getElementById ( "base64_code");
img_area = document.getElementById var ( "img_area");
// add functionality to start listening to events
img_upload.addEventListener ( 'Change', readFile, false);
}
readFile function () {
var File this.files = [0]; // Here the object is to grab uploaded.
IF (!. / Image \ / \ W + / Test (file.type)) {
Alert ( "Make sure the file is an image type");
return to false;
}
var Reader the FileReader new new = ();
reader.readAsDataURL (File);
= function reader.onload () {
base64_code.innerHTML = this.result;
//this.result this result is in FileReader.readAsDataURL () interface to which complete conversion of the output image is stored in the result which results base64
img_area.innerHTML = '< div> picture display: </ div> <IMG the src = " '+ this.result +'" Alt = "" / class = "IMG"> ';
}
}
</ Script>
</ head>
<body>
<div class="file_div">
<a href="javascript:;" class="file"> 选 择 图 片
<input type="file" id="img_upload" />
</a>
</div>
<div class="demo">
<textarea id="base64_code" rows="30" cols="100"></textarea>
<p id="img_area" class="img"></p>
</div>
</body>
</html>
One way out very early, but when a recent study found a map code system conversion problem by base64 encoding turn into a picture, edit formatting codes inside the format, such as a jpeg png changed, then it can be directly non-destructive edit the picture format
