<form method="post" enctype="multipart/form-data" action="import">//注意这里的action和下面的url要一直,如果不写的话就算浏览器上传成功了也会报404的错误
<div >
<input name="file" type="file" />
</div>
</form>
<script type="text/javascript">
try {
$(".dropzone").dropzone({
url:'import?ti='+new Date(),//上传地址
paramName: "file",
maxFilesize: 2.0, // MB
maxFiles:1,//一次性上传的文件数量上限
acceptedFiles: ".xls",
addRemoveLinks : true,//添加移除文件
autoProcessQueue: false,//不自动上传
dictCancelUploadConfirmation:'你确定要取消上传吗?',
dictMaxFilesExceeded: "您一次最多只能上传{{maxFiles}}个文件",
dictFileTooBig:"文件过大({{filesize}}MB). 上传文件最大支持: {{maxFilesize}}MB.",
dictDefaultMessage :
'<span ><i ></i> 拖动文件至该处</span> \
<span >(或点击此处)</span> <br /> \
<i ></i>',
dictResponseError: '文件上传失败!',
dictInvalidFileType: "你不能上传该类型文件,文件类型只能是*.xls。",
dictCancelUpload: "取消上传",
dictCancelUploadConfirmation: "你确定要取消上传吗?",
dictRemoveFile: "移除文件",
uploadMultiple:false,
//change the previewTemplate to use Bootstrap progress bars
previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n <div class=\"dz-details\">\n <div class=\"dz-filename\"><span data-dz- name></span></div>\n <div class=\"dz-size\" data-dz-size></div>\n <img data-dz-thumbnail />\n </div>\n <div class=\"progress progress-small progress-striped active\"><div class=\"progress-bar progress-bar-success\" data-dz-uploadprogress></div></div>\n <div class=\"dz-success-mark\"><span></span></div>\n <div class=\"dz-error-mark\"><span></span></div>\n <div class=\"dz-error-message \"><span data-dz-errormessage></span></div>\n</div>",
init: function() {
var submitButton = document.querySelector("#sureSubmit");
myDropzone = this; // closure
//为上传按钮添加点击事件
submitButton.addEventListener("click", function () {
$('#subModel').modal('hide');
//手动上传
myDropzone.processQueue();
});
//添加了文件的事件
this.on("addedfile", function () {
$('#subModel').modal().css({
'margin-top': function () {
return (document.body.scrollHeight/ 2.5);
}
});
$('#subModel').modal('show');
});
this.on("success", function(file,data) {
if(data=="upErr"){
alertMsg("上传失败!");
}else{
alertMsg(data);
}
});
this.on("error", function(file) {
alert("文件上传失败!");
});
},
});
} catch(e) {
alert('浏览版本过低,不支持文件上传!');
}
});
<script type="text/javascript">
以下是网上收的关于dropzone的一些相关数据:
功能选项
-
url
:最重要的参数,指明了文件提交到哪个页面。 -
method
:默认为post
,如果需要,可以改为put
。 -
paramName
:相当于元素的
name
属性,默认为file
。 -
maxFilesize
:最大文件大小,单位是 MB。 -
maxFiles
:默认为null
,可以指定为一个数值,限制最多文件数量。 -
addRemoveLinks
:默认false
。如果设为true
,则会给文件添加一个删除链接。 -
acceptedFiles
:指明允许上传的文件类型,格式是逗号分隔的 MIME type 或者扩展名。例如:image/*,application/pdf,.psd,.obj
-
uploadMultiple
:指明是否允许 Dropzone 一次提交多个文件。默认为false
。如果设为true
,则相当于 HTML 表单添加multiple
属性。 -
headers
:如果设定,则会作为额外的 header 信息发送到服务器。例如:{"custom-header": "value"}
-
init
:一个函数,在 Dropzone 初始化的时候调用,可以用来添加自己的事件监听器。 -
forceFallback
:Fallback 是一种机制,当浏览器不支持此插件时,提供一个备选方案。默认为false
。如果设为true
,则强制 fallback。 -
fallback
:一个函数,如果浏览器不支持此插件则调用。
翻译选项
-
dictDefaultMessage
:没有任何文件被添加的时候的提示文本。 -
dictFallbackMessage:Fallback
情况下的提示文本。 -
dictInvalidInputType
:文件类型被拒绝时的提示文本。 -
dictFileTooBig
:文件大小过大时的提示文本。 -
dictCancelUpload
:取消上传链接的文本。 -
dictCancelUploadConfirmation
:取消上传确认信息的文本。 -
dictRemoveFile
:移除文件链接的文本。 -
dictMaxFilesExceeded
:超过最大文件数量的提示文本。
常用事件
以下事件接收 file 为第一个参数
-
addedfile
:添加了一个文件时发生。 -
removedfile
:一个文件被移除时发生。你可以监听这个事件并手动从服务器删除这个文件。 -
uploadprogress
:上传时按一定间隔发生这个事件。第二个参数为一个整数,表示进度,从 0 到 100。第三个参数是一个整数,表示发送到服务器的字节数。当一个上传结束时,Dropzone 保证会把进度设为 100。注意:这个函数可能被以同一个进度调用多次。 -
success
:文件成功上传之后发生,第二个参数为服务器响应。 -
complete
:当文件上传成功或失败之后发生。 -
canceled
:当文件在上传时被取消的时候发生。 -
maxfilesreached
:当文件数量达到最大时发生。 -
maxfilesexceeded
:当文件数量超过限制时发生。
以下事件接收一个 file list 作为第一个参数(仅当uploadMultiple
被设为true
时才会发生)
successmultiple
completemultiple
cancelmultiple
特殊事件
-
totaluploadprogress
:第一个参数为总上传进度,第二个参数为总字节数,第三个参数为总上传字节数。
相关推荐
添加必要的导入并使用DropZone()包装任何小部件以将其用作放置区: import 'package:drop_zone/drop_zone.dart' ; import 'dart:html' as html; DropZone ( onDragEnter : () { print ( 'drag enter' ); }, ...
DropZone上传图片所需的资源,包括js文件,css文件!使用方法见:http://www.cnblogs.com/YLQBL/p/8258822.html
->我将创建此模型bcz以了解如何使用ajax方法上传图像(文件)... post123模型 ->如果您使用dropzone.js并使用包含(用户帖子)的(dropzone)输入实现多个文件上传,并且您还有其他(wihout dropzone)输入字段包含...
Dropzone.jsCraft.io插件...好的,这就是将其工作的方法,只需将其放在模板中即可(无需嵌套在表单中,也不必担心操作网址,这一切都已得到解决) {{ craft . dropzone . form ({ sourceId : 2 }) | raw }} 注意|raw
主要介绍了jQuery图片拖动组件Dropzone用法,结合实例形式分析了图片拖动组件Dropzone的功能、安装及具体使用方法,需要的朋友可以参考下
安装此扩展的首选方法是通过 。 无论运行 php composer.phar require --prefer-dist perminder-klair/yii2-dropzone "dev-master" 或添加 "perminder-klair/yii2-dropzone": "dev-master" 到composer.json文件的...
可能是目前使用 drop 事件的最简单方法。 块内的上下文与父上下文相同。安装meteor add hockeyj85:html5-dropzone为什么? 可以轻松 ,我找不到一种轻量级的方式来设计它。 所以这个包发生了。用法默认情况下,没有...
部署一个本地的图像目标编译器,这样自己使用起来还是比较的方便快捷,而且该...同时,这个网页还使用了dropzone插件,将托管在云上的dropzone.min.js 和 dropzone.min.css 下载放置本地即可(别忘了修改相对位置)。
link href=”~/Dropzone/css/dropzone.css” rel=”stylesheet” /> [removed][removed] 2. post data 代码如下:<form action=”~/Home/SaveUploadedFile” method=”post” enctype=”multipart/f
6.3.4 使用createtemplate方法创建模板 / 263 6.3.5 helper对象的使用方法 / 263 6.4 元素的操作 / 273 6.5 获取元素集合:ext.compositeelementlite与ext.compositeelement / 277 6.5.1 使用ext.select获取...
一种简单的将拖放拖放到网络上的...如何使用将drop_zone添加到项目的pubspec.yaml中:依赖项:drop_zone:^ 0.0.2添加必要的导入并使用DropZone()包装任何小部件以将其用作dropzone:import'package:package_drop_z
本系统采用以上方法,基本实现了用户模块、景点模块、酒店模块、论坛模块、定制模块、留言回复功能,及相应模块的后台管理功能等。 线上地址 http://116.62.110.99:8083/ 技术 使用Java作为开发语言 后端 ...
将文件直接上传到 S3,而不是中间服务器,是减少服务器负载的好方法。 虽然此演示使用 Python 和 Flask,但代码应该很容易转换为其他语言和框架。 特征 AWS 签名版本 4 创建此演示时,大多数直接到 S3 上传的示例都...
with使用React Select / Material UI - React Dropzone / MaterialUI Dropzone玩。 支持在Form , Field和Collection级别的Sync和Async验证。 :backhand_index_pointing_right_light_skin_tone:播放同步和异步验证...
CDAP摄取项目将数据提取到Cask数据应用程序平台(CDAP)中的各种方法。编译所有软件包mvn clean package构建软件包的rpm(文件尾随和DropZone) mvn clean package -P rpm为软件包构建debian(File Tailer和DropZone...
GSG Plus Hub Plugins是灰猩猩付费会员Greyscalegorilla Plus使用的一个插件教程管理器,这个合集是单独的里面的插件,没有管理器本身,只支持Win C4D 2023 包含以下插件: Align Tools Cyc Types DropZone ...
这种演示的最简单方法是将此存储库压缩为ZIP并将其拖到“ Deploys”选项卡中的手动部署dropzone中。 部署期间应自动检测表单。 它在Netlify内部的外观 CSV输出 该回购还包含CSV输出(我的IP被屏蔽),因此您可以...
使用方法 许可证:rocket:技术该项目使用以下技术开发:后端Celebs Cors Express Knex Multer打字稿前端Axios传单React React dropzone React图标React路由器打字稿Mobile Axios Expo Expo邮件撰写者React native ...
需要一种在服务器中快速加载文件并开始使用它的方法,但不必先将文件保存在任何地方,因为我的服务器非常有限。 我知道有一个名为 DropZone 的 jquery 插件,但我不知道是否可以这样做。 这个插件让你可以轻松地...