Ajax progress事件+php实现上传文件显示进度条

轩陌

分类: 实战案例 1360 2

废话扯一扯

一直使用jQuery的ajax,对原生ajax也不了解,也没有做过ajax文件上传功能,最近把静态资源CDN换成了又拍云,想实现一下前端上传文件功能,奈何php不是很懂,看又拍云给的文档和demo,做上传进度显示,有不完美的地方,只能又把这个演示demo的文件放在博客的服务器上边,这个功能也是坑了我一下,先进入正题。

 

API

XMLHttpRequest.upload.progress: 获取上传实时进度的事件,这是一个持续触发的事件,也是在这里被狠狠的坑了一把,更多资料链接>>

 

new FormData(): 使用方法先创建一个FormData对象,然后通过调用它的append()方法添加字段,key->value,更多资料链接>>具体方法如下:


// 单文件上传方法
var data = new FormData();
data.append('file', document.querySelector('input[type="file"]').files[0]);

 

多文件上传方法:file控件添加multiple属性即可选中多个文件,下边为js处理


var aFiles = document.querySelector('#file');
for (var i = 0; i < aFiles.files.length; i++) {
  data.append('file['+ i +']', aFiles.files[i]);
}

在控制台打印每个files对象可以获取到文件的一些基本信息,如下图所示:

 

完整demo源码


<div class="wrap container">
  <form action="" method="post" enctype="multipart/form-data">
    <label for="file">选择文件:</label>
    <input type="file" name="file" id="file" accept="image/png,image/gif,image/jpeg" multiple />
    <br/>
    <input type="button" name="submit" value="开始上传"/>
  </form>
  <div class="progress">
    上传进度条,偷个懒,用progress标签来做:<progress min="0" max="100" value="0">0% complete</progress>
  </div>
  <div class="m-t-10px current-pro">实时上传信息:</div>
  <div class="m-t-20px res"></div>
</div>

 


var oProgress = document.querySelector('progress'),
  oRes = document.querySelector('.res'),
  oCurrent = document.querySelector('.current-pro'),
  oFile = document.querySelector('#file');
var data = new FormData();
oFile.onchange = function() {
  oProgress.value = '';
  oCurrent.innerHTML = '实时上传信息:';
  for (var i = 0; i < oFile.files.length; i++) {
    if (oFile.files[i].size / 1024 > 1024) {
      alert('请上传小于1024Kb的图片!');
    } else
      data.append('file['+ i +']', oFile.files[i]);
  }
}
document.querySelector('input[type="button"]').onclick = function() {
  if (oFile.value == '') {
    alert('请选择文件!');
  } else
    ajax({
      url: 'xm_upload.php',
      type: 'POST',
      dataType: 'json',
      data: data,
      progress(loaded, total) {
        oProgress.value = loaded / total * 100;
        oCurrent.innerHTML = '实时上传信息:' + (loaded / total * 100).toFixed(0) + '% ' + loaded + ' Byts; ' + total + ' Byts';
      },
      success(res) {
        oFile.value = '';
        res.forEach(function(curr) {
          var oImg = new Image();
          oImg.src = curr.path;
          oRes.appendChild(oImg);
        });
      },
      error(err) {
        console.log(err);
      }
    });
}

 


<?php
  header('Content-type:text/json');
  date_default_timezone_set("PRC");

  for($i = 0; $i < count($_FILES["file"]['name']); $i++){

    // 上传文件大小
    $fileSize = filesize($_FILES["file"]["tmp_name"][$i]);

    // 截取后缀名
    $fileEx = strtolower(substr(strrchr($_FILES["file"]["name"][$i], "."), 1));

    // 生成随机文件名
    $fileName = date("YmdHis") . substr(md5($_FILES["file"]["name"][$i]), 0, 6) . "." . $fileEx;

    // 移动文件到指定目录
    move_uploaded_file($_FILES["file"]["tmp_name"][$i], "upload/" . $fileName);

    // 输出结果
    $result[$i] = array(
      "name"  => urlencode($fileName),
      "size"  => ceil($fileSize / 1024) . "Kb",
      "type"  => urlencode($_FILES["file"]["type"][$i]),
      "path"  => urlencode("upload/" . $fileName),
      "code"  => 2
    );

  }

  echo urldecode(json_encode($result));

?>

所有文章评论的贴图功能做了拖拽上传

  • 7人 Love
  • 1人 Haha
  • 1人 Wow
  • 0人 Sad
  • 1人 Angry
ajax上传文件、ajax多文件上传、ajax进度条事件

作者简介:轩陌

打赏

生命的意义在于折腾。

共 2 条评论关于 “Ajax progress事件+php实现上传文件显示进度条”

Loading...