文本域实现图片拖拽上传

hedeqiang

发布于 2019-12-17 22:20:04

2.6K0

发布于 2019-12-17 22:20:04

文章被收录于专栏：LaravelCodeLaravelCode

文件拖拽上传

相信你看到过不少文件拖拽上传的功能，很多论坛、社区比比皆是。所以今天就来操作一番。

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 App\Handlers;

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 ![file]({filename})\n\n",
    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;
    }
});

至于其他和第一种没有区别，这样就可以实现在使用编辑器的情况下，上传图片了。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

javascript