Xuanmo Blog

废话扯一扯

一直使用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));

?>

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