SpringMvc+jQuery 文件拖拽上传、选择上传
最近做了个简易的基于boostrap的文件上传功能,jsp版本的,后续会完善更多的功能,不过现在已经能用了,需要的小伙伴,直接引用下面的文件内容直接copy到自己的项目中就ok了,效果如图:
fileupload.css:
.fileupload_box {
position:relative;
width: 100%;
height: 100%;
border: 3px dashed #E5E5E5;
text-align: center;
z-index: 2000;
cursor: pointer;
margin:0 auto;
} .fileupload_message {
position: absolute;
font-size: 15px;
color: #999;
font-weight: normal;
height:30px;
top:20px;
width: 100%;
}
.odao_browser{
position:absolute;
width:50%;
height:36px;
line-height:36px;
left:25%;
bottom:10px;
-moz-border-radius: 3px; /* Firefox */
-webkit-border-radius: 3px; /* Safari 和 Chrome */
border-radius:3px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
background:#5c6bc0;
color:white;
cursor: pointer;
}
.odao_browser input {
position:absolute;
top:0;
width:100%;
height:100%;
opacity: .0;
filter: alpha(opacity= 0);
direction: ltr;
cursor: pointer;
}
odao_fileupload_plugin.js:
(function($) {
$.fn.odao_fileupload=function(setting){
var defaults = {
url: document.URL,
method: 'POST',
extraData: {},
maxFileSize: 0,
maxFiles: 0,
allowedTypes: '*',
extFilter: null,
dataType: null,
fileName: 'file',
onUploadSuccess: function(fileName,url){}
}; setting = $.extend({},defaults,setting);
var fn = {
init:function(){
var _this = this;
//拖拽文件上传
var $targetBox = document.getElementById($(_this).attr('id'));
$targetBox.addEventListener("drop", function(e) {
//取消默认浏览器拖拽效果
e.preventDefault();
var fileList = e.dataTransfer.files;
fn.upload.call(_this,fileList[0]);
}, false); //选择文件上传
$(_this).find('input').on('change',function(e){
var file = e.target.files;
var file = file.item(0);
fn.upload.call(_this,file);
}); },upload:function(file){
if(fn.checkType(file)) return;
var _this = this;
var fd = new FormData();
fd.append('files', file);
$.ajax({
url: $ctx+"/fileUpload/xxxxx.do",
type: 'POST',
success: function(data){
if(data.success)
setting.onUploadSuccess.call(_this,file.name,data);
}
},
error: function(){
showReturnMsg('上传失败','error');
},
data: fd,
cache: false,
contentType: false,
processData: false
});
},
//允许上传的文件类型
checkType:function(file){
if (setting.allowedTypes != '*' && setting.allowedTypes.indexOf(file.type) == -1) {
showReturnMsg('文件格式错误,只能上传'+setting.allowedTypes+'格式的文件','error');
return true;
}
return false
}
}; return this.each(function(i,n){
fn.init.call($(n));
});
}; $(document).on('dragenter', function (e) { e.stopPropagation(); e.preventDefault(); });
$(document).on('dragover', function (e) { e.stopPropagation(); e.preventDefault(); });
$(document).on('drop', function (e) { e.stopPropagation(); e.preventDefault(); });
})(jQuery);
jsp:
<div id="target_box" class="fileupload_box">
<p class="fileupload_message" >将图片拖动到这里</p>
<p class="odao_chooseFileUpload odao_browser">选择文件
<input type="file" name="files" multiple="multiple">
</p>
</div>
调用方法:
$('#target_box').odao_fileupload({
onUploadSuccess:function(fileName,attachmentUrl){
//保存上传文件信息并记录日志
$.ajax({
type: "post",
url: '',
data: {''},
dataType: "json",
success: function(data){
if(data.success){
alert('上传成功');
}else{
alert('上传失败');
}
}
});
},
allowedTypes:'image/png'
});
spring 配置:
<!-- 文件上传相关 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!--one of the properties available;the maximum upload size in bytes 100M-->
<property name="maxUploadSize" value="104857600"/>
</bean>
FileUpload.java:
@RequestMapping("/uploadProjectBgPicture.do")
public String uploadProjectBgPicture(@RequestParam MultipartFile[] files,HttpServletRequest request,HttpServletResponse response) throws IOException{
具体操作内容
}
SpringMvc+jQuery 文件拖拽上传、选择上传的更多相关文章
- html5 文件拖拽上传
本文首先发表在 码蜂笔记 : http://coderbee.net/index.php/web/20130703/266 html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网 ...
- php和js实现文件拖拽上传
Dropzone.js实现文件拖拽上传 http://www.sucaihuo.com/php/1399.html demo http://www.sucaihuo.com/jquery/13/139 ...
- day25—JavaScript实现文件拖拽上传案例实践
转行学开发,代码100天——2018-04-10 今天记录一个利用JavaScript实现文件拖拽上传到浏览器,后天将文件打开的小案例. 基本功能:1点击添加文件 2 文件拖拽添加 html: < ...
- Web存储及文件拖拽
存储 实现内容的永久保存(localStorage) 保存: localStorage.自定义键名="123"; 获取: //判断是否有内容 if(localStorage.自定义 ...
- VC实现文件拖拽OnDropFiles
文章转自http://blog.csdn.net/zamaolangzi/article/details/5645284 使用过QQ的人都知道,只要把文件拖拽到消息框中就可以传送文件了.那么这种功能是 ...
- html5 drag 文件拖拽浅淡
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery可拖拽3D万花筒旋转特效
这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovert ...
- C#之winform实现文件拖拽功能
将一个文件拖拽到窗体的某个控件时,将该控件的路径显示在该控件上,只要拿到了路径自然可以读取文件中的内容了 将一个控件的属性AllowDrop设置为true,然后添加DragDrop.DragEnter ...
- Linux下安装VMware Tools(使虚拟机支持文件拖拽)
如图点击虚拟机找到安装VMware Tools选项,点击后会在虚拟机桌面显示一个光盘,双击进入如下页面: 选择压缩包将其复制放入Home中不带中文的文件夹: 打开终端,输入cd命令进入文件夹,将压缩包 ...
随机推荐
- 第三十四天 UDP协议 并发编程
一.今日内容 1.UDP协议 2.并发编程 操作系统的发展史 多道技术 进程 线程 IO模型 socketserver 案例:文件上传下载 元类 单例 logging filter 二.TCP半连接池 ...
- 阿里云上,Ubuntu下配置Nginx,在tomcat中加了https协议就不可以了
问题 阿里云上,Ubuntu服务器,本来部署的是tomcat,并且使用了https 协议.后来为了静态资源分离集成了 nginx,nginx代理跳转到 tomcat.刚开始直接访问http 网址发现, ...
- 树莓派(Raspberry Pi)使用Shell编写的极简Service
树莓派(Raspberry Pi)运行的系统是基于Debian的,不仅可以运行Shell,还支持systemd和docker,可以编写一个简单的服务,让其在启动时运行,执行一些自动化的操作.这里在Ra ...
- 09 Zabbix4.0系统clone、mass update使用
点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 09 Zabbix4.0系统clone.mass update使用 1. clone使用: clo ...
- [APIO2008]免费道路(生成树)
新亚(New Asia)王国有 N 个村庄,由 M 条道路连接.其中一些道路是鹅卵石路,而其它道路是水泥路.保持道路免费运行需要一大笔费用,并且看上去 王国不可能保持所有道路免费.为此亟待制定一个新的 ...
- [JLOI2016/SHOI2016]侦察守卫(树形dp)
小R和B神正在玩一款游戏.这款游戏的地图由N个点和N-1条无向边组成,每条无向边连接两个点,且地图是连通的.换句话说,游戏的地图是一棵有N个节点的树. 游戏中有一种道具叫做侦查守卫,当一名玩家在一个点 ...
- Typescript学习笔记(一)基础类型
为了面向ng2和前端未来,开始搞向ts,ts是微软出的一枚语言,作为es6的超集,他出的一些特性还是蛮好用的(略坑).对于我等纯前端(从开始就接触javascript)的人来说,真想说,这特么什么鬼. ...
- 网页发起qq临时会话
qq官方:http://shang.qq.com/v3/widget.html
- Linux下VMware在更新完内核无法启动
该问题尚未解决,我已经换Oracle VM VirtualBox
- 洛谷P3168 任务查询系统
题意:有n个任务,第i个的存在时间是li~ri,有个权值.求t时刻第k大的权值. 这毒瘤...本来是前缀和 -> 主席树,我是树套树...然后光荣TLE. 其实很裸.一开始我写的是每个位置维护一 ...