qstandarditemmodel 重写data函数后无法实现拖拽_实现类似百度网盘上传的功能

今天写到了上传文件部分,记录一下。

前端使用了dropzone.js(用于实现文件上传的JS库),并对此文件进行了细微修改。

说一下思路吧:

首先界面长这样:

65f3f247f500005045fb63a335e7d7d4.png

点击上传文件,需要弹出一个对话框,对话框中有支持拖拽文件的文件选择框。

3e807bed658d442c9f28288356fc4cc8.png

注意,此时上传按钮是禁用的。

选择完成后,会有上传进度条。这里为了看到进度条,我选择上传一个比较大的文件。

12b318574a70e1ca2ece65d8deb3a2bc.png

度条走满之后才可以点击上传按钮。点击上传刷新界面:

bde922d9d01f18d88a92b354a8ab5852.png
48a59cdf2483634fcef311c5d85a6d4d.png

可以看到上传成功了。

接下来说一下实现吧:

一、dropzone的文件上传表单

 

核心就是引入dropzone.js后。添加一个表单标签,设置class="dropzone"。然后dropzone会自动检测到,并做大量的工作。

这里我修改了一下dropzone.js的几行代码。来满足我的需求。

主要是processing和success两个事件。processing表示正在上传的事件,success表示上传成功。可以看到这里当在上传的时候,我让按钮变成不能点击的状态。上传成功后,根据服务器返回的消息Message,把按钮变回可点击状态,然后添加点击函数,让界面重新加载。

e2cf116ca792dadc86538cb59746af1e.png
a91a25cf5ff6af1e8b9526295485426a.png

二、SpringMVC后台实现

有些请求参数是我业务需求,不用在意,主要是看获得文件保存路径,和file.transferTo(newFile);

在controller中使用MultipartFile file 来接受前端传过来的文件,使用file对象可以获得这个文件的一些属性,比如文件名,文件大小等等。

 @RequestMapping(value = "uploadfile.do

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/346330.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

逻辑斯蒂回归_逻辑斯蒂回归详细解析 | 统计学习方法学习笔记 | 数据分析 | 机器学习...

本文包括:重要概念逻辑斯蒂回归和线性回归二项逻辑斯谛回归模型逻辑斯蒂回顾与几率模型参数估计多项逻辑斯谛回归其它有关数据分析,机器学习的文章及社群1.重要概念:在正式介绍逻辑斯蒂回归模型之前,需要先对一些基本概念有所了解…

mysql 数据传输 定时,MySQL数据库定时备份的实现方法

1. 创建shell脚本2. 给shell脚本添加执行权限3. 给脚本添加定时任务crontab文件的说明:用户创建的crontab文件中,每一行都代表一项定时任务,每行的每个字段代表一项设置,它的格式每行共分为六个字段,前五段是时间设定字…

python 生意_本周互联网关注(2015515):劳动人民的生意经、python好还是go好

我很喜欢写这种类型的文章,写的也轻松,大家看的也多。性价比高。那么现在继续。一、所谓光辉岁月,不是波澜壮阔的时候,而是无人问津时,你对梦想的坚持。| 陈欧很多人刚开始创业时激情无比高涨,干着干着开始…

mysql空洞数据,Mysql 表空间和 数据页空洞

一、表空间1、表空间: innodb 引擎存储的最高层; 存放所有的数据2、独立表空间:Mysql 版本5.6 后默认开启的单表单空间(1)Innodb 默认存储引擎页的大小为 16K ;默认表空间 大小为96k(2)独立表空间 开启方式 innodb_file_per_table…

junit 5测试异常处理_在JUnit中处理异常的3种方式。 选择哪一个?

junit 5测试异常处理在JUnit中,有3种流行的方式来处理测试代码中的异常: 试捕习语 使用JUnit规则 带注解 我们应该使用哪一个?何时使用? 试捕习语 这个习语是最受欢迎的习语之一,因为它已在JUnit 3中使用。 Test…

python网站数据写入mysql_python网络爬虫抓取动态网页并将数据存入数据库MySQL

简述以下的代码是使用python实现的网络爬虫,抓取动态网页 http://hb.qq.com/baoliao/ 。此网页中的最新、精华下面的内容是由JavaScript动态生成的。审查网页元素与网页源码是不同。以上是网页源码以上是审查网页元素所以此处不能简单的使用正则表达式来获取内容。以…

交通流预测 | Matlab基于KNN-BiLSTM的交通流预测(对比SVR、LSTM、GRU、KNN-LSTM)

目录 预测效果基本介绍程序设计参考资料 预测效果 基本介绍 交通流预测 | Matlab基于KNN-BiLSTM的交通流预测(对比SVR、LSTM、GRU、KNN-LSTM) 程序设计 完整程序和数据获取方式:私信博主回复Matlab基于KNN-BiLSTM的交通流预测(对…

JMetro“ Metro”选项卡,Java的TreeView和ContextMenu(JavaFX)

我刚刚发布了JMetro的新更新,将版本升级到3.3.0。 在此更新中,您将找到: 新的TreeView Fluent设计系统(Metro)启发风格; 新的Tabs和TabPane FDS启发风格; 新的上下文菜单采用深色FDS启发的样…

蒙特卡罗计算积分matlab,matlab下二重积分的蒙特卡洛算法

%%monte_carlo_ff.m%被积函数(二重)function ffmonte_carlo_ff(x,y)ffx*y^2;%函数定义处end%%monte_carlo.m%蒙特卡洛计算二重积分function resultmonte_carlo(a,b,c,d,n,m)%先y后x积分,a是x积分下限,b是x积分上限,c是y积分下限,d…

数据挖掘原理与算法_技术分享|大数据挖掘算法之FPGrowth算法

程一舰数据技术处我们常说我们生活在信息时代,实际上,我们更多的还是生活在数据时代。因为从过去到现在累积了大量的数据,对数据的挖掘和分析也仅是从最近几年大数据和人工智能技术的发展而兴起。我们对现有数据价值的利用还远低于数据本身拥…

centos 程序 mysql数据库文件位置,CentOS 更改MySQL数据库目录位置

引言:由于MySQL的数据库太大,默认安装的/var盘已经再也无法容纳新增加的数据,没有办法,只能想办法转移数据的目录。下面我简单整理一下这几天把MySQL从/var/lib/mysql目录下面转移到/home/mysql_data/mysql下面具体操作1、首先我们…

neo4j数据浏览器_Neo4j:在Neo4j浏览器的帮助下探索新数据集

neo4j数据浏览器在查看新的Neo4j数据库时,我发现遇到的一件困难就是确定其中包含的数据的结构。 我习惯于关系数据库,在该数据库中您可以轻松获取表列表和外键,以便您将它们相互连接。 传统上,使用Neo4j时很难做到这一点&#x…

mfc中怎么集成文件_怎么把几个pdf合并并打印在一份文件中?

a为什么我们要把pdf文件合并呢?当然我们要知道什么是pdf文件才能进行更多的操作,Pdf是我们许多人都会用到的一种存储文件的格式,它的内容基本是以图像的形式表现,所以我们在播放和打印的时候可以不用担心出现格式错乱的问题。PDF格…

php中日期选择代码,实现JS日期时间选择器

这次给大家带来实现JS日期时间选择器,实现JS日期时间选择器的注意事项有哪些,下面就是实战案例,一起来看一下。flatpickr 是一个轻量级、注重精益、由 UX 驱动和可扩展的 JavaScript 日期时间选择器。下载 演示 GitHubflatpickr 不依赖于任何…

Jib –为Spring Boot应用程序构建docker映像

使用Jib为示例Spring Boot应用程序创建docker映像是如此容易,这让我感到惊喜。 让我首先将Jib与以前使用的方法进行对比。 我正在使用bmuschko出色的gradle-docker插件创建docker映像。 如果可以访问docker守护程序以及基于dockerfile或直接Dockerfile的gradle ds…

python中正则表达式是什么意思_python – 正则表达式中[^.] *的含义是什么?

我试图从以下文本中获得482.75&#xff1a;< span id “yfs_l84_aapl”> 482.75< / span>我使用的正则表达式是&#xff1a;regex ’< span id “yfs_l84 _ [^.] *”>(.&#xff1f;)< / span>‘它起作用了.但是我不明白的是为什么[^.] *可以在这里匹配…

php steam 第三方登录,Steam第三方登录

Steam第三方登录Laravel PHP7.3前端登录界面if(isset($steamprofile))window.οnlοadfunction(){var steamprofile {!!$steamprofile!!};var steamid {{$steamid}};if(steamid){$.post(/ajax/SocilaAuthLogin,{data:{userdata:steamprofile,type:steamLogin},},function(dat…

setitimer 创建两个定时器_UE4 Timer(定时器)相关源码分析

前言文章属于旧有文章搬运, 之前在csdn上面2019.11.6修改Timer是定时器, 用途:延时执行事件周期性执行事件参考官方文档Using TimersTimer可以...Timer能...Timer...... 编不下去了, 自己百度谷歌吧(手动狗头)TimerManagerTimer的管理类是FTimerManager, 是一个全局的Timer管理…

is array php,PHP 源码 — is_array 函数源码分析

php 中的 is_arrayphp 中的 is_array&#xff0c;它的签名是 is_array ( mixed $var ) : bool实现的源码在\ext\standard\type.c中可以找到PHP_FUNCTION(is_array)所处的位置&#xff0c;大概位于 273 行。在 PHP 中&#xff0c;这个系列的函数&#xff0c;是由很多个&#xff…

apache mahout_使用Apache Mahout创建在线推荐系统

apache mahout最近&#xff0c; 我们一直在为Yap.TV实施推荐系统&#xff1a;您可以在安装应用程序并转到“ Just for you”标签后才能看到它的运行情况。 我们以Apache Mahout为基础进行建议。 Mahout是一个“可扩展的机器学习库”&#xff0c;包含使用协作过滤算法的基于用户…