话不多说，直接上代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="data url,DataURL,DataURL转换,DataURL生成" />
<meta name="description" content="" />
<style type="text/css">
*{ margin:0; padding:0;}
body { font:12px/1.5 Arial; color:#666; background:#fff;}
ul,li{ list-style:none;}
img{border:0 none;}
.ssNav{ height:40px; line-height:40px; background:#333; }
.ssNav .sxo{ overflow:hidden;zoom:1; width:960px; margin:0 auto;}
.ssNav .sxo li{ float:left;}
.ssNav .sxo li a{color:#fff; text-decoration:none; padding:0 8px; font-size:14px;font-family:Microsoft YaHei; float:left; display:block;}
.ssNav .sxo li a:hover{ text-decoration:none; background:#555;}
.ddNav{height:50px; line-height:50px; background:#111; width:960px; margin:15px auto;}
.ddNav .xdo{overflow:hidden;zoom:1;width:960px; margin:0 auto;}
.ddNav .xdo li{ float:left; background:#555; width:25%; display:inline; text-align:center;}
.ddNav .xdo li a{color:#fff; text-decoration:none; font-size:22px;font-family:Microsoft YaHei;display:block;text-align:center;}
.ddNav .xdo li a:hover{ text-decoration:none; background:#000;}
.ddNav .xdo li a.active{background:#54bfff;}
.tit-h1{font-size:34px;font-family:Microsoft YaHei;text-align:center; padding:10px 0; color:#333;}
.ddback a{ width:360px; margin:20px auto 0;font-size:26px;text-align:center; display:block; line-height:46px; height:46px;font-family:Microsoft YaHei;text-decoration:none; background:#54bfff; color:#fff;}
.ddback a:hover{ color:#fff; background:#666;}
.sdCon{}
.ddfooter{ padding:8px 20px; background:#555; text-align:center; color:#fff;}
.ddfooter a{ text-decoration:none; color:#fff;}
/*---------------------------------------demo css--------------------------------------------*/
html, body {
height: 100%;
}
#main{ width: 960px; margin:20px auto;}
body.dragenter {
-webkit-box-shadow: inset 0 0 50px rgba(0,0,0,.5);
-moz-box-shadow: inset 0 0 50px rgba(0,0,0,.5);
box-shadow: inset 0 0 50px rgba(0,0,0,.5);
}
#form {
width: 0;
height: 0;
overflow: hidden;
}
#select {
text-align: center;
margin-bottom: 2em;
}
#result {
margin: 0;
padding: 0;
list-style: none;
}
#main li {
width: 100%;
margin-bottom: 1em;
}
.imgholder {
height: 150px;
}
.imgholder div {
background-position: 50% 50%;
background-repeat: no-repeat;
max-width: 150px;
max-height: 150px;
height: 100%;
margin-left: 400px;
}
#main textarea {
resize: none;
height: 150px;
}
/*-----------------------------------------------------------------------------------*/
</style>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script>
window.onload = function () {
if (window.File && window.FileReader && window.FileList && window.Blob) {
function $(id){
return document.getElementById(id);
};
var dragArea = document.body,
selectBtn = $("selectfile");
if ("draggable" in dragArea) {
dragArea.ondragenter = function (evt) {
if((evt.dataTransfer.types.contains && !evt.dataTransfer.types.contains("Files")) || (evt.dataTransfer.types.join && evt.dataTransfer.types.join("").indexOf('Files') < 0)) return;
preventDefault(evt);
this.setAttribute("class", "dragenter");
};
dragArea.ondragleave = function () {
this.setAttribute("class", "");
};
dragArea.ondragover = function (evt) {
preventDefault(evt);
evt.dataTransfer.dropEffect = "copy";
};
dragArea.ondrop = function (evt) {
if((evt.dataTransfer.types.contains && !evt.dataTransfer.types.contains("Files")) || (evt.dataTransfer.types.join && evt.dataTransfer.types.join("").indexOf('Files') < 0)) return;
preventDefault(evt);
this.setAttribute("class", "");
fileHandler(evt);
};
};
$("selectbtn").onclick = function () {
selectBtn.click();
};
selectBtn.onchange = function (evt) {
fileHandler(evt);
};
function preventDefault(evt) {
evt.stopPropagation();
evt.preventDefault();
};
function fileHandler(evt) {
preventDefault(evt);
var files = evt.target.files || evt.dataTransfer.files;
if (files.length == 0) {
alert("错误：没有选择任何文件。");
return;
} else if (files.length == 1 && files[0].type.indexOf("image/") == -1) {
alert("错误：请选择图像格式文件。");
return;
} else {
$("result").innerHTML = "";
$("selectbtn").innerHTML = "请稍后...";
$("selectbtn").disabled = "disabled";
for (var i = 0, l = files.length; i < l; i++) {
if (files[i].type.indexOf("image/") == -1) continue;
loadFile(files[i], function (evt) {
pushImage(evt.target.result, evt.loaded, evt.target.result.length);
});
};
window.setTimeout(function(){
$("selectbtn").innerHTML = "选择文件";
$("selectbtn").removeAttribute("disabled");
$("form").reset();
}, 500);
};
function loadFile(file, callback){
var reader = new FileReader();
reader.onload = function (evt) {
callback && callback(evt);
};
reader.onerror = function (evt) {
switch (evt.target.error.code) {
case evt.target.error.NOT_FOUND_ERR:
alert("错误：文件未找到！");
break;
case evt.target.error.NOT_READABLE_ERR:
alert("错误：文件无法读取。");
break;
case evt.target.error.ABORT_ERR:
alert("错误：文件读取被中断。");
break;
case evt.target.error.ENCODING_ERR:
alert("错误：文件无法读取。");
break;
case evt.target.error.SECURITY_ERR:
lert("错误：文件被锁定。");
break;
default:
alert("错误：文件读取失败。");
};
};
reader.readAsDataURL(file);
};
};
function pushImage(code, oSize, nSize) {
var li = document.createElement("li"),
imgHolder = document.createElement("div"),
imgElement = document.createElement("div"),
codeHolder = document.createElement("div"),
textarea = document.createElement("textarea");
var img = new Image();
img.src = code;
img.onload = function() {
if(this.width>120||this.height>120){
imgElement.style.WebkitBackgroundSize = imgElement.style.OBackgroundSize = imgElement.style.backgroundSize = "contain";
};
imgElement.style.backgroundImage = "url(" + code + ")";
};
imgHolder.title = "Data URI size:" + nSize + " bytes / Original size:<span>" + oSize + " bytes";
imgHolder.className = "pure-u-1-5 imgholder";
codeHolder.className = "pure-u-4-5 codeholder";
textarea.value = code;
textarea.className = "pure-input-1";
textarea.setAttribute("readonly", true);
imgHolder.appendChild(imgElement);
li.appendChild(imgHolder);
/*codeHolder.appendChild(textarea);*/
li.appendChild(codeHolder);
$("result").appendChild(li);
};
document.addEventListener("click", function (evt) {
evt = evt || window.event;
var target = evt.target || evt.srcElement;
if (target.tagName == "TEXTAREA") target.select();
}, false);
} else {
document.body.innerHTML = "您使用的浏览器不支持 File APIs。";
};
};
</script>
</head>
<body>
<div id="main" class="pure-form">
<div id="select">
<button id="selectbtn" class="pure-button pure-button-primary">点击上传图片</button>
<form id="form"><input type="file" name="selectfile" id="selectfile" multiple="" accept="image/*"></form>
</div>
<ul id="result" class="pure-g"></ul>
</div>
</body>
</html>
浙公网安备 33010602011771号