js教程

Ajax实现文件上传进度条功能示例代码

我的站长站 2022-12-04 人阅读

1. HTML代码

<div class="form-group required">
    <label class="col-sm-3 control-label">文件名:</label>
    <div class="col-sm-6">
        <input id="fileName" name="fileName" class="form-control" type="text">
        <div class="progress-div">
            <span id="progress"></span>
        </div>
    </div>
    <input id="file-btn" class="btn btn-warning" type="button" value="上传文件" onclick="$('input[id=rel_file]').click()">
</div>

2. CSS样式

.progress-div{
    width: 100%;
    height: 20px;
    background-color: #ffffff;
}
#progress{
    height: 20px;
    background-color: #1d9e7d;
    display: inline-block;
}

3. js代码

function save() {
    $('#submitBtn').attr('disabled',true);
    parent.layer.msg("正在上传,请稍后 ...");
    var data = new FormData($('#DatumForm')[0]);
    var url = irsCtxPath + "/biz/datumSave/upload";
    doUpload(data, url, uploadSuccess, 'progress');
    $('#submitBtn').attr('disabled',false);
}
// 上传成功后的回调函数
function uploadSuccess(data) {
    if (data.code == 0) {
        parent.layer.msg("操作成功");
        parent.reLoad();
        var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
        parent.layer.close(index);
    } else {
        parent.layer.alert(data.msg);
    }
}
// 上传
function doUpload(data, url, callBack, progressId) {
    $.ajax({
        url: url,
        type: "POST",
        data: data,
        xhr: function(){ //获取ajaxSettings中的xhr对象,为它的upload属性绑定progress事件的处理函数
            var myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){ //检查upload属性是否存在
                //绑定progress事件的回调函数
                myXhr.upload.addEventListener('progress',function(e) {progressHandlingFunction(e, '#' + progressId)}, false);
            }
            return myXhr; //xhr对象返回给jQuery使用
        },
        success : function(data) {
            callBack(data);
        },
        processData:false,
        contentType:false
    });
}
//上传进度回调函数:
function progressHandlingFunction(e, progressId) {
    if (e.lengthComputable) {
        $(progressId).attr({value : e.loaded, max : e.total}); //更新数据到进度条
        var percent = e.loaded/e.total*100;
        if (percent < 100) {
            $(progressId).html(" 正在努力上传中,已完成 " + percent.toFixed(2) + "%");
        } else {
            $(progressId).html(" 已完成 ");
        }
        $(progressId).css('width', percent.toFixed(2) + "%");
    }
}
相关推荐
  • js代码
  • 上传文件
  • AJAX
  • js指定时间定时自动执行代码分享

    示例代码用的`setTimeout()`函数,在指定的时间后执行。代码非常的简单,获取当前时间和设定一个指定时间,指定时间减去当前时间就是定时的时间,如果定时器到期时等于0,就代表时间到了,就运行executeAtTime函数的方法。function executeAtTime() { console....

    js教程 40 5个月前
  • JS代码解除网页右键限制

    JS解除右键限制方法一javascript:(function () {function R(a) {ona = "on" + a;if (window.addEventListener){window.addEventListener(a, function (e) {for (var n = e.originalTarget; n; n = n.parentNode){n[ona] = null;}}, true);}window[o...

    js教程 165 3年前
  • 淘宝买家秀API+ajax代码

    淘宝买家秀API+ajax代码,用的是这个API,https://api.66mz8.com/api/rand.tbimg.php?format=jsonJSON返回格式,测试依旧可用。$(function(){ $.get('https://api.66mz8.com/api/rand.tbimg.php?format=json',function(data){ document.getElementB...

    js教程 701 3年前
  • nginx宝塔面板上传文件环境配置方法

    在使用nginx系统的宝塔面板开发上传或下载文件功能时,需要首先要配置下载nginx或PHP的参数。否则上传下载大文件时,总是报错,上传小一点的文件,就不报错。修改nginx配置打开nginx管理界面,看到“性能调整”,主要修改连接超时、最大上传文件大小,其他的也可...

    宝塔面板 49 1年前
  • DISCUZ升级后不显示“选择文件上传”按钮

    小编自己的discuz论坛由于不是最新版本,每次登陆论坛都会频繁的有升级提示,这次由于小编手贱了一下下,点击了升级flash player 14。最终导致小编的论坛中就再也看不到:选择文件上传“那个按钮了,图片添加到帖子内容中上方没有:选择文件上传”。这个解决方...

    discuz教程 383 7年前
  • 宝塔面板修改PHP文件上传大小
    宝塔面板修改PHP文件上传大小

    宝塔面板修改PHP文件上传大小很简单,直接打开宝塔面板WEB端进入软件商店选择已经安装且正在使用的PHP版本号点击设置->配置文件搜索post_max_size修改后面的值(自己需要多少就改成多少,切勿过大,防止...

    宝塔面板 370 3年前
  • 帝国CMS表单如何使用ajax提交?

    自己做了个表单提交,但是form的转跳页面提示,想做成ajax根据返回信息提示。ajax提交思路代码var data = $(&#39;#form&#39;).serialize(), url = $(&#39;#form&#39;).attr(&#39;action&#39;); $.ajax({ method:"POST...

    帝国cms教程 275 4年前
  • wordpress Ajax无限加载插件-Quick Ajax2.3.1[英文版]
    wordpress Ajax无限加载插件-Quick Ajax2.3.1[英文版]

    Quick Ajax插件说明使用此插件,你可以在你的主题里实现无限加载文章来代替传统的分页模式。提供多种列表模式:瀑布流、传统文章模式、时间轴等。wordpress加载主要功能外观设置选择布局:经典(列表)或...

    wordpress插件 491 4年前
  • wordpress实现文章的ajax无限加载

    刚学习wordpress 写一个网站的文章的无限加载,本来想的好难啊,但是真的自己写了之后感觉真的挺简单的,所以啊一定要做一下小小的总结:首先你要确定你的wordpress的jQuery功能能用你可以在header.php里wp_head();前面加上wp_enqueue_script(&#39;jquery&#...

    wordpress教程 220 4年前
最新更新
  • js截取字符串教程

    slice()方法接受两个参数,起始索引和结束索引(可选)。它返回从起始索引到结束索引(不包括结束索引)之间的子字符...

    js教程 1个月前
  • find findIndex indexOf索引选择器使用方法

    find使用方法find方法是ES6引入的一种数组方法,可以用来查找数组中符合条件的元素。语法是:array.find(callba...

    js教程 2个月前
  • js复制网页内容教程

    Async Clipboard API方法HTML5新增的方法,无需引入第三方插件,直接就可以复制内容。低版本的浏览器可能会不兼...

    js教程 2个月前
  • js获取字符长度函数分享

    js获取字符长度函数function objLen(str) { if (str == null) return 0; if (typeof str != "string") { ...

    js教程 2个月前
  • 网站LED跑马灯效果广告代码

    网站可以看到很多的论坛网站都会用到这种网站LED跑马灯效果,这种效果实现也很简单,分享给大家。LED跑马灯效果...

    js教程 3个月前