- GitHub克隆hdjs
- 配置
代码如下:
'upload' => [
'driver' => 'local',
'root' => 'uploadImages',
],
<link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<script>
window.hdjs={};
//组件目录必须绝对路径
window.hdjs.base = 'hdjs';
//上传文件后台地址
window.hdjs.uploader = '/upload?';
//获取文件列表的后台地址
window.hdjs.filesLists = '/filesLists?';
</script>
<script src="hdjs/require.js"></script>
<script src="hdjs/config.js"></script>
如果在Laravel等框架中使用组件,需要在标签中添加以下代码,这样可以实现框架的CSRF表单令牌验证。
<meta name="csrf-token" content="{{csrf_token()}}">
在route/web.php中添加上传方法路由
//上传图片路由
Route::any('/upload', 'UploadController@upload');
//已经上传路由图片地址
Route::any('/filesLists','UploadController@filesLists');
后台脚本
在app/http/Controllers创建UploadController类
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class UploadController extends Controller
{
//
public function upload(Request $request){
$file = $request->file('file');
if ($file->isValid()){
$path = $file->store(date('ymd'),'upload');
return ['file' => asset('/uploadImages/' . $path), 'code' => 0];
}
}
/**
*传提供选择以往上传文件的功能,后台需要返回文件列表数据
* 获取已经上传图片数据
* @return array
*/
public function filesLists(){
$files = glob('uploadImages/*/*');
foreach ($files as $f) {
$file = asset($f);
$data[] = [
'url' => $file,
'path' => $file,
'size' => filesize($f),
'name' => basename($f),
'createtime' => date('Y-m-d', filemtime($f)),
];
}
return ['data' => $data,'code'=>0, 'page' => []];
}
}
单图上传
<div class="col-sm-8">
<div class="input-group mb-1">
<input class="form-control form-control-sm" name="thumb" readonly="" value="">
<div class="input-group-append">
<button onclick="upImagePc(this)" class="btn btn-secondary" type="button">单图上传</button>
</div>
</div>
<div style="display: inline-block;position: relative;">
<img src="../image/nopic.jpg" class="img-responsive img-thumbnail" width="150">
<em class="close" style="position: absolute;top: 3px;right: 8px;" title="删除这张图片"
onclick="removeImg(this)">×</em>
</div>
</div>
<script>
require(['hdjs','bootstrap']);
//上传图片
function upImagePc() {
require(['hdjs'], function (hdjs) {
var options = {
multiple: false,//是否允许多图上传
//data是向后台服务器提交的POST数据
data: {name: '后盾人', year: 2099},
};
hdjs.image(function (images) {
//上传成功的图片,数组类型
$("[name='thumb']").val(images[0]);
$(".img-thumbnail").attr('src', images[0]);
}, options)
});
}
//移除图片
function removeImg(obj) {
$(obj).prev('img').attr('src', '../dist/static/image/nopic.jpg');//记得修改默认图片
$(obj).parent().prev().find('input').val('');
}
</script>