上传下载文件
一，引入layui接口
下载layui 链接: 自己使用的layui
官方教程
<!--引入接口-->
<link rel="stylesheet" href="../../../../layui/css/layui.css" tppabs="http://layui/dist/css/layui.css?t=1632428048355" media="all">
<script src="../../../../layui/layui.js" tppabs="http://layui/dist/layui.js?t=1632428048355"></script>
二，前端页面
2.1，html中
使用form表单提交文件，
<form class="layui-form layui-form-pane" id="from" >
<div class=\"layuimini-container\">
<div class=\"layuimini-main\">
<fieldset class=\"table-search-fieldset\">
<legend>文件上传</legend>
<div style=\"margin: 10px 10px 10px 10px\">
<div class=\"layui-upload\">
<button type=\"button\" class=\"layui-btn layui-btn-primary layui-border-blue\" id=\"testList\"><i class=\"layui-icon layui-icon-file\"></i> 选择文件 </button>
<!--<button type=\"button\" class=\"layui-btn layui-btn-primary layui-border-green\" id=\"testListAction\"><i class=\"layui-icon layui-icon-upload\"></i> 开始上传 </button>-->
<button type=\"button\" class=\"layui-btn layui-btn-primary layui-border-black\" id=\"clearList\"><i class=\"layui-icon layui-icon-fonts-clear\"></i> 清空显示 </button>
<br><label style='color:red;'>单个文件大小<10MB(10000kb)，一次最多5个文件，否则系统不会保存； </label>
<br><label style='color:red;'>支持格式：jpeg, jpg, png, txt, xlsx, xls, ppt, pptx </label>
<div class=\"layui-upload-list\" style=\"max-width: 1280px;height: auto;min-height: 100px;\">
<table class=\"layui-table\">
<colgroup>
<col width=\"150\">
<col width=\"150\">
<col width=\"200\">
<col width=\"200\">
<col width=\"200\">
</colgroup>
<thead>
<tr>
<th>文件名</th>
<th>大小</th>
<th>上传状态</th>
<th>上传进度</th>
<th>操作</th>
</tr>
</thead>
<tbody id=\"demoList\"></tbody>
</table>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div class='layui-form-item'>
<button class='layui-btn' lay-submit='' id=\"testListAction\" lay-filter='demo1'>立即提交</button>
</div>
</form>
2.2，在js中
layui.use(['form','upload', 'element', 'layer'], function(){
var $ = layui.jquery
,form = layui.form
,upload = layui.upload
,element = layui.element
,layer = layui.layer;
//清空文件列表
$('#clearList').click(function(){
$('#demoList').html('');
});
//多文件上传
var uploadListIns = upload.render({
elem: '#testList' // 选择文件按钮
,elemList: $('#demoList') //列表元素对象
,url: '你的后端url.php?e_name=<?php echo $name; ?> ' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
,accept: 'file' //指定允许上传时校验的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）
,field:'file'
,method:'get'
,multiple: true //是否允许多文件上传。设置 true即可开启。不支持ie8/9
,number: 5 //设置同时可上传的文件数量，一般配合 multiple 参数出现; 0 不限制
,auto: false //是否选完文件后自动上传。如果设定 false，那么需要设置 bindAction 参数来指向一个其它按钮提交上传
,bindAction: '#testListAction' //指向一个按钮触发上传，一般配合 auto: false 来使用
,choose: function(obj){ //选择文件后的回调函数。返回一个object参数
var that = this;
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//读取本地文件
obj.preview(function(index, file, result){
console.log(index);
var tr = $(['<tr id="upload-'+ index +'">'
,'<td>'+ file.name +'</td>'
,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
,'<td>等待上传</td>'
,'<td><div class="layui-progress" lay-filter="progress-demo-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
,'<td>'
,'<button type="button" class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
,'<button type="button" class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
,'</td>'
,'</tr>'].join(''));
//单个重传
tr.find('.demo-reload').on('click', function(){
obj.upload(index, file);
});
//删除
tr.find('.demo-delete').on('click', function(){
delete files[index]; //删除对应的文件
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
});
that.elemList.append(tr);
element.render('progress'); //渲染新加的进度条组件
});
}
,done: function(res, index, upload){ //成功的回调
var that = this;
if(res.code == 0){ //上传成功
var imgsrc=res.imgsrc;
var thumbsrc=res.thumbsrc;
document.getElementById("imgsrc").value = imgsrc;
document.getElementById("imgpreview").src = thumbsrc;
var tr = that.elemList.find('tr#upload-'+ index)
,tds = tr.children();
// tds.remove();
tds.eq(2).html('<span style="color:green;">上传成功</span>') //显示上传成功
tds.eq(3).html(''); //清空操作
delete this.files[index]; //删除文件队列已经上传成功的文件
}
else if(res.code == 1)
{
var tr = that.elemList.find('tr#upload-'+ index)
,tds = tr.children();
// tds.remove();
tds.eq(2).html('<span style="color:green;">写入失败</span>') //显示上传成功
tds.eq(3).html(''); //清空操作
delete this.files[index]; //删除文件队列已经上传成功的文件
}else if(res.code == 2)
{
var tr = that.elemList.find('tr#upload-'+ index)
,tds = tr.children();
// tds.remove();
tds.eq(2).html('<span style="color:green;">文件过大</span>') //显示上传成功
tds.eq(3).html(''); //清空操作
delete this.files[index]; //删除文件队列已经上传成功的文件
}else{
this.error(index, upload);
}
}
,allDone: function(obj){ //多文件上传完毕后的状态回调
console.log(obj)
}
,error: function(index, upload){ //错误回调
var that = this;
var tr = that.elemList.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(2).html('<span style="color:red;">上传失败</span>') //显示上传成功
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
}
,progress: function(n, elem, e, index){ //注意：index 参数为 layui 2.6.6 新增
element.progress('progress-demo-'+ index, n + '%'); //执行进度条。n 即为返回的进度百分比
}
});
})
三，php后台接收文件流
php接收到是一个数组 $_FILES[][] ，也可以携带参数 使用method:'get’来设置。
$_FILES["file"]["name"] //文件名
$_FILES['file']['tmp_name']// 存储在服务器的文件的临时副本的名称
$_FILES["file"]["error"]//传输错误代码
$_FILES["file"]["size"]//传输文件大小 以字节计
$_FILES['file']['type']//传输文件类型
3.1，保存文件
3.1.1，先判断文件是否传输成功 用$_FILES[“file”][“error”]；通常使用switch语句实现
switch($_FILES["file"]["error"])
{
case 0:
echo "文件接收完成";
break;
case 1:
echo "更改php.ini文件所能上传文件的大小";
break;
case 2:
echo "upload file is to large";
break;
case 3:
echo "部分上传";
break;
case 4:
echo "没有上传任何文档";
break;
default:
echo "上传失败";
3.1.2，再判断选择的文件是否是需要的文件类型
in_array(mixed $needle , array $haystack [, bool $strict = FALSE ])
如果在数组中找到值则返回 TRUE，否则返回 FALSE。
| 参数 | 描述 |
|---|---|
| needle | 必需。规定要在数组搜索的值。 |
| haystack | 必需。规定要搜索的数组。 |
| strict | 可选。如果该参数设置为 TRUE，则 in_array() 函数检查搜索的数据与数组的值的类型是否相同。 |
$allowedExts = array( "jpeg", "jpg", "png", "txt", "xlsx", "xls", "ppt", "pptx");
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp); // 获取文件后缀名
in_array($extension, $allowedExts); //找到匹配项
3.1.3，最后保存文件：
1，可以移动文件，远程移动到服务器本地，使用php函数move_uploaded_file(file,newloc)，将文件移动到新位置，如果成功该函数返回 TRUE，如果失败则返回 FALSE;
注意:相同文件名，文件类型将会被覆盖。
| 参数 | 描述 |
|---|---|
| file | 必需。规定要移动的文件。 |
| newloc | 必需。规定文件的新位置。 |
$uploaded_file=$_FILES['file']['tmp_name'];
$move_to_file="./xxxx/xxx/";
move_uploaded_file($uploaded_file,iconv("utf-8","gb2312",$move_to_file));
2，将文件上传到MySQL中，返回给前端的json好像有特殊要求；有了解的可以和我说下。
$name = $dbLink->real_escape_string($_FILES['file']['name']);
$mime = $dbLink->real_escape_string($_FILES['file']['type']);
$data = $dbLink->real_escape_string(file_get_contents($_FILES['file']['tmp_name']));
$size = intval($_FILES['file']['size']);
// Create the SQL query
$query = "INSERT INTO `ufile` (`file_name`, `mime`, `file_size`, `file_data`, `created`)
VALUES ('$name', '$mime', '$size', '$data', NOW() )";
$dbLink = new mysqli('127.0.0.1', 'root', 'xxx', 'databases');
if(mysqli_connect_errno()) {
die("MySQL connection failed: ". mysqli_connect_error());
}
// Execute the query
$result = $dbLink->query($query);
// Check if it was successfull
if($result) {
echo "{".'"code": 0,'. '"msg": "'.$_GET[imgpath].'",'.'"imgsrc": "'.$imgsrc.'",'. '"data"'.":".$json."}";
}
else {
echo "{".'"code": 1,'. '"msg": "0",'.'"imgsrc": "'.$imgsrc.'",'. '"data"'.":".$json."}";
}
四，下载文件前端页面
通过点击图片或者文字就可以下载对应的文件。
//$row->file_name//文件名
//$head_name//无关
//$row->id//数据库中文件对应的id值
echo "
<div class='layui-col-md4'>
<div class=\"layuimini-container\">
<div class=\"layuimini-main\">
<fieldset class=\"table-search-fieldset\">
<legend>$head_name</legend>";
while ($row = mysqli_fetch_object($result))
{
echo "
<div class=\"polaroid\">
<a href=\"download.php?id= $row->id\" target=\"_blank\" title='$row->file_name'>
<img width=\"100%\" height=\"100px\" src=\"../../../images/file.jpeg\" alt=\"$row->file_name\" > </a>
<div class=\"container1\">
<p><a href=\"download.php?id= $row->id\" title='$row->file_name' target=\"_blank\">$row->file_name</a></p>
</div>
</div> ";
}
echo "
</fieldset>
</div>
</div>
</div>";
五，下载文件后端实现
创建文件 download.php
//$row->mime //文件类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下载</title>
</head>
<body>
<?php
$conn = mysqli_connect("localhost", "root", "", "databases");
$sql = "SELECT * FROM `ufile` WHERE `id` = " . $_GET["id"];
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) == 0)
{
die("File does not exists.");
}
$row = mysqli_fetch_object($result);
header("Content-length: $row->file_size");
header("Content-type: $row->mime");
header("Content-Disposition: attachment; filename=$row->file_name");
ob_clean();
flush();
echo $row->file_data;
mysqli_close($conn);
exit;
?>
</body>
</html>
以上，有问题评论私信，看见即回！
1927
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
