jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】


Posted in jQuery onJune 06, 2019

本文实例讲述了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://3water.com/article/94853.htm

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

jQuery 相关文章推荐
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
jQuery 筛选器简单操作示例
Oct 02 jQuery
jQuery实现电梯导航模块
Dec 22 jQuery
jQuery操作cookie的示例代码
Jun 05 #jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 #jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 #jQuery
一文快速了解JQuery中的AJAX
May 31 #jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 #jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 #jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 #jQuery
You might like
PHP学习笔记之二 php入门知识
2011/01/12 PHP
PHP SPL标准库之SplFixedArray使用实例
2015/05/12 PHP
PHP的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
ThinkPHP开发--使用七牛云储存
2017/09/14 PHP
php实现推荐功能的简单实例
2019/09/29 PHP
laravel7学习之无限级分类的最新实现方法
2020/09/30 PHP
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
jQuery获取节点和子节点文本的方法
2014/07/22 Javascript
javascript中Number对象的toString()方法分析
2014/12/20 Javascript
JavaScript 匿名函数和闭包介绍
2015/04/13 Javascript
浅谈下拉菜单中的Option对象
2015/05/10 Javascript
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
javascript实现获取浏览器版本、浏览器类型
2015/12/02 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
Angular PWA使用的Demo示例
2019/01/31 Javascript
countUp.js实现数字滚动效果
2019/10/18 Javascript
jQuery实现手风琴效果(蒙版)
2020/01/11 jQuery
JavaScript 异步时序问题
2020/11/20 Javascript
python中的代码编码格式转换问题
2015/06/10 Python
pip命令无法使用的解决方法
2018/06/12 Python
Python读取txt某几列绘图的方法
2018/10/14 Python
Python3.5运算符操作实例详解
2019/04/25 Python
通过python实现弹窗广告拦截过程详解
2019/07/10 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
通过python检测字符串的字母
2020/02/18 Python
CSS3 Flex 弹性布局实例代码详解
2018/11/01 HTML / CSS
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
金山毒霸系列的笔试题
2013/04/13 面试题
致百米运动员广播稿
2014/01/29 职场文书
2016年秋季运动会通讯稿
2015/11/25 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python