php 拖动多个文件上传,dropzone拖拽文件上传一次上传多个文件的方法
用dropzone插件拖拽文件上传默认情况是把一个文件拖到浏览器后就立即自动上传,参考前文《用dropzone插件拖拽文件上传》,如果需要一次上传多个文件怎么办?本文将介绍其实现方法。
dropzone一次上传多个文件
实例代码
把图片拖到下面进行上传
Upload
$(document).ready(function () {
Dropzone.options.form1 = {
//禁止自动提交上传autoProcessQueue: false,
//一次最多上传文件数parallelUploads: 10,
maxFiles: 10,
//文件最大体积
maxFilesize: 0.5, //单位:MB
//限制文件类型
acceptedFiles: ".jpg, .jpeg, .png, .gif, .pdf",
//删除按钮
addRemoveLinks: true,
init: function (e) {
var myDropzone = this;
$('#btn_upload').on("click", function() {
myDropzone.processQueue(); // Tell Dropzone to process all queued files.
});
// Event to send your custom data to your server
myDropzone.on("sending", function(file, xhr, data) {
// First param is the variable name used server side
// Second param is the value, you can add what you what
// Here I added an input value
//data.append("your_variable", $('#your_input').val());
});
}
};
});
后台上传程序使用php实现,代码如下:
if (!empty($_FILES)) {
if(is_array($data)){
foreach($_FILES['file']['tmp_name'] as $key => $value) {
$tempFile = $_FILES['file']['tmp_name'][$key];
$targetFile = $_FILES['file']['name'][$key];
move_uploaded_file($tempFile,$targetFile);
}
}
else{
$tempFile = $_FILES['file']['tmp_name'];
$targetFile = $_FILES['file']['name'];
move_uploaded_file($tempFile,$targetFile);
}
}
?>
代码解释
1、使用插件
需要用到jquery库文件,我们可直接用百度的cdn公共库文件。
其次使用插件dropzone.js,注意文件路径写正确。
2、html代码
添加一个form标签,和一个button标签。
form标签的action是上传文件的后台程序。button是需要点击的“上传”按钮。
Upload
3、jquery代码
$(document).ready(function () {
Dropzone.options.form1 = {
//禁止自动提交上传autoProcessQueue: false,
//一次最多上传文件数
parallelUploads: 10,
maxFiles: 10,
//文件最大体积maxFilesize: 0.5, //单位:MB
//限制文件类型acceptedFiles: ".jpg, .jpeg, .png, .gif, .pdf",
//删除按钮
addRemoveLinks: true,
init: function (e) {
var myDropzone = this;
$('#btn_upload').on("click", function() {
myDropzone.processQueue(); // Tell Dropzone to process all queued files.
});
// Event to send your custom data to your server
myDropzone.on("sending", function(file, xhr, data) {
// First param is the variable name used server side
// Second param is the value, you can add what you what
// Here I added an input value
//data.append("your_variable", $('#your_input').val());
});
}
};
});
多文件上传,主要是用到参数parallelUploads和maxFiles,如果没有这两个参数,则默认是最多一次上传2个文件。
这里注意Dropzone.options.form1中的form1是html代码里的form标签的id名称。btn_upload是html代码里的button标签按钮的id名称。
4、php程序
需要明白多文件上传时多个文件是一个数组,所以后台程序要视作接收一个数组来处理,if(is_array($data))就是判断接收的数据是否数组,如果只上传一个文件,则不是数组。
注意问题
dropzone插件不支持上传文件名含中文字符。
php 拖动多个文件上传,dropzone拖拽文件上传一次上传多个文件的方法相关推荐
- dropzone拖拽上传组件使用全记录
原文链接: dropzone拖拽上传组件使用全记录 公司有一个需求是把附件上传优化成可以通过拖拽本地文件来上传的效果,找了一圈都没有找到特别简单好用的组件,最后还是决定使用github上1.6万sta ...
- vue-simple-uploader实现多文件/文件夹以及可拖拽上传
vue-simple-uploader的简单使用 1.效果图展示 2.安装 3.vue2使用(vue3使用会报错) 4.代码 vue-simple-uploader是基于simple-uploader ...
- 微信小程序图片上传九宫格拖拽组件
微信小程序图片上传&九宫格拖拽组件 前言 图片上传加九宫格拖拽是一个比较常用的组件,常用于发帖或者评论等内容上传模块,我这篇九宫格拖拽的思路是借鉴了一款优雅的小程序拖拽排序组件实现这篇文章 实 ...
- 在 Element-UI 的 Table 组件上添加列拖拽效果
在 Element-UI 的 Table 组件上添加列拖拽效果 一.数据驱动 传统的拖动效果,都是基于通过 mousedown.mousemove.mouseup 事件来修改删减 dom 节点 但 V ...
- MyZip pro专业极速解压放弃了Mac上落后的拖拽解压压缩模式,采用『右键菜单』进行压缩、解压,极大的符合了用户最初的使用习惯。
1.右键压缩解压 首先,MyZip放弃了Mac上落后的拖拽解压压缩模式,采用『右键菜单』进行压缩.解压,极大的符合了用户最初的使用习惯. 2.多线程极速压缩 很多时候,我们在Mac上压缩总感觉很慢,7 ...
- html5 上传超大文件,HTML5教程 如何拖拽上传大文件
本篇教程探讨了HTML5教程 如何拖拽上传大文件,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < 前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性 ...
- 文件上传(拖拽上传)
本地上传,提前预览(图片,视频) 1.html中div标签预览显示,button标签触发上传事件. [html] view plain copy <div id="drop_area ...
- 关于拖拽上传 [一个拖拽上传修改头像的流程]
拖拽是操作系统用户体验最伟大的改进之一.它让人随心所欲的操作,更符合人们的直观感受. 如今现代的浏览器已经有很多支持拖拽文件读取操作,其优点不再复述.前端时间利用拖拽改进了一下网站的头像上传流程,对其 ...
- antd vue3 图片上传组件扩展,支持多图上传 图片拖拽排序等
组件涉及到 vue3.2.vite.Ant Design Vue 3.2.16.Windi CSS样式库.vuedraggable-es拖拽库等 组件功能 图片拖拽 多图上传 自定义图片加载样式 自定 ...
最新文章
- 如何在VMware虚拟机上安装Linux操作系统(Ubuntu)
- 6.:first-child子元素过滤选择器
- win7查看某个端口被占用的解决方法
- 表变量与临时表的优缺点
- JavaScript + Audio API自制简易音乐播放器(详细完整版、小白都能看懂)
- 一起学习C语言:C语言基本语法(三)
- RECT JS 由浅入深
- 《软件工程》总结——第一章
- “十四五”国家重点研发计划“区块链”重点专项 2022年(附pdf下载地址)
- Python SQLite3 教程
- 已解决 | burp无法抓取iphone https数据包
- Mysql支持的数据类型
- 如何高效地做到大文本去除重复行
- 如何阅读一本书 笔记
- pixi.js 制作 流星雨效果
- MapGuide的历史
- 数据库的主要设计步骤
- IP地址,子网掩码,网段 概念详解
- 软件测试——2022经济寒冬之下究竟还有没有出路?
- thinkpad E570重装系统后声音不能外放