一.原理
利用Html Input标签载入图片,获取图片地址。在调用Ajax获取图片内容。代码都是很常见的,就不一一解释了
一.Code
<script>
window.onload = function(){
document.getElementById("readTxt").onchange=function(){
var file = this.files[0];
if (window.FileReader) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function (e) {
readTxt(e.target.result)
};
}
}
}
function readTxt(url){
var request=null;
if(window.XMLHttpRequest) /* 原生Ajax ,要解释?滚!*/
{
request=new XMLHttpRequest();
}else if(window.ActiveXObject)
{
request=new ActiveXObject("Microsoft.XMLHTTP");
}
if(request){
request.open("GET",url,true);
request.onreadystatechange=function(){
if(request.readyState===4){
if (request.status == 200 || request.status == 0){
document.getElementById("div1").innerHTML=request.responseText;
}
}
}
request.send(null);
}else{
alert("读取文件错误!");
}
}
</script>
<input type="file" id="readTxt" value="读取">
<div id="div1"></div>
<body>
网友评论