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.重要概念:在正式介绍逻辑斯蒂回归模型之前,需要先对一些基本概念有所了解…

交通流预测 | 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启发的样…

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

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

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

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

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

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

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

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

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

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

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

Java应用程序的简单令牌认证

“我喜欢编写身份验证和授权代码。” 〜从来没有Web开发人员。 厌倦了一次又一次地建立相同的登录屏幕? 尝试使用Okta API进行托管身份验证,授权和多因素身份验证。 JSON Web令牌已Swift成为保护Web应用程序安全的标准,并取代了Cookie和会话…

matlab中rb代表什么意思,你知道“川藏线上”女游客举着“求RB”的牌子是啥意思吗?暗语啊!...

现在穷游好像一种旅行圈的时髦,很多人都想着穷游能够锻炼人的意志,能够促进人与人的交流与合作,能够在路上遇到不一样的精彩,能够发现人性与真善美。现在穷游的人不在少数,尤其是在川藏线上,想要穷游入藏的…

华为主题锁屏壁纸换不掉_华为手机总多出莫名的照片?那是因为这3个设置没关闭,赶紧自查...

随着华为在科技、5G以及数码领域的表现越来越好,使用华为手机的人也越来越多。不知道你在使用华为手机的过程中,有没有这样的感觉,华为手机总是多出莫名其妙的照片,即使删除了下次还会出现。如果有这样的情况,可能是手…

php nginx 域名重定向,Nginx默认虚拟主机、用户认证、域名重定向

Nginx默认虚拟主机定义默认虚拟主机配置文件,在http下面加入include vhost/*.conf在/usr/local/nginx/conf/下创建目录#mkdir vhost/ //创建vhost目录#cd vhost/ //进入目录#vim aaa.com.conf //编辑文件server{listen 80 default_server; // 有这个标记的就是默认虚拟主机serv…

Java:使用SingletonStream获得性能

仅具有一个元素的Java流有时会在应用程序中造成不必要的开销。 了解如何使用SingletonStream对象并为其中某些此类流获得十倍的性能,并了解如何同时简化代码。 背景 Java 8中的Stream库是有史以来Java语言最强大的功能之一。 一旦您开始了解它的多功能性和所产生的…

php调用pdf2html,php html2pdf

*安装composer运行html2pdf时,readme里面建议按照composer-setup.exe安装过程中出现openssl的问题,在php.ini中开启相应extension即可,路径写绝对路径,否则按默认路径找不到在html2pdf的文件路径下,cmd运行composer in…

JDK 11:新的默认收集方法toArray(IntFunction)

“ JDK 11 Early-Access发行说明 ”表明JDK 11的Early Access Build 20在Collection接口上包括一个新的默认方法 ,该方法 “允许将集合的元素转移到所需运行时类型的新创建的数组中”。 这个新的默认方法 [ Collection.toArray(IntFunction) …

获取清空textarea的文字内容_运用|你会做 词云图(文字云) 吗?

词云图,也叫文字云,是对文本中出现频率较高的“关键词”予以视觉化的展现,词云图过滤掉大量的低频低质的文本信息,使得浏览者只要一眼扫过文本就可领略文本的主旨。今天,兰色就分享一下词云图的做法。制作步骤:1、打开词云图网站打开网页https://wordart…

如何在Spring Boot App中集成H2数据库

你好朋友, 在本教程中,我们将尝试探索如何在Spring Boot应用程序中与H2数据库集成。 在进行检查之前,让我们了解有关H2数据库的一些基础知识,如下所述,然后我们将讨论H2数据库与Spring Boot的集成。 什么是H2数据库…