淘先锋技术网

首页 1 2 3 4 5 6 7

文件拖拽上传

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

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;
    }
});

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

关于极客返利

极客返利 是由我个人开发的一款网课返利、返现平台。包含 极客时间返现、拉勾教育返现、掘金小册返现、GitChat返现。目前仅包含这几个平台。后续如果有需要可以考虑其他平台。 简而言之就是:你买课,我返现。让你花更少的钱,就可以买到课程。

https://geek.laravelcode.cn

https://geek.idaka.ink

版权许可

本作品采用 知识共享署名 4.0 国际许可协议 进行许可。

转载无需与我联系,但须注明出处,注明文章来源 文本域实现图片拖拽上传

联系我

编程怪事