一.原理

利用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>