专栏首页前端开发随笔jQuery实现上传文件获取进度条

jQuery实现上传文件获取进度条

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>上传文件</title>
</head>

<body>
   <input type="file" id="upload" />
  <!-- accept="image/*" -->
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    $("#upload").change(function (link) {
        var file = link.target.files[0];
        var formData = new FormData();
        formData.append("file", file);
        formData.append("key", "Gn15XGagWO");
        $.ajax({
            url: "upload",
            type: "post",
            data: formData,
            dataType: 'json',
            contentType: false,
            processData: false,
			xhr: function () {
                var xhr = $.ajaxSettings.xhr();
                if (onprogress && xhr.upload) {
                    xhr.upload.addEventListener("progress", onprogress, false);
                    return xhr;
                }
            },
            success: function (res) {
            }
        })
    })
  function onprogress(evt) {
        console.log(evt)
        var loaded = evt.loaded;     //已经上传大小情况 
        var tot = evt.total;      //附件总大小 
        var per = Math.floor(100 * loaded / tot);  //已经上传的百分比 
        console.log(loaded)
        console.log(tot)
        console.log(per)
  }
</script>

</html>

ajax请求记得要加这两句

contentType: false, processData: false,

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue使用transition组件动画效果

    wePanda
  • Vue上传头像到服务器加回显照片

    wePanda
  • Js传对象数组样式给后台

    wePanda
  • springMVC+ajax 文件上传 带进度条

    肖哥哥
  • 位运算总结

    用了那么多位运算,这里总结一下把。 先看常用的位运算有哪些吧: 1 & a&b 就是a的二进制形式与b的二进制形式,相同的位置必须两个都是1,那么结果...

    ShenduCC
  • win10 uwp 动画移动滑动条的滑块 拿到事件判断是否点击记录之前的值动画

    堆栈网小伙伴问如何点击滑动条的时候,可以通过动画将滑块从原来的坐标移动到用户点击的坐标,同时用户拖动的时候不做动画 在后台代码添加两个事件,一个是按下,一个抬起...

    林德熙
  • 【技巧】ionic后FileTransfer时代的文件传输

    FileTransfer是常用的Codrodva插件之一,在过去的几篇文章中都能看到它的身影:

    IT晴天
  • 深入浅出CMake(二):基础语法及实现九九乘法表

    在《深入浅出CMake(一):基础篇》文章中,我们已经知道了怎么依葫芦画瓢编写简单的 CMake 构建文件了,但如果应对复杂的工程的话,这还是远远不够的。

    Frank909
  • 深入浅出AQS之共享锁模式

    原文链接:https://www.jianshu.com/p/1161d33fc1d0

    天涯泪小武
  • Android实现滑动侧边栏

    在Android应用开发中,滑动侧边栏经常使用,今天我也试着自己进行了一个简单的实践,虽然功能还不是很强大,但是可以保留下来为以后的开发使用,有需要时在进行简单...

    砸漏

扫码关注云+社区

领取腾讯云代金券