美文网首页
Ajax导入文件

Ajax导入文件

作者: PoWerfulHeart | 来源:发表于2017-10-23 09:57 被阅读16次

一.原理

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

相关文章

网友评论

      本文标题:Ajax导入文件

      本文链接:https://www.haomeiwen.com/subject/rkpouxtx.html