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

文件读取

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'

• 前端
  
  ```

```
* 后端
* 单文件上传
* 多文件上传
* 单文件上传的判断条件 `封装`

            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 的一些功能相当类似