交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】

    本文实例讲述了jquery+ajax实现上传图片并显示上传进度功能。分享给大家供大家参考,具体如下:

    jquery上传文件用的formdata,上传进度条需要添加xhr的onprogress

    html代码如下:

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
      <title>Ding Jianlong Html</title>
      <link href="https://cdnjs.cloudflare.com/ajax/libs/layer/2.3/skin/layer.css" rel="external nofollow" rel="stylesheet">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/layer/2.3/layer.js"></script>
    </head>
    <body>
     <!-- 外层div 进度条的整体视觉和位置设置 -->
      <div style="width:300px;height: 20px;border: 1px solid #CCC;">
      <!-- 内层div 逐渐递增的进度条 -->
        <div id="jdt" style="height: 20px;"></div>
      </div>
      <p>总大小<span id="total"></span>;已上传<span id="loaded"></span>;</p><br>
      <form id="mainForm">
        选择文件:<input type="file" name="file">
        <input type="button" value="上传" onclick="upload()">
      </form>
    <script>
      var uploading = false;
     function upload(){
        //首先封装一个方法 传入一个监听函数 返回一个绑定了监听函数的XMLHttpRequest对象
        var xhrOnProgress=function(fun) {
          xhrOnProgress.onprogress = fun; //绑定监听
          //使用闭包实现监听绑
          return function() {
            //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
            var xhr = $.ajaxSettings.xhr();
            //判断监听函数是否为函数
            if (typeof xhrOnProgress.onprogress !== 'function')
              return xhr;
            //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
            if (xhrOnProgress.onprogress && xhr.upload) {
              xhr.upload.onprogress = xhrOnProgress.onprogress;
            }
            return xhr;
          }
        }
        var data = new FormData($('#mainForm')[0]); //要加【0】
        console.log(data);
        if(uploading){
          layer.alert("文件正在上传中,请稍候");
          return false;
        }
        $.ajax({
          type: 'POST',
          url: 'upload_file.php',  //当前路径
          data: data,
          dataType: 'json',
          processData: false,  //序列化,no
          contentType: false,  //不设置内容类型
          beforeSend: function(){
            uploading = true;
          },
          //进度条要调用原生xhr
          xhr:xhrOnProgress(function(evt){
            var percent = Math.floor(evt.loaded / evt.total*100);//计算百分比
            console.log(percent);
            // 设置进度条样式
            $('#jdt').css('width',percent * 3 + 'px');
            $('#jdt').css('background','skyblue');
            //显示进度百分比
            $('#jdt').text(percent+'%');
            $('#loaded').text(evt.loaded/1024 + 'K');
            $('#total').text(evt.total/1024 + 'K');
          }),
          success: function (data) {
            if (data.code == 200) {
              layer.msg(data.message, {icon: 1, time: 1000});
              //成功后关闭修改页
              setTimeout(function(){
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe的索引
                parent.layer.close(index);  //在执行关闭
              } ,2000);
              //还有刷新下iframe的界面
              parent.location.reload();
            } else {
              layer.msg(data.message, {icon: 2, time: 3000});
            }
            uploading = false;
          },
          error: function (data) {
            alert('服务异常,请稍后重试');
            console.log(data);
          }
        });
      }
    </script>
    </body>
    </html>
    
    

    php代码如下:

    <?php
    header('content-type:text/html;charset=utf-8');
    if ($_FILES["file"]["error"] > 0)
    {
     echo "Return Code: " . $_FILES["file"]["error"] . "<br />";
    }
    else
    {
     // 文件中文转码
     //iconv('utf-8', 'gbk', $_FILES["file"]["name"]);
      //取出后缀名
      $ext = strrchr($_FILES["file"]["name"],'.');
      move_uploaded_file($_FILES["file"]["tmp_name"],
       "upload/" . uniqid() . $ext);
      $arr['code'] = 666;
      $arr['message'] = "已经保存到: " . "upload/" . uniqid() . $ext;
      echo json_encode($arr);die;
    }
    
    

    参考资料: https://www.kunjuke.com/article/94853.htm

    更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jquery中Ajax用法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

    希望本文所述对大家jQuery程序设计有所帮助。

    您可能感兴趣的文章:

    • 基于HTML5 Ajax文件上传进度条如何实现(jquery版本)
    • jQuery progressbar通过Ajax请求实现后台进度实时功能
    • jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
    • jquery ajax实现文件上传功能实例代码
    • jQuery插件ajaxFileUpload异步上传文件
    • jQuery Ajax 上传文件处理方式介绍(推荐)
    • 一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
    • 基于jquery ajax的多文件上传进度条过程解析

    广而告之:
    热门推荐:
    MySQL 之压力测试工具的使用方法

    一、MySQL自带的压力测试工具——Mysqlslap mysqlslap是mysql自带的基准测试工具,该工具查询数据,语法简单,灵活容易使用.该工具可以模拟多个客户端同时并发的向服务器发出查询更新,给出了性能测试数据而且提供了多种引擎的性能比较。mysqlslap为mysql性能优化前后提供了直观的验···

    javascript-简单的日历实现及Date对象语法介绍(附图)

    知识点: 主要是对Date对象的使用。(下面的介绍内容来自网络) 创建 Date 对象的语法: var myDate=new Date() Date 对象会自动把当前日期和时间保存为其初始值。 参数形式有以下5种: new Date("month dd,yyyy hh:mm:ss");  new Date("month dd,yyyy"); new Date(y···

    php写的AES加密解密类分享

    今天写了一个php的AES加密类。适用于Yii的扩展。 如果不用在Yii框架中,把代码中Yii::app()->params['encryptKey'] 换成你对应的默认key就可以了。 类代码: <?php /** * php AES加解密类 * 如果要与java共用,则密钥长度应该为16位长度 * 因为java只支持128位···

    实现DEDE游客投稿方法

    网上看到不少朋友追问怎样实现dede游客投稿的方法: 先找到这三个文件 /member/article_add.php /member/article_add_action.php /member/archives_addcheck.php 1、把前两个文件里面的 引用 注释掉 //CheckRank(0,0);   2.、把/member/article_add_a···

    html中radio值的获取、赋值、注册事件示例详解

    1,radio分组 只要name一样,就是一组的,即一组中只能选择一个,如下: 复制代码 代码如下: <span>group1:</span> <input type="radio" id="radio1" checked="checked" name="group1" />radio1 <input type="radio" id="radio2" name="group1" />r···

    jQuery 自定义函数写法分享

    自定义主要通过两种方式实现$.extend({aa:function(){}});$.fn.extend({aa:function(){}});调用的方法分别是:$.aa();$($this).aa(); 注意:创建函数时不要放在 $(function() { }中,调用时候要放在事件里面$($this).click(function(){$.aa();}); jQuery.extend 函数详解JQuery···

    仿百度的关键词匹配搜索示例

    复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>关键词匹配搜索仿百度</title> <meta name="description" content=" 内容介绍不超过100个中···

    MVC4制作网站教程第一篇 绪论

    听说Win8和v2012发布,今天心血来潮重装了系统 感觉界面还是不错的。 安装一下vs2012学习一下mvc4,居然没找到Vs2012专业版破解的,干脆下载Express for Web ,算是支持正版吧! 509M很快就下载完,然后安装。 安装完界面,感觉跟vs2010还是有很多不同。 一兄弟说学习最好的方式···

    Javascript学习笔记之函数篇(五) : 构造函数

    Javascript 中的构造函数与其他语言相比也是不同的。任何通过关键字 new 调用的函数都可以当做构造函数。 在构造函数体内,this 指向新创建的对象。如果构造函数体内没有显示的 return 表达式,那么我们就默认返回 this,也就是新建的对象。 复制代码 代码如下: function Foo()···

    jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果

    复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动</title> <meta name="description" ···