Question

我正在尝试使用Dropzone.js上传生成的客户端文档（目前的图片）。

// .../init.js

var myDropzone = new Dropzone("form.dropzone", {
    autoProcessQueue: true
});

客户完成工作后，只需单击一个调用保存功能的保存按钮：

// .../save.js

function save(myDocument) {

    var file = { 
        name: 'Test',
        src: myDocument,
    };

    console.log(myDocument);

    myDropzone.addFile(file);
}

console.log（）正确地返回了我的文档内容

 data:image/png;base64,iVBORw0KGgoAAAANS...

此时，我们可以看到进度条在放置区上传文档但上传失败。

这是我的（标准dropzone）HTML表单：

<form action="/upload" enctype="multipart/form-data" method="post" class="dropzone">
    <div class="dz-default dz-message"><span>Drop files here to upload</span></div>
    <div class="fallback">
        <input name="file" type="file" />
    </div>
</form>

我有一个收到邮件请求的Symfony2控制器。

// Get request
$request = $this->get('request'); 

// Get files
$files = $request->files;

// Upload
$do = $service->upload($files);

从dropzone上传（通过拖放或点击）正在运行并且上传成功但是使用myDropzone.addFile（）函数在我的控制器中返回一个空对象：

var_dump($files);

返回

object(Symfony\Component\HttpFoundation\FileBag)#11 (1) {
  ["parameters":protected]=>
  array(0) {
  }
}

我想我在保存功能中没有正确设置我的var文件。我试图创建JS图像（var img = new Image（）...）但没有任何成功。

感谢您的帮助！

Answer 1

最后，我找到了一个没有创建画布的工作解决方案：

function dataURItoBlob(dataURI) {
    'use strict'
    var byteString, 
        mimestring 

    if(dataURI.split(',')[0].indexOf('base64') !== -1 ) {
        byteString = atob(dataURI.split(',')[1])
    } else {
        byteString = decodeURI(dataURI.split(',')[1])
    }

    mimestring = dataURI.split(',')[0].split(':')[1].split(';')[0]

    var content = new Array();
    for (var i = 0; i < byteString.length; i++) {
        content[i] = byteString.charCodeAt(i)
    }

    return new Blob([new Uint8Array(content)], {type: mimestring});
}

保存功能：

function save(dataURI) {

    var blob = dataURItoBlob(dataURI);
    myDropzone.addFile(blob);

}

该文件在dropzone中正确显示并已成功上传。我仍然需要处理文件名（我的文档名为“blob”）。

在此处找到了dataURItoBlob函数：Convert Data URI to File then append to FormData

[编辑] ：我终于在dropzone中编写了这个函数来完成这项工作。你可以在这里查看：https://github.com/CasperArGh/dropzone 你可以像这样使用它：

var dataURI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAmAAAAKwCAYAAA...';
myDropzone.addBlob(dataURI, 'test.png');

Answer 2

我目前无法发表评论，并希望将此信息发送给您。

我知道你找到了答案，但是我在使用你的Git代码时遇到了一些麻烦，并根据我的需要对其进行了重新设计，但我大约100％肯定这对于每个可能需要添加文件或blob的情况都有效任何东西，并能够应用它的名称。

Dropzone.prototype.addFileName = function(file, name) {
    file.name = name;
  file.upload = {
    progress: 0,
    total: file.size,
    bytesSent: 0
  };
  this.files.push(file);
  file.status = Dropzone.ADDED;
  this.emit("addedfile", file);
  this._enqueueThumbnail(file);
  return this.accept(file, (function(_this) {
    return function(error) {
      if (error) {
        file.accepted = false;
        _this._errorProcessing([file], error);
      } else {
        file.accepted = true;
        if (_this.options.autoQueue) {
          _this.enqueueFile(file);
        }
      }
      return _this._updateMaxFilesReachedClass();
    };
  })(this));
};

如果将其添加到dropzone.js（我刚好在Dropzone.prototype.addFile = function(file) {可能行1110的行下面。

像魅力一样工作，与其他任何东西一样使用。 myDropzone.addFileName(file,name)！

希望有人发现这很有用，并且不需要重新创建它！

Answer 3

1）你说：“一旦客户完成了他的工作，他只需要点击一个调用保存功能的保存按钮：”

这意味着您设置autoProcessQueue: false并拦截按钮单击，以执行saveFile（）函数。

$("#submitButton").click(function(e) {
    // let the event not bubble up
    e.preventDefault();
    e.stopPropagation();
    // process the uploads
    myDropzone.processQueue();
});

2）检查表格行动

检查您的表单action="/upload"是否正确路由到您的SF控制器＆amp;动作。

3）示例代码

您可以在官方 Wiki

找到完整的示例

4）好的，感谢您的评论，我更好地理解了这个问题：

“如何使用dropzone保存base64图像资源？”

您需要将图片内容嵌入为值

// base64 data
var dataURL = canvas.toDataURL();

// insert the data into the form
document.getElementById('image').value = canvas.toDataURL('image/png');
//or jQ: $('#img').val(canvas.toDataURL("image/png"));

// trigger submit of the form
document.forms["form1"].submit();

执行此操作可能会遇到麻烦，可能需要将“origin-clean”标志设置为“true”。见http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#security-with-canvas-elements
how to save html5 canvas to server

如何使用dropzone上传base64图像资源？

3 个答案: