AJAX-文件上传2-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

AJAX-文件上传2

简介: 1、XHR2 上传方案 XmlHttpRequest Level2 已经原生态支持,异步文件上传。 2、实现代码。 网页代码实现: XmlHttpRequest Level2文件上传 #uploadBt...

1、XHR2 上传方案

XmlHttpRequest Level2 已经原生态支持,异步文件上传。

2、实现代码。

网页代码实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>XmlHttpRequest Level2文件上传</title>
    <style type="text/css">
        #uploadBtn,#uploadStopBtn{
            width: 100px;
            height: 30px;
            line-height: 30px;
            background: blue;
            margin: 20px;
            display: block;
            border-radius: 5px;
            text-align: center;
            color: white;
            cursor: pointer;
        }

    </style>
</head>
<body>
    <input id="uploadFile" type="file"></input><br/>
    <span id="uploadBtn">开始上传</span>  
    状态:<span id="uploadStatus"></span><br/>
    <span id='uploadStopBtn'>停止上传</span>
</body>
<script type="text/javascript">
    var uploadBtn = document.getElementById("uploadBtn");
    function ajaxUpload(url){
        var uploadStatus = document.getElementById("uploadStatus");
        var stopBtn = document.getElementById("uploadStopBtn");
        var file = document.getElementById("uploadFile").files[0];
        //创建XHR对象
        var xhr = new XMLHttpRequest();
        //ajax上传开始
        xhr.onloadstart = function(event){
            console.log('开始上传');
            uploadStatus.innerHTML='开始上传';
            stopBtn.style.display = 'block';
            stopBtn.onclick = function(){
                this.style.display = 'none';
                xhr.abort();
            };
        }
        //ajax上传完成
        xhr.onload = function(event){
            console.log('上传成功');
            uploadStatus.innerHTML='上传成功';
            console.log(xhr.responseText);
        }
        //ajax上传错误
        xhr.onerror = function(event){
            console.log('发生错误');
            uploadStatus.innerHTML='发生错误';
        }

        //ajax上传取消
        xhr.onabort = function(event){
            console.log('上传取消');
            uploadStatus.innerHTML='上传取消';
        }
        
        //ajax传输结束
        xhr.onloadend = function(){
            console.log('传输结束');
            stopBtn.style.display = 'none';
        }

        //ajax上传进度
        //xhr和xhr.upload 都有progress事件 
        //xhr.progress是下载进度,xhr.upload.progress是上传进度
        xhr.upload.onprogress = function(event){
            if(event.lengthComputable){
                var percent = Math.round(event.loaded * 100 / event.total);
                console.log('上传进度:%d%',percent);
                uploadStatus.innerHTML=percent;
            }
        }
        //ajax上传表单创建
        var formData = new FormData();
        formData.append("uploadFile",file);
        formData.append("key1","value1");
        formData.append("key2","value2");
        //ajax发送数据
        xhr.open('POST',url,true);
        xhr.send(formData);
    }
    uploadBtn.onclick = function(){
        var url= "http://127.0.0.1:6158/ajax/rest/FileUploadService/upload";
        ajaxUpload(url);
    }
</script>
</html>

JRainFramew

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: