下面是编程之家 jb51.cc 通过网络收集整理的代码片段。
编程之家小编现在分享给大家，也给大家做个参考。
<html>
<head>
<title>Converting Image to Data URIs in JavaScript</title>
</head>
<body>
Select Image file
<input type="file" id="files" multiple />
<div id="fileContent"></div>
</body>
<script>
function fileSelected(evt) {
var files = evt.target.files;
var type = '';
var fr = new FileReader();
fr.onload = function(event)
{
if(type.indexOf("image") == 0){
document.getElementById('fileContent').innerHTML = "<img src='" + event.target.result + "' />";
document.getElementById('fileContent').innerHTML += "<br/>";
var d = event.target.result;
d = d.replace("data:;","data:" + type + ";");
document.getElementById('fileContent').innerHTML += "<strong>Data URI: </strong>" + d;
}
}
for (var i = 0,f; f = files[i]; i++) {
//Gives name of file : f.name
//Gives type of file : f.type e.g. text/plain or image/png etc
//Gives size of file : f.size (in bytes)
//Gives last modified date : f.lastModifiedDate
var filecopy = f.slice(0,f.size); //i.e. read entire file,as reading half image file doesn't solve any purpose
type = f.type;
if(f.type.indexOf("image") == 0)
fr.readAsDataURL(filecopy); //on successful read,fr.onload function will be called and that will populate the result in fileContent container
}
}
//attach change event of file control
document.getElementById('files').addEventListener('change',fileSelected,false);
</script>
</html>
以上是编程之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。
如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
