laravel 框架使用hdjs 实现单图上传功能

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类

<?phpnamespace 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>

laravel 框架使用hdjs 实现单图上传功能相关推荐

利用策略模式结合alibaba/alpha框架优化你的图片上传功能
图片上传作为一个App经常用到的功能,项目中可以使用各种成熟的框架去完成,但往往实际的情况比想象的复杂.假设我们的上传功能需要满足下面的情况: 支持上传一张图支持上传多张图上传多张图时能获取到每张 ...
ssm框架结合Ajax实现图片上传功能
先上代码一.html代码 <div><img src="img/头像.png" alt="选择并上传头像" id="avatar_ ...
ueditor单图上传iframe跨域_UEditor单图上传（simpleupload）跨域问题解决方案
代码实现首先我们需要在ueditor.all.js文件中找到原本的单图上传部分的代码搜索关键字 simpleupload,如下图所示: 然后找到上传图片的代码片段,如下图所示: 然后把 domUt ...
jquery.form.js java_使用jQuery.form.js/springmvc框架实现文件上传功能
使用的技术有jquery.form.js框架, 以及springmvc框架.主要实现异步文件上传的同时封装对象,以及一些注意事项. 功能本身是很简单的,但是涉及到一些传递参数类型的问题.例如:jque ...
SSM框架基于Bootstrap fileinput 实现文件上传功能
SSM框架基于Bootstrap fileinput 实现文件上传功能 pom.xml文件的配置想要实现SSM框架实现多文件上传,必要的jar包必须要在pom.xml文件中引入.如下: <! ...
tinymce 多图上传，上传文件，上传视频，单图上传
tinymce 多图上传,上传文件,上传视频,单图上传参考材料引入插件单图上传,文件上传,图片上传多图上传参考材料 http://tinymce.ax-z.cn/more-plugins/a ...
vue文件上传功能bootstrap框架
vue文件上传功能bootstrap框架封装公共组件components/fileupload/FileUpload.vue 内容如下: 公共组件 ```html <template>& ...
ElementUI实现el-upload单图上传
头像上传上传图片的时候遇到该上传的图片应该是单图上传的,比如头像.如果想要上传一张图片之后就不让上传了,这时候应该咋办? 单图上传的两种解决方法为啥是两种,因为我目前只会两种... 第一种: &l ...
uniapp、uview——图片上传（单图上传、多图上传、多组照片上传、图片回显）
一.简介 uView组件的上传功能,单图上传.多图上传等. 官方文档地址: https://www.uviewui.com/components/upload.html 二.步骤 (一)单图上传 1. ...
element ui图片上传-实现单图上传
1. 业务需求: 需要把多图上传的效果改造成为单图上传的效果 2. 效果展示 (1) 原来官网效果: https://element.eleme.cn/2.0/#/zh-CN/component/up ...

laravel 框架使用hdjs 实现单图上传功能

laravel 框架使用hdjs 实现单图上传功能相关推荐

最新文章

热门文章