Dropzone.js -与normal form结合-询问定位
Dropzone.js是一个开源的JavaScript库，用于实现文件拖拽上传功能。它可以与普通表单结合使用，使得文件上传变得更加简单和直观。
Dropzone.js的主要特点包括：
- 文件拖拽：用户可以直接将文件拖拽到指定区域进行上传，提供了更友好的交互方式。
- 文件预览：支持在上传前预览文件，用户可以确认文件是否正确。
- 上传进度显示：实时显示文件上传的进度，让用户了解上传状态。
- 大文件分片上传：支持将大文件分成多个片段进行上传，提高上传效率。
- 图片缩略图生成：自动生成上传图片的缩略图，方便用户查看。
- 自定义样式和事件：可以根据需求自定义Dropzone.js的样式和事件。
Dropzone.js适用于各种场景，包括但不限于：
- 网站文件上传：可以用于网站中用户上传头像、图片、文档等文件的功能。
- 后台管理系统：方便管理员上传和管理文件，如上传文章附件、图片等。
- 社交媒体应用：用户可以通过拖拽上传图片、视频等文件到社交媒体应用中。
- 在线存储服务：提供文件上传功能，方便用户将文件上传到云存储服务中。
腾讯云提供了一系列与文件上传相关的产品和服务，可以与Dropzone.js结合使用，如：
- 对象存储（COS）：腾讯云的分布式存储服务，可用于存储和管理上传的文件。详情请参考：腾讯云对象存储（COS）
- 云函数（SCF）：腾讯云的无服务器计算服务，可以用于处理上传文件后的后续逻辑。详情请参考：腾讯云云函数（SCF）
- 云数据库MySQL版（CMQ）：腾讯云的关系型数据库服务，可以用于存储和管理与上传文件相关的数据。详情请参考：腾讯云云数据库MySQL版（CMQ）
以上是对Dropzone.js的简要介绍和应用场景，希望能对您有所帮助。
相关·内容
1回答
所以我是dropzone.js新手，我有一个简单的html页面。当我拖放文件时，看起来我能做到。但是，现在我想进一步配置一些选项，比如"clickable“、"addRemoveLinks”和"dictDefaultMessage“。
我已经找过样本了，谁能告诉我我哪里做错了？它似乎并不关心我在javascript中设置的配置。任何方向或建议都将不胜感激。
<!DOCTYPE html>
<html>
<head>
<script src="Dropzone.js"></script>
&l
浏览 0提问于2017-01-05得票数 2
我们需要能够支持大上传到我们的网站。这就是我们使用Dropzone.js实现分块上传的原因。
它工作得很好，但是当我使用一个非常大的文件时，我可以在Chrome的网络调试视图中看到，所有请求都是在挂起状态下立即启动的，并且浏览器无法跟上。过了一段时间，打开的请求太多了，Chrome开始为一些挂起的请求返回"net::ERR_INSUFFICIENT_RESOURCES“。
以下是Dropzone配置的相关选项：
[...]
parallelUploads: 1, // only one file is uploaded at a time
maxFilesize: 8148,
浏览 49提问于2021-12-13得票数 1
我尝试将dropzone.js与laravel 5集成，但在尝试dd($request)时得到空的FileBag。
在我看来：
<form action="create-submit" class="dropzone" enctype="multipart/form-data">...</form>
我包含了dropzone.css和basic.css，也在我的超文本标记语言中包含了dropzone.js。
路由：
Route::get('content/create-submit', [
'
浏览 1提问于2016-02-04得票数 2
1回答
我正在尝试将dropzone.js集成到我的购物主题中。Shopify允许使用form action="cart/add"将文件上传附加到行项目
Shopify在输入字段中查找name="properties[SOMETHING]" id="SOMETHING"，并将其作为属性附加到购物车中。
在我的主题中，这个简单代码的简单工作示例可以在这里找到：
当我开始实现Dropzone.js //时，问题就开始了。我遵循了enyo关于在GitHub上使用现有表单的教程。(没有链接，因为我每个帖子只能发布2个链接)
这是我安装了dropzone.js的测
浏览 1提问于2014-02-26得票数 0
使用Dropzone.js，是否有任何方法让回退表单将上传的文件发送到不同的php处理程序？
因此，如果用户使用完整的Dropzone.js界面，它使用"dropzone.php“来处理文件上传，但是如果用户有一个旧的、不受支持的浏览器，并且脚本呈现为后备模式，那么它将使用"dropzonefallback.php”来处理文件上传。
我尝试将url硬编码到dropzone.js中的备用代码中，但这是行不通的：
if (this.element.tagName !== "FORM") {
form = Dropzone.createElement(&#
浏览 1提问于2015-02-24得票数 0
回答已采纳
我正在使用最新的 v5.1构建一个图像上传表单。我需要显示已经存储在我的服务器中的文件，所以我遵循了回购wiki中的。我的代码如下所示：
Dropzone.options.mainMediaForm = {
paramName: "file",
maxFilesize: 2,
maxFiles: 1,
thumbnailHeight: null,
thumbnailWidth: null,
acceptedFiles: 'image/*',
init: function() {
this.o
浏览 2提问于2017-06-15得票数 0
回答已采纳
我将学习如何使用dropzone.js和perl(cgi)。Dropzone.js有关于如何使用PHP上传文件的很好的教程，是否有一种简单的方法可以在perl(cgi)中使用下拉区域。
我发现了一个非常适用于PHP的教程。
<?php
//upload.php
$folder_name = 'upload/';
if(!empty($_FILES))
{
$temp_file = $_FILES['file']['tmp_name'];
$location = $folder_name . $_FILES['file
浏览 10提问于2022-07-12得票数 -1
回答已采纳
我想将dropzone.js版本5添加到我的Vaadin Flow 12.0.7 & Spring Boot2.1.3.RELEASE项目中，但没有成功。 我已经尝试了两种方法，在页面上添加dropzone :默认方法，在这里描述：https://www.dropzonejs.com/#usage，在这里以编程方式描述：https://www.dropzonejs.com/#create-dropzones-programmatically 我已经将dropzone.js添加到我的项目中的静态资源： \src\main\resources\static\frontend\js 并通过
浏览 45提问于2019-04-03得票数 0
回答已采纳
6回答
我将dropzone.js用于我的拖放文件上传解决方案。我只想上传一个文件，如果我上传第二个文件，第一个应该被删除，第二个应该被上传。你知道怎么做吗..
这是我的html
<form class="dropzone dz-clickable" action="upload.php" enctype='multipart/form-data'>
<i class="fa fa-cloud-upload element"></i>
<div style="color:gray;
浏览 2提问于2014-02-25得票数 43
在一个项目中，我使用euvl和dropzone.js提供的vue-js模式插件来上传多个文件。
我知道想要结合这两个库，让用户打开一个模式和上传文件。不幸的是，看起来dropzone.js库没有正确初始化，模式弹出，但是我不能通过下拉区域容器上传照片。
不幸的是，我在控制台上没有一个错误，但是文件上传窗口没有打开，文件的拖放也是不可能的。
这是我的vue组件文件：
<template>
<modal name="upload-files-modal" classses="p-4 bg-card rounded-lg" height="a
浏览 3提问于2020-05-31得票数 1
回答已采纳
我在angular 5应用程序中使用了这个Angular材质组件：
默认情况下显示6个选项。有没有办法调整它，比如默认显示4个选项？
<mat-form-field style="width:88%;margin-top:5px;">
<mat-select formControlName="contact" placeholder="Kontakt *">
<ngx-mat-select-search [formControl]="contactFilter"><
浏览 3提问于2018-06-15得票数 0
1回答
我正在尝试使用Jquery的Bootstrap Form Helpers插件。一切正常，但我尝试使用此示例，并通过添加data- flag =“true”在其旁边显示国家标志，但这不起作用。有没有人用过这个？
示例4
浏览 4提问于2013-12-12得票数 3
3回答
我有以下表格：
<form class="block-center" id="pdfForm" method="POST" action="form_threatment.php" enctype="multipart/form-data" style="margin-top: 30px;">
<div class="form-group push-50-t col-md-12">
<div class="col-md-12&
浏览 3提问于2016-08-27得票数 2
我想使用IFormFile在我的数据库中上传一些文档。在客户端，我使用的是Dropzone.js，但它不能正常工作。每当我点击Submit按钮时，它都会在参数中发送一个空值。我有两个问题。1.如何将文档(图像/PDF)发送到动作方法。2. Dropzone的重新设计(改变风格)。(如果有人解释了滴区的流动，那就非常有用了)
这是我的HTML代码
<form asp-action="AddDocument" asp-controller="Transactions" method="post" enctype="multipa
浏览 3提问于2019-11-12得票数 0
回答已采纳
2回答
未定义下拉区域。
、、
我在JavaScript是个新手，这让我发疯了。
我想使用Dropzone.js，所以我从下载了文件dropzone.js，并将它包含在我的视图中如下所示：
<script src="<?php echo JS_DIRECTORY; ?>/dropzone.js"></script>
然后我创建了这样的表单：
<form action="http://localhost/project/uploadTest/upload" class="dropzone">
</form>
而且效果很好
浏览 0提问于2015-11-20得票数 8
回答已采纳
我有angularjs和spring rest文件上传它工作得很好，但我需要改变文件上传的html文件到dropzone.js或任何拖放文件上传，我尝试dropzone.js库，但我不能集成它与angular，谁能帮助我怎么做？
Angularjs控制器
$scope.document = {};
$scope.setTitle = function(fileInput) {
var file=fileInput.value;
var filename = file.replace(/^.*[\\\/]/, '');
var title = fil
浏览 1提问于2015-02-11得票数 0
1回答
有没有人在火狐浏览器中发现了快速水平抖动的下拉列表的修复方法？其他人的意见，谁已经看到了，但没有找到一个解决办法，也将不胜感激。
HTML代码：(即使在列表填充之后，它仍然会这样做)
<select class="ng-pristine ng-valid" id="batchStatus" name="batchStatus" style="font-size: 14px;" ng-model="lineStatus" ng-options="value.listCode as
浏览 2提问于2015-05-02得票数 0
1回答
我使用dropzone.js来实现拖放功能来上传文件。而且起作用了。我不明白的是为什么我不能限制文件大小和文件扩展名。我想我有它的密码，但它就是做不到。
在cshtml页面中：
<script src="~/js/dropzone.js"></script>
<link href="~/css/dropzone.css" rel="stylesheet" />
<script>
Dropzone.options.dropzone = {
paramName: "fi
浏览 3提问于2017-11-21得票数 0
回答已采纳
我正在使用dropzone.js来处理csv导入。这是我的dropzone代码：
<form onsubmit="csvImport()" class="dropzone" id="mydrop"></form>
目前，csvImport方法使用硬编码的csv文件，如下所示：
function csvImport() {
$(document).ready(function() {
//fetch file
$.get('/d
浏览 7提问于2021-06-12得票数 0
我一直在尝试使用一小段示例代码和dropzone.css使Dropzone.js看起来像网站(dropzonejs.com)上的主题。下面是我的代码：
<html>
<head>
<script src="dropzone.js"></script>
<link rel="stylesheet" type="text/css" href="dropzone.css">
<link rel="stylesheet" type="text/css
浏览 0提问于2015-02-18得票数 9
回答已采纳
我正在使用dropzone.js上传文件。我想知道如何通过dropzone.js接口启动文件上传...我的意思是不需要拖动或输入，而是调用传递文件路径的函数？
浏览 18提问于2020-04-11得票数 0
2回答
iOS -测量距离的最佳方法
、、、、
我目前正在做一个项目，我需要用户告诉我(在真实世界的地图上)在哪里建造一堵墙。
问题：在您看来，用户显示(/tell)在哪里的最准确的方法是什么？
想法1我曾想过要在地图上画画，但那不太准确。
想法2.我想到的另一件事是，用户应该把他们的手机放在墙的开头和末端。这样，应用程序就可以使用CLLocationManager打印地图上的位置，并测量两端之间的距离。
这是我尝试过的代码，但实际上并不准确。
let locationManager = CLLocationManager()
var location1: CLLocation = CLLocation()
var location2:
浏览 3提问于2017-06-16得票数 1
回答已采纳
我正在尝试使用Dropzone.js上传我的Rails应用程序中的文件。看起来，如果我使用标准设置，整个表单就变成了一个图像上传字段。但是，我的表单也包含其他字段。我只想在Dropzone.js区域使用file_field。
我使用的步骤如下：
Gemfile
gem 'rails-assets-dropzonejs', source: 'https://rails-assets.org'
application.js
//= require dropzonejs
application.css
*= require dropzonejs
_form.html.
浏览 2提问于2017-02-16得票数 0
我有：
{!! Form::open(['route'=>'admin.some.store', 'method' => 'post', 'id' => 'creation-form']) !!}
{!! Form::text('name', null, ['class' => 'form-control', 'id'=>'name']) !!}
{!! Form::text
浏览 0提问于2015-11-29得票数 2
我利用dropzone.js实现了文件上传功能。我像这样创建表单：
<form action="/target-url" id="my-dropzone" class="dropzone"></form>
<script>
// myDropzone is the configuration for the element that has an id attribute
// with the value my-dropzone (or myDropzone)
Dropzone.options.
浏览 0提问于2014-04-11得票数 1
1回答
这似乎是一个很常见的问题，我一直在为我的特定situation...but进行大量的挖掘--我找不到它。
我一直在使用以下Dropzone.js教程：
UI显示得很好，我在Tomcat日志中注意到正在调用php文件(见下文)，但是图像本身并没有被上传到目录中。
我在Ubuntu14.04上运行Tomcat 7。我已经确保目录具有适当的权限(777)。见下面的代码：
index.html (只显示带有form元素的div -请假定dropzone.js文件已正确链接)：
<h3>Upload Images</h3>
<form action="
浏览 2提问于2015-06-14得票数 0
回答已采纳
我无法在php中使用dropzone.js上传图像。
我什么都试过了，但对我没什么用。
我的HTML代码
<form method="post" enctype="multipart/form-data">
<div class="dropzone" id="mydropzone">
<input type="file" name="img">
<div class="dropzone-previews"
浏览 0提问于2019-08-26得票数 1
回答已采纳
2回答
公司模式
class Company extends Model {
public function position() {
return $this->hasMany('App\Position);
}
}
定位模型
class Position extends Model{
public function company() {
return $this->belongsTo('App\Company);
}
}
公司表：id_company，company_name
职位表：id_posit
浏览 1提问于2018-03-30得票数 0
回答已采纳
我正在使用dropzone.js将文件上传到WebAPI2服务。读取多部分流会产生乱码的俄文字符。例如，当我上传名为Русскоеназвание-俄文字符的文件时，它提供了？-俄文字符。
我确信dropzone.js工作得很好，这只是一个Web API问题。
下面是GetStream方法。
public override Stream GetStream(HttpContent parent, HttpContentHeaders headers)
{
// For form data, Content-Disposition header is a
浏览 1提问于2015-03-09得票数 0
我在试着写我的上传脚本。
我使用的是CodeIgniter，dropzone.js和Verot_upload类
表格：
<form action="/admin/images/upload"
enctype="multipart/form-data" method="post"
class="dropzone"
id="my-awesome-dropzone"></form>
<script src="/skin/js/dropzone.
浏览 1提问于2014-06-05得票数 0
回答已采纳
我正在使用dropzone.js上传几个图片到我的rails应用程序。其想法是，这些图像属于barco模型。我已经设置了模型，我可以看到barco_id是通过URL传递的。我通过URL传递barco的id，但无法获取图像以获取barco_id属性。就像hidden_field不起作用.
这是图像的新视图，使用dropzone.js
<%= form_for(Image.new, html: { multipart: true, class: "dropzone"}) do |f| %>
<div class="fallback">
浏览 2提问于2015-05-31得票数 2
回答已采纳
我正在尝试处理dropzone.js，以便正确地使用实体symfony表单生成器。
如果我使用简单的<input type="file" id="form_file" name="form[file]">，一切都会正常工作
但是，如果我使用的是dropzone.js，我在我的帖子中得到了这个区别：
我该怎么处理呢？
这是我要说的：
Dropzone.options.myAwesomeDropzone = {
autoProcessQueue: false,
upl
浏览 2提问于2015-06-12得票数 6
回答已采纳
我正在尝试在Dropzone.js MVC中实现ASP.Net。我什么都试过了，但不知何故，我无法在控制器中接收丢失的文件。变量只是NULL。
我的观点如下：
<h2>DropZoneUp</h2>
<form action='@Url.Action("DropZoneUpload")'class="dropzone"id="my-awesome-dropzone">
</form>
<script src="~/Scrip
浏览 0提问于2018-09-13得票数 1
回答已采纳
3回答
我按照在dropzon网站上的教程设置了一个简单的dropzone.js。它正确地显示dropzone，当我将文件放入其中时，它会显示出来，但当我尝试单击upload按钮时，什么也没有发生。我使用的是这个html代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link href="css/style.css" type="text/css" rel="styleshe
浏览 2提问于2015-02-09得票数 1
嗨，我有一个使用dropzone.js的表单，如下所示， <form method="post" action="{{url('/example/fileupload')}}" enctype="multipart/form-data" class="dropzone" id="dropzone">
@csrf
<input type="submit">
</form> 我使用以下代码来配置dro
浏览 11提问于2020-04-29得票数 0
1回答
有一个由"unnest_tokens“和删除停止字组成的数据框架。我想重新组装这个数据框架。我想在一行中添加相同值的"Line“列。我试过几个建议，但没有。我怎么能做到呢？
数据框架如下。
<table style="border-collapse:collapse;border-spacing:0" class="tg"><thead><tr><th style="border-color:black;border-style:solid;border-width:1px;font-fami
浏览 1提问于2020-06-25得票数 1
回答已采纳
我有这个函数，它使用createobjectURL生成File URL，当我使用普通的输入文件标记时，它可以工作。
我正在尝试使用dropzone.js实现相同的操作，但是当我拖放文件时，它开始显示上传进度条，尽管我还没有定义任何操作。
如何使用dropzone.js获取URL？
Javascript
function localFileVideoPlayerInit(win) {
var URL = win.URL || win.webkitURL,
displayMessage = (function displayMessageInit() {
浏览 0提问于2013-05-29得票数 2
1回答
通过表单上传文本和图像
、、、、
使用dropzone.js我正在尝试创建拖放功能来上传图像。
表单页上的代码
<script type="text/javascript" src="js/dropzone.js"></script>
<form action="upload.php" class="dropzone">
</form>
upload.php
<?php
if(!empty($_FILES))
{
$targetDir = "uploads/";
$fileN
浏览 1提问于2016-05-27得票数 2
你好，我在使用Dropzone.js中的自定义选项时遇到了问题。即使我将其设置为true，它也不会显示删除链接。我不确定我是不是做错了，也不知道到底发生了什么。文件已正确上载，并显示加载栏和已完成复选标记。
我目前拥有的代码是：
<html>
<head>
<!-- 1 -->
<link href="models/site-templates/dropzone.css" type="text/css" rel="stylesheet" />
<!-- 2 -->
<s
浏览 1提问于2013-10-02得票数 4
如何将myfile表单域设置为Dropzone.js上传区？
forms.py
class TestForm(forms.Form):
title = forms.CharField(required=True)
myfile = FileField()
views.py
class ExampleView(FormView):
template_name = 'test.html'
form_class = TestForm
success_url = '/thanks/'
def form_valid(sel
浏览 0提问于2016-04-27得票数 0
2回答
我希望管理员能够设置一个最大的文件大小从他们的仪表板(内置codeigniter) 他们可以选择设置“最大文件大小”，因为不同的托管公司在php.ini文件中设置了不同的upload_max_filesize。 我想把这个变量传递给dropzone.js 我尝试传递的变量是$max_filesize 我的dropzone.js代码： Dropzone.options.mydropzone = {
maxFiles: 1,
maxFilesize: '$max_filesize', //where i want to pass the variable
浏览 22提问于2020-07-22得票数 0
我使用dropzone.js上传图片到我的网站，但Laravel总是报告TokenMismatchException，尽管我在表单中使用Form::open()，它会自动添加_token。
这是我的代码：
{{ Form::open(["class" => "dropzone", "id" => "imgUpload", "action" => "UploadsController@uploadImage"]) }}
<div class="fallback&
浏览 1提问于2014-09-02得票数 1
1回答
我已经添加了以下dropzone的代码
<html>
<head>
<!-- 1 -->
<link href="dropzone.css" type="text/css" rel="stylesheet" />
<!-- 2 -->
<script src="dropzone.js"></script>>
</head>
<body>
<!-- 3 -->
<form action
浏览 1提问于2017-09-20得票数 0
我试图在通过Dropzone.js生成的Rails表单中使用Vue.js。我已经将dropzone.js文件放置在app/dropzone.js/javascripts/中。
然后，我创建了这样一个单文件components/dropzone.vue组件：
<template>
<div id="image-drop"></div>
</template>
<script>
export default {
data() {
return {
greeting: '
浏览 7提问于2017-09-29得票数 0
回答已采纳
3回答
下面是测试文件的代码
const { test, expect } = require('@playwright/test')
const HomePage = require('./pageobejcts/HomePage')
test.beforeEach(async ({ page }) => {
await page.goto("https://automationexercise.com/");
})
test('Navigate to Login', async ({ page }) => {
浏览 6提问于2021-12-27得票数 1
我想在文件通过dropzone.js (v5)和PHP上传到服务器后访问它，也就是说，我想检索文件URL。我怎么才能拿到呢？
form.php：
<form action="upload.php" class="dropzone" enctype="multipart/form-data">
<div class="fallback">
<input name="file" type="file" multiple />
</
浏览 2提问于2020-02-19得票数 0
回答已采纳
我想把它们对齐，这样登录和注册就会垂直对齐大括号的中心，并且所有东西(除了输入框/标签)在屏幕上是水平的。
这是我的HTML：
<body>
<img src="{{ STATIC_URL}}logo.png" class='center'></br>
<div style:"display:inline;">
<a href='#' title='click to login' onClick='login()'>lo
浏览 4提问于2011-12-08得票数 0
回答已采纳
多年来，我一直在用Laravel编写各种表单/ajax请求，这是我第一次遇到这个问题-我在PUT请求中设置了一个CSRF令牌，但我收到了一个419错误。错误发生在Dropzone.js表单中： <form class="form-horizontal dropzone" method="POST" action="{{ route('breaks.upload_photos', $break->id) }}" enctype="multipart/form-data"></form>
浏览 21提问于2019-12-17得票数 0
我正在尝试从base64中对dropzone.js文件进行编码，并使用dropzone.js将其发送到处理程序页面。但是，对于base64_data在POST请求中为空，我有一个问题。
$(document).ready(function(){
Dropzone.autoDiscover = false;
$("#file-form").dropzone({
paramName: 'file',
clickable: true,
maxFilesize: 1,
uploadMulti
浏览 0提问于2013-11-21得票数 6
回答已采纳
我在玩django的fileupload，并在示例中得到了他们的文档。现在，我想通过使用如下所示的来修改响应：
def upload_file(request):
if request.method == 'POST':
form = UploadFileForm(request.POST, request.FILES)
if form.is_valid():
handle_uploaded_file(request.FILES['file'])
# this is defa
浏览 3提问于2014-12-09得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
