开发者社区> java小工匠> 正文

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

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

相关文章
PHP读取目录下所有文件,并通过ajax返回json格式的数据
<p>php</p> <p></p> <pre name="code" class="html">&lt;?php // header("content-type:application/json"); //header('Content-type: text/html; charset=utf-8'); $dir = "../Music"; $dh = opendir($dir);
1889 0
jqm文件上传,上传图片,jqm的表单操作,jqm的ajax的使用,jqm文件操作大全,文件操作demo
最近在论坛中看到,在使用html5中上传图片或文件,出现各种问题。这一方面,我也一直没有做过,今天就抽出了一点时间来学习一下。现在的示例已经ok了,我就给大家分享一下,希望对大家有帮助。<br> 好吧,我们先看看效果截图吧:<br><img src="http://img.blog.csdn.net/20140623113700953?watermark/2/text/aHR0cDovL
1296 0
JAVA计算文件大小
File f = new File(save_path+File.separator + resouce_id+".zip"); FileInputStream fis = new FileInputStream(f); String re...
574 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
21234 0
[代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传
原文 [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传 Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件的 Javascript 组件。
958 0
ajaxfileupload.js插件结合一般处理文件实现Ajax无刷新上传
先上几张图更直观展示一下要实现的功能,本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPOI2.0实现数据读取。
1167 0
ajax提交表单和文件上传
说明 文件上传用到就jar包 mavne依赖 commons-fileupload commons-fileupload 1.
954 0
ajax实现上传文件
1.html部分 上传 2.js中利用ajax产生表单并发送表单 function UpladFile(fileUploadId, taskid) { var fileObj = document.
538 0
+关注
java小工匠
个人研究方向: 微服务、netty、物联网、mqtt、modbus、工作流、流程设计器、消息中间件、高并发、大数据 、区块链等
103
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载