关键词：
【中文标题】DropZone.js 上传无法以编程方式进行【英文标题】：DropZone.js uploading is not working on programmatically 【发布时间】：2018-12-20 06:02:43 【问题描述】：我正在以编程方式处理 dropzone js。这是我的 div，
<div class="dropzone" id="my-dropzone">
<div class="dz-message">
<div class="col-xs-8">
<div class="message">
<p>Drop files here or Click to Upload</p>
</div>
</div>
</div>
<div class="fallback">
<input type="file" name="file" multiple>
</div>
</div>
而 rpzone 类是 // Dropzone类：
var myDropzone = new Dropzone("div#my-dropzone", url: "/file/post");
但是当我将图像拖放到 dropzone 框时，图像是带有十字符号的预览（不成功上传）。那么我该如何解决这个问题呢？ dropzone.confif.js
var total_photos_counter = 0;
Dropzone.options.myDropzone =
uploadMultiple: true,
parallelUploads: 2,
maxFilesize: 5,
previewTemplate: document.querySelector('#preview').innerHTML,
addRemoveLinks: true,
dictRemoveFile: 'Remove file',
dictFileTooBig: 'Image is larger than 16MB',
timeout: 10000,
init: function ()
this.on("removedfile", function (file)
$.post(
url: '/images-delete',
data: id: file.name, _token: $('[name="_token"]').val(),
dataType: 'json',
success: function (data)
total_photos_counter--;
$("#counter").text("# " + total_photos_counter);
);
);
,
success: function (file, done)
total_photos_counter++;
$("#counter").text("# " + total_photos_counter);
;
【问题讨论】：
没有办法解决这个问题？ 控制台有错误吗？ 控制台没有任何错误 带有以下表单标签 工作正常，但使用 div 则无法正常工作.... 澄清一下，你用的是第一个sn-pnew Dropzone()吗？第二个 sn-p Dropzone.options.myDropzone =?还是两者兼而有之？
【参考方案1】：
花了很长时间才找到解决方案。问题是 csrf_field() 没有在我的 div 标签中配置， 首先将此添加到您的主刀片模板中：
<meta name="csrf-token" content=" csrf_token() ">
然后配置dropzone.config.js文件到csrf
Dropzone.options.myDropzone =
uploadMultiple: true,
parallelUploads: 2,
maxFilesize: 16,
previewTemplate: document.querySelector('#preview').innerHTML,
addRemoveLinks: true,
dictRemoveFile: 'Remove file',
dictFileTooBig: 'Image is larger than 16MB',
timeout: 10000,
init: function ()
this.on("removedfile", function (file)
$.post(
url: '/images-delete',
data: id: file.name, _token: $('[name="_token"]').val(),
dataType: 'json',
success: function (data)
total_photos_counter--;
$("#counter").text("# " + total_photos_counter);
);
);
,
success: function (file, done)
total_photos_counter++;
$("#counter").text("# " + total_photos_counter);
,
sending: function(file, xhr, formData)
formData.append('_token', $('meta[name="csrf-token"]').attr('content'));
;
现在使用正确的网址可以正常工作
【讨论】：
在 Django 表单中包含 Dropzone 表单时无法进行完整的 POST
】在Django表单中包含Dropzone表单时无法进行完整的POST【英文标题】：CannotmakecompletePOSTwhenincludingDropzoneforminaDjangoform【发布时间】：2016-11-2009:46:53【问题描述】：这绝对是我有史以来最致命的5个问题！我在Django中有一个运行良好... 查看详情
Dropzone.js 上传进度条不显示
】Dropzone.js上传进度条不显示【英文标题】：Dropzone.jsuploadprogressbarnotshowing【发布时间】：2014-05-2003:02:57【问题描述】：我正在使用Dropzone.js进行文件上传，它运行良好，只是没有出现进度条。没有错误。我在网站的前端使用Bootst... 查看详情
重命名上传的文件，以便将其删除 DropZone.js
】重命名上传的文件，以便将其删除DropZone.js【英文标题】：RenameuploadedfilesoitcanberemovedDropZone.js【发布时间】：2015-02-2510:17:23【问题描述】：我决定更新这个问题，因为我仍然无法更改imageId这是我当前的dropzone实现$("div#UploadImage"... 查看详情
Dropzone.js 不再将多个 imgs 上传到 Android 上的网站
】Dropzone.js不再将多个imgs上传到Android上的网站【英文标题】：Dropzone.jsnolongeruploadingmultipleimgstowebsiteonAndroid【发布时间】：2015-10-0504:27:10【问题描述】：直到大约几周前，我的网络应用程序在桌面和移动设备上运行良好，使用drop... 查看详情
UITableViewCell 类布局无法以编程方式工作
...，但如果故事板输出中的相同约束发生更改，则更适合我上传图片。Changeofconstraintsprogrammaticallyandtheoutp 查看详情
dropzone.js实现文件拖拽上传
dropzone.js是一个开源的JavaScript库，提供AJAX异步文件上传功能，支持拖拽文件、支持最大文件大小、支持设置文件类型、支持预览上传结果，不依赖jQuery库。查看演示下载源码使用Dropzone我们可以建立一个正式的上传form表单，并... 查看详情
dropzone.js 图片上传接受的MimeTypes
】dropzone.js图片上传接受的MimeTypes【英文标题】：dropzone.jsimageuploadacceptedMimeTypes【发布时间】：2013-06-0509:51:28【问题描述】：我正在使用dropzone.js插件将图像上传器添加到我的应用程序。我知道这可能是一个非常基本的问题，所... 查看详情
以编程方式将文件上传到 ownCloud 服务器
】以编程方式将文件上传到ownCloud服务器【英文标题】：UploadingfilestoanownCloudserverprogrammatically【发布时间】：2014-09-0515:31:00【问题描述】：我正在尝试设置一个Web应用程序，其中许多客户端可以通过Node.jshttp服务器进行连接，然... 查看详情
上传 30 秒后，使用 PHP 上传 Dropzone.js 失败
】上传30秒后，使用PHP上传Dropzone.js失败【英文标题】：Dropzone.jsuploadwithPHPfailedafter30secondsupload【发布时间】：2018-03-0422:19:45【问题描述】：我正在尝试将“大”文件上传到我的应用程序。用户必须能够上传小于200MB的视频文件，... 查看详情
如何从 dropzone.js 上传和删除文件
】如何从dropzone.js上传和删除文件【英文标题】：howtouploadanddeletefilesfromdropzone.js【发布时间】：2013-10-2221:54:52【问题描述】：我使用了下面的代码，图像已被删除，但缩略图仍然显示。Dropzone.options.myDropzone=init:function()this.on("succe... 查看详情
动画完成后无法单击 UIButton（以编程方式显示）
】动画完成后无法单击UIButton（以编程方式显示）【英文标题】：Can\'tclickonUIButton(thatappearsprogrammatically)afteranimationgetsdone【发布时间】：2013-04-2900:54:44【问题描述】：刚刚问了一个小问题。我正在尝试使UIButton以编程方式出现，... 查看详情
如何限制上传的 dropzone.js 文件的数量？
】如何限制上传的dropzone.js文件的数量？【英文标题】：Howtolimitthenumberofdropzone.jsfilesuploaded?【发布时间】：2013-08-0514:36:55【问题描述】：根据用例，如何限制dropzone.js允许的文件数量？例如，我可能只需要允许上传1、2或4个文件... 查看详情
如何将图像预加载到 dropzone.js
】如何将图像预加载到dropzone.js【英文标题】：HowdoIpreloadimagesintodropzone.js【发布时间】：2014-05-0504:50:55【问题描述】：我在网页上有一个dropzone.js实例，具有以下选项：autoProcessQueue:falseuploadMultiple:trueparallelUploads:20maxFiles:20它是以... 查看详情
如何以编程方式上传 torrent 文件
】如何以编程方式上传torrent文件【英文标题】：Howtouploadatorrentfileprogrammatically【发布时间】：2010-07-1703:40:27【问题描述】：我们有一个客户，我们建立了一个上传网站（使用Ruby/RoR），他想要添加从torrent链接上传文件的功能。... 查看详情
Django 和 Dropzone.js
】Django和Dropzone.js【英文标题】：DjangoandDropzone.js【发布时间】：2015-11-0403:45:09【问题描述】：当我使用dropzone上传文件时，它会将它们添加到数据库中，但它们没有文件，只有ID和创建日期。我认为观点是问题，但我已经尝试了... 查看详情
如何使用 dropzone.js 和 hapi.js 上传图片
】如何使用dropzone.js和hapi.js上传图片【英文标题】：Howtouploadanimageusingdropzone.jsandhapi.js【发布时间】：2018-06-0307:15:15【问题描述】：按照tutorial，我正在尝试将图像文件上传到我的hapi.js服务器。我遇到了这个错误：CORS错误：不允... 查看详情
重命名文件选项在 dropzone.js 中不起作用
】重命名文件选项在dropzone.js中不起作用【英文标题】：renamefileoptionnotworkingindropzone.js【发布时间】：2018-10-0718:34:23【问题描述】：我一直在尝试在dropzone.js中上传之前重命名文件名，但我无法使其正常工作。这是我的配置：Dropz... 查看详情
在每个文件上传时使用 dropzone.js 发送自定义数据
】在每个文件上传时使用dropzone.js发送自定义数据【英文标题】：Sendcustomdatawithdropzone.jsoneachFileUpload【发布时间】：2015-05-1809:26:26【问题描述】：我在我的CodeIgniter项目中使用dropzone。每次拖动文件时，dropzone都会创建一个ajax请求... 查看详情