利用FormData实现附件上传(实现上传图片显示)
博客专区 > PHer 的博客 > 博客详情
利用FormData实现附件上传(实现上传图片显示)
PHer 发表于3年前
利用FormData实现附件上传(实现上传图片显示)
  • 发表于 3年前
  • 阅读 3876
  • 收藏 9
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

<script type="text/javascript">
            function  creatXMLHttpRequest(){
                    var obj =null;
                                if(window.ActiveObject){
                                        obj = new ActiveObject("Microsoft.XMLHTTP");
                                }else{
                                        obj = new XMLHttpRequest();
                                }
                            return obj;
                }
    
            window.onload=function(){
                fileinfo=document.getElementById('myheads').files[0];
            }
            function uploaded(){
                    var xhr = creatXMLHttpRequest();
                    var fd = new FormData();
                    fd.append('myheads',fileinfo);
                    xhr.onreadystatechange=function(){
                            if(xhr.readyState==4 && xhr.status ==200){
                                    alert(xhr.responseText);
                            }
                    }
                    xhr.open('post','jsonupload.php');
                    xhr.send(fd);
            }
 </script> 

                <input type="file" id='myheads' name="myhead"  value="wenjian"/>
                <input type="button"  value="上传" onclick="uploaded();"/>
 </body>


上图为fileinfo的内容

立即显示被上传图片效果

            window.onload=function(){
                fileinfo=document.getElementById('myheads').files[0];
            //    console.log(fileinfo);
            }

            function uploaded(){
                    var xhr = creatXMLHttpRequest();
                    var fd = new FormData();
                    fd.append('myheads',fileinfo);
                    document.getElementById('img').src=window.URL.createObjectURL(fileinfo);
                    xhr.onreadystatechange=function(){
                            if(xhr.readyState==4 && xhr.status ==200){
                                    alert(xhr.responseText);
                            }
                    }
                    xhr.open('post','jsonupload.php');
                    xhr.send(fd);
            }

总结:HTML5新特性FormData

可以通过:

fileinfo=document.getElementById('myheads').files[0];来捕获客户端上传文件的信息

将需要上传的文件信息载入到FormData对象内部

fd.append('finfo',fileinfo);

然后通过 window.URL.createObjectURL(fileinfo);文件的url地址信息,二进制编码存在


共有 人打赏支持
粉丝 4
博文 118
码字总数 38443
×
PHer
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: