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

相关文章
|
Web App开发 JavaScript 前端开发
前端接收数据流实现图片预览效果--ajax 请求二进制流 图片 文件 XMLHttpRequest 请求并处理二进制流数据 之最佳实践
本文为转载文章 原文链接:https://www.cnblogs.com/cdemo/p/5225848.html 首先要谢谢这位大神的无私贡献!解决了我的问题也完美表达了我当时的心路历程 ajax 请求二进制流 图片 文件 XMLHttpRequest 请求并处理二进制流数据 之最佳实践 写在前面 :从提出需求到完美的解决问题,实现过程是曲折的。
8058 0
|
5月前
|
XML 前端开发 JavaScript
AJAX | 拦截器、文件上传和下载
AJAX | 拦截器、文件上传和下载
60 0
|
域名解析 JSON 前端开发
漏刻有时数据可视化ajax访问静态json文件使用POST方法返回405 (Method Not Allowed)的解决方案
漏刻有时数据可视化ajax访问静态json文件使用POST方法返回405 (Method Not Allowed)的解决方案
158 0
|
前端开发
Ajax模板文件
Ajax模板文件
69 0
|
前端开发 JavaScript
【jquery ajax】实现文件上传提交
【jquery ajax】实现文件上传提交
270 0
【jquery ajax】实现文件上传提交
|
开发框架 移动开发 前端开发
ASP.NET MVC中使用jQuery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径
ASP.NET MVC中使用jQuery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径
283 0
|
存储 前端开发 JavaScript
基于Flask开发网站 -- 前端Ajax异步上传文件到后台
从网页界面(前端)上传文件到服务器(后端)
456 0
基于Flask开发网站 -- 前端Ajax异步上传文件到后台
|
前端开发 JavaScript 监控
ajax上传文件显示进度
ajax上传文件显示进度的操作,文章后有演示地址,以及封装成vue的插件
3111 0
|
前端开发 JavaScript
文件上传 之 ajax 请求
步骤简单思路清晰
1170 0