文件上传及时显示，前端js和后端php相互结合使用

最新推荐文章于 2021-04-15 08:42:23 发布

weixin_30901729

最新推荐文章于 2021-04-15 08:42:23 发布

阅读量377

点赞数

文章标签： php 前端后端 ViewUI

原文链接：http://www.cnblogs.com/sinosaurus/p/8685585.html

版权

文件读取

javascript

绑定文件上传变化事件 onchange

利用window对象 FileReader

调用方法 readerAsDataURL
- onload 方法异步读取

属性：files

获取到上传的文件 files[0]

  <form action="***.php" method="post" enctype="multipart/form-data" >
          <input type="file" name="img" id="pic" multiple>
          <img src="javascript:;" alt="">
      </form>
      <script>
          var pic = document.querySelector('#pic');
          pic.onchange = function() { //多文件同时显示
              for (var i = 0; i < pic.files.length; i++) {
                  var reader = new FileReader();
                  reader.readAsDataURL(pic.files[i]);
                  reader.onload = function(e) {
                      var img = document.createElement('img');
                      document.querySelector('form').appendChild(img);
                      img.src = e.target.result;
                  }
              }
          }
      </script>

php

form表单设置 metho='post' enctype="multipart/form-data'

前端
<form action="./morefile.php" method="post" enctype="multipart/form-data"> <input type="file" name="file[]" multiple accept="image/*"> <input type="submit" value="提交"> </form>

后端

单文件上传

多文件上传

单文件上传的判断条件 封装

  function judge($files, $url,$i) {
  //    mime类型判断
      $fileinfo = finfo_open(FILEINFO_MIME_TYPE);
      $fileResult = finfo_file($fileinfo, $files['tmp_name']);
  //    假设是相册判断
      $type = strchr($fileResult, '/', true);
      if ($type == 'image') {
          echo '文件类型符合';
      }
      //文件上传达到各类要求
      if ($files['error'] == 0 && is_uploaded_file($files['tmp_name'])) {
  //        给上传文件重新取名
          $str = strrchr($files['name'], '.');
          $newPath = $url.date('YmdHis-').mt_rand(100, 999).$str;
          if (move_uploaded_file($files['tmp_name'], $newPath)) {
              echo '上传成功';
          } else {
              echo $files[$i]['name'].'上传失败';
          }
      }
  }

数组降维这个每个里面都已经是单个文件的所有信息，可以调用方法进行判断
```
  $newArr = [];
  foreach($file as $k => $v) {
      foreach($v as $key => $value) {
          $newArr[$key][$k] = $value;
      }
  }
```
总结：
- php 和 JavaScript 的一些功能相当类似

转载于:https://www.cnblogs.com/sinosaurus/p/8685585.html