文件拖拽上传
相信你看到过不少文件拖拽上传的功能，很多论坛、社区比比皆是。所以今天就来操作一番。
Rovak/InlineAttachment 这款包就是专门实现拖拽上传的。
安装
将安装包下载下来。如果你安装了 Bower
代码语言：javascript复制 bower install inline-attachment使用
先来说下 Jquery 的使用
引入相关 JS
代码语言：javascript复制<script src="../src/inline-attachment.js"></script>
<script src="../src/jquery.inline-attachment.js"></script>页面当中编写一个文本域
代码语言：javascript复制<textarea name="post" rows="10"></textarea>编写 JavaScript 脚本
代码语言：javascript复制$('.post').inlineattachment({
uploadUrl: 'upload_image', //图片上传处理路,
extraParams: {
'_token': 'csrf_token',
}, //laravel csrf 其他可不传
});接下来处理图片上传的功能（具体上传的代码可参考 demo/upload_attachment.php） 我这里使用 Larave 来进行上传，将其封装了一个上传类（具体来自 Laravel 教程 - Web 开发实战进阶 ( Laravel 5.5 )）
代码语言：javascript复制<?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"
];
}
}在自己的控制器中使用依赖注入的方式引入
代码语言：javascript复制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
代码语言：javascript复制注意区别第一种方式。不要引错，具体是
codemirror.inline-attachment.js
<script src="js/inline-attachment.js"></script>
<script src="js/codemirror.inline-attachment.js"></script>编写 JavaScript
代码语言：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;
}
});至于其他和第一种没有区别，这样就可以实现在使用编辑器的情况下，上传图片了。
