雅荷心语博客
雅荷心语
心之所向便是光
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 关注本站
    • 微信
    • 微博
    • 腾讯微博
    • Twitter
    • Facebook
    • RSS订阅
Hi, 请登录     我要注册     找回密码

获取上传文件实时进度条的尝试

2018-03-12 分类:前端之旅 / 后端之路 阅读(3420) 评论(0)

之前每次写项目, 一遇到这种需要获取进度条的, 大多数时间都是直接去找各种插件, 如果实在没有找到合适的, 就做一个假的进度条!

今天有点时间, 查了点资料, 做了一个使用jquery 上传文件获取进度的小例子!

首先,做一个简单的小表单

1
2
3
4
<form method="post" enctype="multipart/form-data" action="index.php">
    <input type="file" name="" placeholder="">
    <input type="button" name="" placeholder="" value="提交">
</form>

然后做点击事件处理及ajax处理,

其中有两个参数需要特别注意

1, processData用于对data参数进行序列化处理,默认值是true。默认情况下发送的数据将被转换为对象,如果不希望把File转换,需要设置为false,

2, 默认值为contentType = "application/x-www-form-urlencoded", 如果不设置这里, 我们的 后端 php 收不到文件数据, 查了一下资料:

因为对于上传文件,我们没有在使用原有的 http 协议,所以 multipart/form-data 请求是基于 http 原有的请求方式 post 而来的.那么来说说这个全新的请求方式与 post 的区别

  1. 请求头的不同,对于上传文件的请求,contentType = multipart/form-data是必须的,而 post 则不是,毕竟 post 又不是只上传文件~。
  2. 请求体不同。这里的不同也就是指前者在发送的每个字段内容之间必须要使用分界符来隔开,比如文件的内容和文本的内容就需要分隔开,不然服务器就没有办法正常的解析文件,而后者 post 当然就没有分界符直接以 name = “value”的形似发送。

contentType 必须false才会自动加上正确的Content-Type,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$('input[type="button"]').click(function () {
        var formData = new FormData();
        formData.append("catname", "我是一只喵");
        formData.append("age", 1);
        formData.append("userfile", $('input[type="file"]')[0].files[0]);
        console.log(formData)
        $.ajax({
            url: 'index.php',
            type: 'POST',
            processData: false,
            //必须false才会自动加上正确的Content-Type
            contentType : false ,
            data: formData,
            xhr: function(){
                var xhr = $.ajaxSettings.xhr();
                if(onprogress && xhr.upload) {
                    xhr.upload.addEventListener("progress" , onprogress, false);
                    return xhr;
                }
            },
            success:function (res) {
                console.log(res)
            },
        })
    })
    function onprogress(evt){
        var loaded = evt.loaded;     //已经上传大小情况
        var tot = evt.total;      //附件总大小
        var per = Math.floor(100*loaded/tot);  //已经上传的百分比
        $('#press').html(per+'%')
    }

然后我们选择一个较大的文件,查看上传进度!

webapp

至于php文件,简单的接收了一下上海传的数据!

1
2
3
4
5
6
7
8
9
10
11
12
<?php
/**
* Created by PhpStorm.
* User: iyahe@qq.com (天明)
* Date: 2018/3/12
* Time: 14:20
*/
 
print_r($_REQUEST['catname']);
print_r($_REQUEST['age']);
print_r($_REQUEST['userfile']);
print_r($_FILES);

 

分享到:更多 ()
标签:前端界面思路分析

相关推荐

  • 使用PHPExcel生成表格数据并下载
  • 关于微信小程序Websocket的一些小坑
  • 记录几个常用的HTML空格占位符
  • 简单理解vue的slot内容分发
  • vue 官方推荐Nuxt.js 服务端渲染尝试!
  • Electron 生成的桌面应用破解方法
  • 使用 Electron 打包桌面应用
  • vue-cli 实现后台实时编译修改
关于我

小天明 北京·朝阳 前端搬砖工程师

碎碎念):(来自公众号)

热门文章

  • 踩坑记录——iphone上safari开启隐身模式时localStorage变为只读-雅荷心语博客踩坑记录——iphone上safari开启隐身模式时localStorage变为只读2017-02-21评论(4)
  • 程序员是怎样一群人-雅荷心语博客程序员是怎样一群人2015-12-08评论(3)
  • 百度你个大毒瘤 - 吐糟博客这几天打不开事情-雅荷心语博客百度你个大毒瘤 – 吐糟博客这几天打不开事情2015-12-28评论(2)
  • PHP 非对称加密 openssl 加密及解密方法-雅荷心语博客PHP 非对称加密 openssl 加密及解密方法2016-05-17评论(2)
  • PHPStorm10 下载安装破解汉化-雅荷心语博客PHPStorm10 下载安装破解汉化2015-12-15评论(2)
2025年7月
一 二 三 四 五 六 日
« 六    
 123456
78910111213
14151617181920
21222324252627
28293031  

最新评论

  • 前端小武 8年前 (2017-04-06)说:
    我看到了layer
  • 丁艳平 8年前 (2017-03-03)说:
  • Dawn 9年前 (2016-09-16)说:
    call_user_func_array最后的例子是错哦,你用bc方法去调用类里 另外一个方法就知道问题所在了。情况1.调用非静态方法 第一个参数应该传[类的实例,调用方法] (既然有类实例了直接-&
  • Dawn 9年前 (2016-06-21)说:
    tp框架设置了全局捕获异常的,这也没什么。坑的是 他捕获了异常。然后全部返回404。。。不知道的 还以为自己网站被删除了
  • Dawn 9年前 (2016-05-17)说:
    构造函数里的判断 用异常机制可能更好一些

其他类型

  • 芊云全景
  • 配音兔AI配音神器

博客类型

  • 芊云全景
  • 配音兔AI配音神器

左邻右舍

  • 易水寒
  • 楼教主
  • 芊云全景
  • 贤心
  • 配音兔AI配音神器

雅荷心语博客 -心之所向便是光

联系我们关于我们

© 2025 雅荷心语博客   网站地图