精华内容
参与话题
问答
  • 实现上传进度条

    2020-06-06 16:07:27
    JS文件上传,依靠 <input type="file">这个标签可以完成文件上传的操作,这里就不细说,这里主要说一下进度条的实现。 想要实现进度条我们需要了解一个对象 XMLHttpRequest ProgressEvent接口 这个接口有3个...

    JS文件上传,依靠

    <input type="file">这个标签可以完成文件上传的操作,这里就不细说,这里主要说一下进度条的实现。
    

    想要实现进度条我们需要了解一个对象 XMLHttpRequest ProgressEvent接口

    这个接口有3个属性,都是只读的。

    ProgressEvent.lengthComputable 表示当前的工作是否是可测量的,如果为false则loaded和total两个接口不可用,一般这个是true
    ProgressEvent.loaded 表示已完成的进度,只计算文件本身,不包括HTTP请求的开销
    ProgressEvent.total 表示当前工作的总量,只计算文件本身,不包括HTTP请求的开销
    下面直接上代码

    #bar-warp{
        width:500px;
        height:30px;
        border:1px solid green;
    }
    #bar{
        width:0px;
        height:30px;
        background:green;
    } 
    

    //进度条

    <div id="bar-warp">
    <div id="bar"></div>
    </div><span id="precent"></span><br/>
    <input type="file" name="pic" onchange="upfile();"/>
    
    function upfile() {
        var pic = document.getElementsByTagName('input')[0].files[0];
        var fd = new FormData();//利用FormData传参
        var xhr = new XMLHttpRequest();
        //xhr.setRequestHeader('token',sessionStorage.getItem('token'))加token
        xhr.open('post', '01.php', true);
        xhr.onreadystatechange = function () {
            //readystate为4表示请求已完成并就绪
            if (this.readyState == 4) {
                document.getElementById('precent').innerHTML = this.responseText;
                //在进度条下方插入百分比
            }
        }
        xhr.upload.onprogress = function (ev) {
            //如果ev.lengthComputable为true就可以开始计算上传进度
            //上传进度 = 100* ev.loaded/ev.total
            if (ev.lengthComputable) {
                var precent = 100 * ev.loaded / ev.total;
                console.log(precent);
                //更改进度条,及百分比
                document.getElementById('bar').style.width = precent + '%';
                document.getElementById('precent').innerHTML = Math.floor(precent) + '%';
            }
        }
        fd.append('pic', pic);//FormData传参
        xhr.send(fd);
    }
    

    1、js检测 ev.lengthComputable 进度并开始计算上传进度

    2、上传进度百分比= 100* ev.loaded/ev.total

    展开全文
  • 文件上传进度条源代码 博文链接:https://ljh2008.iteye.com/blog/223492
  • 大文件上传进度条实现

    千次阅读 2017-09-30 21:20:33
    大文件上传进度条实现

    大文件上传进度条实现

    1.FormData对象提交表单

    ​ 进行表单提交时,如果表单当中的域很多,使用DOM操作就比较麻烦。FormData可以一次性收集表单中的所有数据,包括文件域的数据,操作更方便。

    2.调整允许上传文件大小

    ​ 修改php.ini文件中允许POST表单上传的最大数据量:

    这里写图片描述

    ​ 修改php.ini文件中允许上传文件的最大大小:

    这里写图片描述

    3.onprogress事件

    ​ onprogress事件是 XMLHttpRequest的子对象XMLHttpRequestUpload中的一个事件,该事件大约每100ms向客户端返回一次数据,该数据中包含文件已上传大小loaded和总大小total。

    xhr.upload.onprogress = function(evt){
      console.log(evt);  //evt是onprogress事件的对象
    }

    4.进度条实现实例

    ​ 前台HTML页面:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <!-- 外层div 进度条的整体视觉和位置设置 -->
        <div style="width:300px;height: 20px;border: 1px solid #CCC">
        <!-- 内层div  逐渐递增的进度条 -->
            <div id="jdt" style="height: 20px"></div>
        </div><br>
        <form action="" method="post" id="mainForm">
            选择文件:
            <input type="file" name="f">
            <input type="button" value="上传" onclick="upload()">
        </form>
        <script type="text/javascript">
            function upload(){
                // 获取表单对象
                var fm = document.getElementById("mainForm");
                // 实例化FormData对象
                var fd = new FormData(fm);
                // 创建XMLHttpRequest对象
                var xhr = new XMLHttpRequest();
                // console.log(xhr);
                // 调用open方法准备ajax请求
                xhr.open('post','upfile.php');
    
                var jdt = document.getElementById('jdt');
                // 绑定onprogress事件
                xhr.upload.onprogress = function(evt){
                    // console.log(evt);
                    // toFixed修正结果,只保留小数点后两位
                    // 计算上传大小的百分比
                    percent = (evt.loaded / evt.total).toFixed(2);
                    // 设置进度条样式
                    jdt.style.width = percent * 300 + 'px';
                    jdt.style.background = 'skyblue';
                }
    
                xhr.onreadystatechange = function(){
                    if(xhr.readyState == 4){
                        alert(xhr.responseText);
                    }
                }
                // 发送ajax请求
                xhr.send(fd);
            }
        </script>
    </body>
    </html>

    ​ 后台PHP程序:

    <?php 
    if($_FILES['f']['error'] ==0 ){
        // echo $_FILES['f']['name'];
        // 将$_FILES['f']['name']字符串由参数1的字符集,转为参数2的字符集
        $name = iconv('utf-8','gb2312',$_FILES['f']['name']);
        // 如果不进行转换的话,中文会产生乱码。因为我们的程序用的是utf-8,而windows系统用的是gb2312
    
        //参数1: 临时存放路径
        //参数2: 永久保存路径
        if(move_uploaded_file($_FILES['f']['tmp_name'],$name)){
            echo "上传成功";
        }else{
            echo "上传失败";
        }
    }else{
        echo "上传出错";
    }
    展开全文
  • Ajax上传如何实现文件上传进度条

    千次阅读 2017-08-02 15:41:21
    <!DOCTYPE HTML> ; charset=utf-8"> 显示文件上传进度条</title>

    9.upload.html

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>显示文件上传进度条</title>
    <style>
    #div1 {width: 300px; height: 30px; border: 1px solid #000; position: relative;}
    #div2 {width: 0; height: 30px; background: #CCC;}
    #div3 {width: 300px; height: 30px; line-height: 30px; text-align: center; position: absolute; left: 0; top: 0;}
    </style>
    <script>
    window.onload = function(){
        var oBtn = document.getElementById('btn');
        var oMyFile = document.getElementById('myFile');
        var oDiv1 = document.getElementById('div1');
        var oDiv2 = document.getElementById('div2');
        var oDiv3 = document.getElementById('div3');
    
        oBtn.onclick = function() {
            //利用ajax发送必须要有一个ajax对象
            var xhr = new XMLHttpRequest();
    
            //监听上传事件
            xhr.onload = function(){
                //alert(1);
                //alert(this.responseText);//后端返回的数据
    
                //var d = JSON.parse(this.responseText);
                //alert(d.msg + ' : ' + d.url); //显示上传成功 并且显示文件路径
                alert('OK 上传完成');
            }
    
            //如果要实现上传进度条,则要使用上传进度对象
            var oUpload = xhr.upload;
            // alert(oUpload);//上传进度的事件对象
            // 上传过程中是连续被触发的 监控上传进度
            oUpload.onprogress = function(ev){
                //ev.total(要发送的总量)、ev.loaded(待发送的总量)
                console.log(ev.total + ' : ' + ev.loaded);
    
                var iScale = ev.loaded / ev.total;
                oDiv2.style.width = 300 * iScale + 'px';//显示上传进度
                oDiv3.innerHTML = iScale * 100 + '%'; //显示上传百分百
            }
    
            xhr.open('post','post_file.php',true); //open打开的方式不能使用get,上传文件的地址,使用异步上传
            //在使用post发送的时候必须要带一些请求头信息
            xhr.setRequestHeader('X-Request-With', 'XMLHttpRequest');
    
            //send要发送数据 
            //将要上传的数据转换成二进制数据
            //那么必须知道后端接收当前文件的名称是什么 然后后面带上当前文件的数据
    
            var oFormData = new FormData(); //通过FormData来构建提交数据
            oFormData.append('file',oMyFile.files[0]);
    
            xhr.send(oFormData);
        }
    }
    </script>
    </head>
    <body>
        <input type="file" id="myFile" /><input type="button" id="btn" value="上传" />
        <!-- 进度条 -->
        <div id="div1">
            <div id="div2"></div>
            <div id="div3">0%</div>
        </div>
    </body>
    </html>

    post_file.php

    <?php
    header('Content-type:text/html; charset="utf-8"');
    $upload_dir = 'uploads/';
    
    if(strtolower($_SERVER['REQUEST_METHOD']) != 'post'){
        exit_status(array('code'=>1,'msg'=>'错误提交方式'));
    }
    
    if(array_key_exists('file',$_FILES) && $_FILES['file']['error'] == 0 ){
    
        $pic = $_FILES['file'];
    
        if(move_uploaded_file($pic['tmp_name'], $upload_dir.$pic['name'])){
            exit_status(array('code'=>0,'msg'=>'上传成功','url'=>$upload_dir.$pic['name']));
        }
    
    }
    echo $_FILES['file']['error'];
    exit_status(array('code'=>1,'msg'=>'出现了一些错误'));
    
    function exit_status($str){
        echo json_encode($str);
        exit;
    }
    ?>

    Ajax最新标准请访问 https://www.w3.org/TR/XMLHttpRequest2/

    展开全文
  • 大文件上传进度条实现

    千次阅读 2019-01-28 15:22:56
    大文件上传进度条实现 1.FormData对象提交表单 ​ 进行表单提交时,如果表单当中的域很多,使用DOM操作就比较麻烦。FormData可以一次性收集表单中的所有数据,包括文件域的数据,操作更方便。 2.调整允许上传文件...

    大文件上传进度条实现
    1.FormData对象提交表单

    ​ 进行表单提交时,如果表单当中的域很多,使用DOM操作就比较麻烦。FormData可以一次性收集表单中的所有数据,包括文件域的数据,操作更方便。

    2.调整允许上传文件大小

    ​ 修改php.ini文件中允许POST表单上传的最大数据量:

    ​ 修改php.ini文件中允许上传文件的最大大小:

    3.onprogress事件

    ​ onprogress事件是 XMLHttpRequest的子对象XMLHttpRequestUpload中的一个事件,该事件大约每100ms向客户端返回一次数据,该数据中包含文件已上传大小loaded和总大小total。

    xhr.upload.onprogress = function(evt){
      console.log(evt);  //evt是onprogress事件的对象
    }
    1
    2
    3
    4.进度条实现实例

    ​ 前台HTML页面:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <!-- 外层div 进度条的整体视觉和位置设置 -->
        <div style="width:300px;height: 20px;border: 1px solid #CCC">
        <!-- 内层div  逐渐递增的进度条 -->
            <div id="jdt" style="height: 20px"></div>
        </div><br>
        <form action="" method="post" id="mainForm">
            选择文件:
            <input type="file" name="f">
            <input type="button" value="上传" οnclick="upload()">
        </form>
        <script type="text/javascript">
            function upload(){
                // 获取表单对象
                var fm = document.getElementById("mainForm");
                // 实例化FormData对象
                var fd = new FormData(fm);
                // 创建XMLHttpRequest对象
                var xhr = new XMLHttpRequest();
                // console.log(xhr);
                // 调用open方法准备ajax请求
                xhr.open('post','upfile.php');

                var jdt = document.getElementById('jdt');
                // 绑定onprogress事件
                xhr.upload.onprogress = function(evt){
                    // console.log(evt);
                    // toFixed修正结果,只保留小数点后两位
                    // 计算上传大小的百分比
                    percent = (evt.loaded / evt.total).toFixed(2);
                    // 设置进度条样式
                    jdt.style.width = percent * 300 + 'px';
                    jdt.style.background = 'skyblue';
                }

                xhr.onreadystatechange = function(){
                    if(xhr.readyState == 4){
                        alert(xhr.responseText);
                    }
                }
                // 发送ajax请求
                xhr.send(fd);
            }
        </script>
    </body>
    </html>

    展开全文
  • 真实的上传进度条

    千次阅读 2018-06-22 14:54:42
    前端代码:&lt;div class='form-group'&gt; &lt;label class='col-sm-2 control-label'&...上传图像:&lt;/label&gt; &lt;div class='col-sm-10'&gt; &lt;input type...
  • js实现文件上传—带进度条

    千次阅读 热门讨论 2016-07-19 22:00:30
    上篇博客主要介绍了用asp.net控件实现文件上传,但是还有一个问题 功能是实现了,但是有一个问题来了,上传图片还可以,但是上传视频的时候,因为视频比较大,上传的时间比较长,页面长时间无反应,用户体验度就...
  • 文件上传进度条(多种风格)

    千次阅读 2018-07-13 14:39:11
    文件上传进度条 多种风格 非常漂亮! 友好的提示 以及上传验证! 部分代码: &lt;form id="form1" runat="server"&
  • JS文件上传以及进度条实现

    万次阅读 2018-09-05 10:56:52
    JS文件上传,依靠 &lt;input type="file"&gt; 这个标签可以完成文件上传的操作,这里就不细说,这里主要说一下进度条的实现。 想要实现进度条我们需要了解一个对象 XMLHttpRequest ...
  • 因此,给用户提供一个文件上传进度条,是每一个尊重客户的程序员应做到的最起码的职业操守。 本文中包含的知识点包括:进度条的实现、本地文件读取到字节数组、ajax等。这些知识点都可以在容百川上传的资料中得到。
  • 上传一大大文件后,后台响应贼慢, 也不知道是卡死还是怎么滴,所以,上传进度条就出现。简单易用的上传进度条,点我,点我,快点我!
  • ajax上传文件以及实现上传进度条

    万次阅读 2018-02-06 14:54:43
    做微信企业号的时候,在‘我的日志'功能模块里边需要添加一个上传文件的功能,并且要显示上传过程中的进度条和提交后的文件名列表,于是做了基于ajax的文件上传,UI用的是MUI框架,后台是TP框架 前端代码如下: ...
  • 从我的项目中摘出来的,springboot项目,可以拎出来单独运行,全量所有的模块请查看https://gitee.com/zgdong/icustom-boot 如果单独运行请自行修改maven依赖
  • javaweb实现文件上传进度条功能

    千次阅读 2018-06-14 10:22:08
    一、创建帮助类package ...public class Progress { private long bytesRead;  private long contentLength; private long items; public long getBytesRead() { return bytesRead; } public v...
  • 在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件上传进度条,矢量在...
  • Ajax实现上传进度条

    2019-09-20 14:21:16
    Ajax实现上传进度条 为了方便测试:在php.ini中设置上传的最大值 upload_max_filesize = 1024M post_max_size = 1024M <style type="text/css"> #out{ width:300px; height: 20px; border: solid 1px #999...
  • JS模拟上传进度条 var bind = function(obj,func){  return function(){  func.apply(obj,arguments);  }; }; var uploadBAR=function(container){  container=(!docum
  • SpringMVC实现的文件上传进度条Bootstrap展示

    万次阅读 多人点赞 2016-07-05 16:07:05
    SpringMVC实现的文件上传进度条Bootstrap展示
  • java文件上传进度条实现基本原理

    热门讨论 2011-07-07 17:48:46
    该附件可以直接下载使用,体现文件上传进度条实现的基本技术以及原理
  • 网上实现 实时文件上传进度条 功能的代码很多,不过复杂程度有很大差别,方式也各种各样。作者遇到的情况是这样的:现有页面实现了分片文件上传功能和假的上传进度条,后续要求将进度条改为实时的。 找了一种改动...

空空如也

1 2 3 4 5 ... 20
收藏数 29,546
精华内容 11,818
关键字:

上传进度条