欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-07-10 13:06:02
纯js实现最简单的文件上传、后台使用multipartfile实现

纯js实现最简单的文件上传、后台使用multipartfile实现

<!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 =  "https://localhost: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.upload.onprogress = progressfunction;//【上传进度调用方法实现】
            xhr.upload.onloadstart = function(){//上传开始执行方法
                ot = new date().gettime();   //设置上传开始时间
                oloaded = 0;//设置上传开始时，以上传的文件大小为0
            };
 
            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();
        }
 
 
        //上传进度实现方法，上传过程中会频繁调用该方法
        function progressfunction(evt) {
            var progressbar = document.getelementbyid("progressbar");
            var percentagediv = document.getelementbyid("percentage");
            // event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthcomputable不为真，则event.total等于0
            if (evt.lengthcomputable) {//
                progressbar.max = evt.total;
                progressbar.value = evt.loaded;
                percentagediv.innerhtml = math.round(evt.loaded / evt.total * 100) + "%";
            }
            var time = document.getelementbyid("time");
            var nt = new date().gettime();//获取当前时间
            var pertime = (nt-ot)/1000; //计算出上次调用该方法时到现在的时间差，单位为s
            ot = new date().gettime(); //重新赋值时间，用于下次计算
            var perload = evt.loaded - oloaded; //计算该分段上传的文件大小，单位b
            oloaded = evt.loaded;//重新赋值已上传文件大小，用以下次计算
            //上传速度计算
            var speed = perload/pertime;//单位b/s
            var bspeed = speed;
            var units = 'b/s';//单位名称
            if(speed/1024>1){
                speed = speed/1024;
                units = 'k/s';
            }
            if(speed/1024>1){
                speed = speed/1024;
                units = 'm/s';
            }
            speed = speed.tofixed(1);
            //剩余时间
            var resttime = ((evt.total-evt.loaded)/bspeed).tofixed(1);
            time.innerhtml = '，速度：'+speed+units+'，剩余时间：'+resttime+'s';
            if(bspeed==0) time.innerhtml = '上传已取消';
        }
    </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>

上一篇： 他是晚清时期最牛的江洋大盗 公然当着慈禧的面调戏她

下一篇： 炸肉要炸几分钟？还有哪些油炸美食？

推荐阅读