文本域实现图片拖拽上传
- 2019 年 12 月 17 日
- 笔记
文件拖拽上传
相信你看到过不少文件拖拽上传的功能，很多论坛、社区比比皆是。所以今天就来操作一番。
Rovak/InlineAttachment 这款包就是专门实现拖拽上传的。
安装
将安装包下载下来。如果你安装了 Bower
bower install inline-attachment
使用
先来说下 Jquery 的使用
引入相关 JS
<script src="../src/inline-attachment.js"></script> <script src="../src/jquery.inline-attachment.js"></script>
页面当中编写一个文本域
<textarea name="post" rows="10"></textarea>
编写 JavaScript 脚本
$('.post').inlineattachment({ uploadUrl: 'upload_image', //图片上传处理路, extraParams: { '_token': 'csrf_token', }, //laravel csrf 其他可不传 });
接下来处理图片上传的功能（具体上传的代码可参考 demo/upload_attachment.php） 我这里使用 Larave 来进行上传，将其封装了一个上传类（具体来自 Laravel 教程 – Web 开发实战进阶 ( Laravel 5.5 )）
<?php namespace AppHandlers; class ImageUploadHandler { // 只允许以下后缀名的图片文件上传 protected $allowed_ext = ["png", "jpg", "gif", 'jpeg']; public function save($file, $folder, $file_prefix) { // 构建存储的文件夹规则，值如：uploads/images/avatars/201709/21/ // 文件夹切割能让查找效率更高。 $folder_name = "uploads/images/$folder/" . date("Ym/d", time()); // 文件具体存储的物理路径，`public_path()` 获取的是 `public` 文件夹的物理路径。 // 值如：/home/vagrant/Code/larabbs/public/uploads/images/avatars/201709/21/ $upload_path = public_path() . '/' . $folder_name; // 获取文件的后缀名，因图片从剪贴板里黏贴时后缀名为空，所以此处确保后缀一直存在 $extension = strtolower($file->getClientOriginalExtension()) ?: 'png'; // 拼接文件名，加前缀是为了增加辨析度，前缀可以是相关数据模型的 ID // 值如：1_1493521050_7BVc9v9ujP.png $filename = $file_prefix . '_' . time() . '_' . str_random(10) . '.' . $extension; // 如果上传的不是图片将终止操作 if ( ! in_array($extension, $this->allowed_ext)) { return false; } // 将图片移动到我们的目标存储路径中 $file->move($upload_path, $filename); return [ 'path' => config('app.url') . "/$folder_name/$filename" ]; } }
在自己的控制器中使用依赖注入的方式引入
public function uploadImage(Request $request, ImageUploadHandler $uploader) { // 判断是否有上传文件，并赋值给 $file if ($file = $request->file('image')) { // 保存图片到本地 $result = $uploader->save($request->image, 'posts', Auth::id(), 1024); // 图片保存成功的话 if ($result) { //$data['filename'] = $result['path']; return [ 'filename' => $result['path'] ]; } else{ return [ 'error' => 'Error while uploading file' ]; } } }
这样就实现了图片拖拽上传了。
如果我们的编辑器使用的是其他 Markdown 编辑器，同样我们要实现拖拽上传，继续使用 jQuery 是不能满足的。因此我们采用第二种方式。
codemirror 实现
引入相关JS
注意区别第一种方式。不要引错，具体是
codemirror.inline-attachment.js
<script src="js/inline-attachment.js"></script> <script src="js/codemirror.inline-attachment.js"></script>
编写 JavaScript
inlineAttachment.editors.codemirror4.attach(simplemde.codemirror, { uploadUrl: '/upload_image', uploadFieldName: "image", //urlText: "n nn", extraParams: { '_token': 'csrf_token', }, onFileUploadResponse: function (xhr) { var result = JSON.parse(xhr.responseText), filename = result[this.settings.jsonFieldName]; if (result && filename) { var newValue; if (typeof this.settings.urlText === 'function') { newValue = this.settings.urlText.call(this, filename, result); } else { newValue = this.settings.urlText.replace(this.filenameTag, filename); } var text = this.editor.getValue().replace(this.lastValue, newValue); this.editor.setValue(text); this.settings.onFileUploaded.call(this, filename); } return false; } });
至于其他和第一种没有区别，这样就可以实现在使用编辑器的情况下，上传图片了。
