码迷,mamicode.com
首页 > Web开发 > 详细

纯js实现最简单的文件上传(后台使用MultipartFile)

时间:2017-09-14 16:34:16      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:style   XML   简单的   127.0.0.1   col   progress   class   art   结果   

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>XMLHttpRequest上传文件</title>
    <script type="text/javascript">
        var xhr;
        //上传文件方法
        function UpladFile() {
            var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
            var url = "http://127.0.0.1:8080/api/attachment/upload"; // 接收上传文件的后台地址 
            
            var form = new FormData(); // FormData 对象
            form.append("file", fileObj); // 文件对象
            
            xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
            xhr.open("post", url, true); //post方式,url为服务器请求地址,true 该参数规定请求是否异步处理。
            xhr.onload = uploadComplete; //请求完成
            xhr.onerror =  uploadFailed; //请求失败
            xhr.send(form); //开始上传,发送form数据
        }

        //上传成功响应
        function uploadComplete(evt) {
         //服务断接收完文件返回的结果
             
             var data = JSON.parse(evt.target.responseText);
             if(data.success) {
                 alert("上传成功!");
             }else{
                 alert("上传失败!");
             }
             
        }
        //上传失败
        function uploadFailed(evt) {
            alert("上传失败!");
        }
          //取消上传
        function cancleUploadFile(){
            xhr.abort();
        }
    </script>
</head>
<body>
    <progress id="progressBar" value="0" max="100" style="width: 300px;"></progress>
    <span id="percentage"></span><span id="time"></span>
    <br /><br />
    <input type="file" id="file" name="myfile" />
    <input type="button" onclick="UpladFile()" value="上传" />
    <!--<input type="button" onclick="cancleUploadFile()" value="取消" />-->
</body>
</html>

 

纯js实现最简单的文件上传(后台使用MultipartFile)

标签:style   XML   简单的   127.0.0.1   col   progress   class   art   结果   

原文地址:http://www.cnblogs.com/007sx/p/7520529.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!