由于大量机器人刷广告本文已经禁止评论
由于本代码PHP上传部分是由PHP代码写得而不是用的框架写得,所以大部分情况可以直接用,有特殊情况的请自行修改。
因为要实现增删改查所以文件上传后会赋值到隐藏的input框里
代码后台部分:
public function upload_images(Request $request)//上传图片,多图上传
{
$file = $_FILES["file"];
if ($file==null) {
exit(json_encode(array('code'=>1, 'msg'=>'未上传图片')));
}
// 获取文件后缀
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp);
// 判断文件是否合法
if(!in_array($extension, array("gif","jpeg","jpg","png"))){
exit(json_encode(array('code'=>1, 'msg'=>'上传图片不合法')));
}
//创建文件夹获取当前年月日
$folder="/mstyle/upload/images/".date('Y-m-d');
if(!is_dir('.'.$folder)){
mkdir('.'.$folder,0777);//创建年+月的文件夹权限为最高
}
$info = move_uploaded_file($file['tmp_name'], '.'.$folder.'/'.$file['name']); //移动文件到指定目录 建议文件名自己在修改一下
$img = $folder.'/'.$file['name'];
exit(json_encode(array('code'=>0, 'msg'=>$img)));
}
public function upload_files(Request $request)//文件上传
{
$file = $_FILES["file"];
if ($file==null) {
exit(json_encode(array('code'=>1, 'msg'=>'未上传图片')));
}
// 获取文件后缀
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp);
// 判断文件是否合法
if(!in_array($extension, array("gif","jpeg","jpg","png"))){
exit(json_encode(array('code'=>1, 'msg'=>'上传文件不合法')));
}
//创建文件夹获取当前年月日
$folder="/mstyle/upload/files/".date('Y-m-d');
if(!is_dir('.'.$folder)){
mkdir('.'.$folder,0777);//创建年+月的文件夹权限为最高
}
$info = move_uploaded_file($file['tmp_name'], '.'.$folder.'/'.$file['name']); //移动文件到指定目录 建议文件名自己在修改一下
$img = $folder.'/'.$file['name'];
exit(json_encode(array('code'=>0, 'msg'=>$img)));
}
可以看到两个方法几乎一样,那是因为当时写的时候只上传图片进行了测试,正常情况下上传文件需要修改判断文件类型那里
前端代码:
<div class="layui-form-item">
<div class="layui-upload">
<button type="button" class="layui-btn up-button" id="test2">多图片上传</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;height: 142px; width: 75%; margin-left: 25px;">
预览图:
<div class="layui-upload-list" id="demo2" ></div>
</blockquote>
</div>
</div>
<div class="layui-form-item">
<div class="layui-upload">
<button type="button" class="layui-btn layui-btn-normal up-button" id="testList">选择多文件</button>
<div class="layui-upload-list" style="margin-left:25px">
<table class="layui-table">
<thead>
<tr><th>文件名</th>
<th>大小</th>
<th>状态</th>
<th>操作</th>
</tr></thead>
<tbody id="demoList"></tbody>
</table>
</div>
<button type="button" class="layui-btn up-button" id="testListAction">开始上传</button>
</div>
</div>
前端代码(表单修改 我用的laravel):
<div class="layui-form-item">
<div class="layui-upload">
<button type="button" class="layui-btn up-button" id="test2">多图片上传</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px; height: 142px;">
预览图:
<div class="layui-upload-list" id="demo2" >
@if($contentList['images'])
@foreach($contentList['images'] as $v)
<div style="float: left;">
<img src="{{$v}}" alt="{{$v}}" class="layui-upload-img up-img">
<input type="hidden" name="images[]" value="{{$v}}">
<button onclick="del(this)">x</button>
</div>
@endforeach
@endif
</div>
</blockquote>
</div>
</div>
<div class="layui-form-item">
<div class="layui-upload">
<button type="button" class="layui-btn layui-btn-normal up-button" id="testList">选择多文件</button>
<div class="layui-upload-list" style="margin-left:25px">
<table class="layui-table">
<thead>
<tr><th>文件名</th>
<th>大小</th>
<th>状态</th>
<th>操作</th>
</tr></thead>
<tbody id="demoList">
@foreach($contentList['files'] as $v)
<tr>
<td>{{$v}}</td>
<td>未知</td>
<td><span style="color: #5FB878;">已上传</span></td>
<td>
<button type="button" class="layui-btn layui-btn-xs layui-btn-danger demo-delete" onclick="delfile(this)">删除</button>
<input type="hidden" value="{{$v}}" name="files[]">
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<button type="button" class="layui-btn up-button" id="testListAction">开始上传</button>
</div>
</div>
JS部分:
<script>
layui.use(['upload','jquery'],function () {
$ = layui.jquery;
var upload = layui.upload;
//执行实例
var uploadInst =
upload.render({
elem: '#test2'
,url: '/managea/upload_images' //改成您自己的上传接口
,multiple: true
,before: function(obj){
//预读本地文件示例,不支持ie8
// console.log(obj);
obj.preview(function(index, file, result){
// $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img up-img">')
});
}
,done: function(res){
//上传完毕
$('#demo2').append('<div style="float: left;"><img src="'+ res.msg +'" alt="'+ res.msg +'" class="layui-upload-img up-img""><input type="hidden" name="images[]" value="'+res.msg+'""><button onclick="del(this)">x</button></div>');
// $('#demo2').append('');
// $('#demo2').append('');
}
});
//常规使用 - 普通图片上传
upload.render({
elem: '#test1'
,url: '/managea/upload_images' //改成您自己的上传接口
,before: function(obj){
}
,done: function(res){
//如果上传失败
if(res.code > 0){
return layer.msg('上传失败');
}
//上传成功的一些操作
//……
$('#demoText').html('<img src="'+ res.msg +'" alt="'+ res.msg +'" class="layui-upload-img up-img">');
$( "input[name='image']").attr('value',res.msg )
}
,error: function(){
//演示失败状态,并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
}
});
//多文件列表示例
var demoListView = $('#demoList')
,uploadListIns = upload.render({
elem: '#testList'
,url: '/managea/upload_files' //改成您自己的上传接口
,accept: 'file'
,multiple: true
,auto: false
,bindAction: '#testListAction'
,choose: function(obj){
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
// console.log(files);
//读取本地文件
obj.preview(function(index, file, result){
var tr = $(['<tr id="upload-'+ index +'">'
,'<td>'+ file.name +'</td>'
,'<td>'+ (file.size/1024).toFixed(1) +'kb</td>'
,'<td>等待上传</td>'
,'<td>'
,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
,'<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 值,以免删除后出现同名文件不可选
});
demoListView.append(tr);
});
}
,done: function(res, index, upload){
if(res.msg){ //上传成功
var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
tds.eq(3).html('<input type="hidden" name="files[]" value="'+res.msg+'">'); //清空操作
return delete this.files[index]; //删除文件队列已经上传成功的文件
}
this.error(index, upload);
}
,error: function(index, upload){
var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
}
});
});
function del(params) {
var index = $("#demo2 button").index(params);
$("#demo2 div").eq(index).remove();
}
function delfile(params) {
var index = $("#demoList button").index(params);
$("#demoList tr").eq(index).remove();
}
</script>
评论