增强DropZone之添加复制上传图片功能

DropZone

Dropzone 是一个开源的 JavaScript 库，提供文件的异步上传功能，并支持拖拽上传功能

下载地址

DropZone使用教程

使用教程去看这篇博客

我的改进

解决方式

js绑定复制事件,获取剪切板文件图片,禁止jquery更改ajax的请求数据信息(这一步很重要,因为后台需要接收multiple属性的)

代码如下:

/*加入ctrl v上传*/
    document.addEventListener(
        'paste',
        function(e) {
            var items = event.clipboardData && event.clipboardData.items;
            var file = null;
            if (items && items.length) {
                for (var i = 0; i < items.length; i++) {
                    if (items[i].type.indexOf('image') !== -1) {
                        file = items[i].getAsFile(); // 此时file就是剪切板中的图片文件
                        break;
                    }
                }
            }
            if (file.size === 0) {
                return;
            }
            var formData = new FormData();
            formData.append('file', file); // 将formData上传即可
            $.ajax({
                url:"/admin/attach/upload",
                type: "POST",
                data: formData,
                // 不要去处理发送的数据
                processData : false,
                // 不要去设置Content-Type请求头
                contentType : false,
                success: function(result) {
                    window.location.reload();
                }
            });
        },
        false
    );

本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名,转载请标明出处
最后编辑时间为: 2020/04/05 21:50