文件上传及时显示, 前端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 的一些功能相当类似