VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • 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.jb51.net/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的多文件上传进度条过程解析

    广而告之:
    热门推荐:
    WordPress数据库的基本构造及各表结构

    WordPress使用MySQL数据库。作为一个开发者,我们有必要掌握WordPress数据库的基本构造,并在自己的插件或主题中使用他们。 截至WordPress3.0,WordPress一共有以下11个表。这里加上了默认的表前缀 wp_ 。 wp_commentmeta:存储评论的元数据 wp_comments:存储评论 wp_···

    PHP图片处理之图片旋转和图片翻转实例

    图片的旋转和翻转也是Web项目中比较常见的功能,但这是两个不同的概念,图片的旋转是按特定的角度来转动图片,而图片的翻转则是将图片的内容按特定的方向对调。图片翻转需要自己编写函数来实现,而旋转图片则可以直接借助GD库中提供的imagerotate()函数完成。该函数的原型如下···

    用Php实现链结人气统计

    首先要说明:这个不是主页计数器,虽然原理和它相同。                               一:准备一个计···

    JS实现图片转换成base64的各种应用场景实例分析

    本文实例讲述了JS实现图片转换成base64的各种应用场景。分享给大家供大家参考,具体如下: 网络上有很多片介绍通过js将图片转换成base64的文章,之所以再写这篇文章的原因时发现没有找到系统的介绍的文章,有的介绍如何实现本地项目的图片转码,有的介绍如何实现网络资源的图片···

    老生常谈ES6中的类

    前面的话 大多数面向对象的编程语言都支持类和类继承的特性,而JS却不支持这些特性,只能通过其他方法定义并关联多个相似的对象,这种状态一直延续到了ES5。由于类似的库层出不穷,最终还是在ECMAScript 6中引入了类的特性。本文将详细介绍ES6中的类 ES5近似结构 在ES5中没有类···

    CodeIgniter针对数据库的连接、配置及使用方法

    本文实例讲述了CodeIgniter针对数据库的连接、配置及使用方法。分享给大家供大家参考,具体如下: 1. 数据库: create database test; create table users( id int not null, name varchar(10), pwd varchar(10), email varchar(20) ) insert into users values(1,'shunping',···

    PHP 使用header函数设置HTTP头的示例解析 表头

    如下所示:复制代码 代码如下://定义编码  header( 'Content-Type:text/html;charset=utf-8 ');  //Atom  header('Content-type: application/atom+xml');  //CSS  header('Content-type: text/css');  //Javascript  header('Con···

    php单一接口的实现方法

    本文实例讲述了php单一接口的实现方法。分享给大家供大家参考。具体实现方法如下: <?php interface staff_i { function setID($id); function getID(); function setName($name); function getName(); } class staff implements sta···

    mysql允许外网访问以及修改mysql账号密码实操方法

    mysql的root账户,我在连接时通常用的是localhost或127.0.0.1,公司的测试服务器上的mysql也是localhost所以我想访问无法访问,测试暂停. 解决方法如下: 1,修改表,登录mysql数据库,切换到mysql数据库,使用sql语句查看"select host,user from user ;" mysql -u root -pvmwaremysql···

    深入理解基于vue-cli的vuex配置

    本文介绍了基于vue-cli的vuex配置,分享给大家,希望对大家有帮助 首先成功运行vue-cli项目 安装vuex cnpm i vuex --save 修改配置文件 store 新建文件夹store(与router同级)然后在store目录下新建index.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vu···