首页 > Web开发 > 详细

关于无刷新实现文件上传

时间:2015-09-26 06:59:56      阅读:182      评论:0      收藏:0      [点我收藏+]

相信AJAX对于大家而言,并不陌生,但怎么利用他上传文件却鲜有人试过,其实,通过无刷新上传文件至少有两种方式。

1、传统的方式

    <form method="post" target="frame">
        <iframe name="frame"></iframe>
        <input type="file" name="test" />
        <button type="submit"></button>
    </form>

重点在于form里面的target和iframe里面的name相同,此时提交会直接提交到iframe里面,会造成iframe刷新,如果将其大小设置为无法可见,则实现文件上传功能。

2、AJAX功能

通常大家使用都是用来传递可序列化为字符串的东西,但实际上有一个对象,类型是FormData,他可以实现传递文件。

            var formData = new FormData(); //创建一个虚拟的Form
            formData.append(‘fileName‘, file); //添加文件         
            var xhr = getHttpRequest();//获取AJAX对象
            xhr.open("POST", url);//必须POST
            xhr.upload.onprogress = function(e){//处理过程
                //e.total和e.loaded,表示一共需要上传的大小和已经上传的文件大小
            };
            xhr.onreadystatechange = function () {//上传情况
                //如果有返回值了
                if (xhr.status && xhr.readyState && xhr.status == 200 && xhr.readyState == 4) {
                    //上传完成,回调
  
                };
            };
            //不能有这一行,否则失败,因为上传文件不能使用会被编码的类型
            //xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(formData);//发送

 

关于无刷新实现文件上传

原文:http://www.cnblogs.com/21tcy/p/4839907.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!