利用webuploader插件上传图片文件,完整前端示例demo,服务端使用SpringMVC接收
利用WebUploader插件上传图片文件完整前端示例demo,服务端使用SpringMVC接收
Webuploader简介
WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。
采用大文件分片并发上传，极大的提高了文件上传效率。
demo效果图
Tip:底部附完整demo源码地址链接
详细前端demo源码部分(复制粘贴可直接使用)
HTML 部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>WebUploader示例</title>
<link rel="stylesheet" href="webuploader.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="uploadArea">
<div style="display: flex;justify-content: center;">
<div id="imagePicker">选择图片</div>
<button id="sureUpload">
确认上传
</button>
</div>
<ul id="imagesList">
<!-- 各种状态图片示例部分 -->
<li>
<div class="wait state">等待上传</div>
<span class="delete">×</span>
<img src="https://avatars0.githubusercontent.com/u/42485491?s=60&v=4" alt="图片">
<p class="filename">xxxxxxxxxxxxxxxxxx.png</p>
</li>
<li>
<div class="error state">上传出错</div>
<span class="delete">×</span>
<img src="https://avatars0.githubusercontent.com/u/42485491?s=60&v=4" alt="图片">
<p class="filename">xxxxxx.png</p>
</li>
<li>
<div class="success state">上传成功</div>
<span class="delete">×</span>
<img src="https://avatars0.githubusercontent.com/u/42485491?s=60&v=4" alt="图片">
<p class="filename">xxxxxx.png</p>
</li>
<li>
<div class="progress state">上传中</div>
<span class="delete">×</span>
<img src="https://avatars0.githubusercontent.com/u/42485491?s=60&v=4" alt="图片">
<p class="filename">xxxxxx.png</p>
</li>
</ul>
</div>
<!-- 引入jQuery -->
<script src="js/jquery.min.js"></script>
<!-- 引入Webuploader -->
<script src="js/webuploader.js"></script>
<!-- 引入上传图片的js片段 -->
<script src="js/upload.js"></script>
</body>
</html>
JS部分
upload.js
$(function () {
var baseUrl="http://localhost:8080/Test/";
/**
* 创建的WebUploadr对象
*/
var imageUploader = WebUploader.create({
// 是否开起分片上传。
chunked: false,
//选择完文件或是否自动上传
auto: false,
//swf文件路径
swf: 'Uploader.swf',
// 上传并发数。允许同时最大上传进程数[默认值：3] 即上传文件数
threads: 3,
//文件接收服务端接口
server: baseUrl + "file/save",
// 选择文件的按钮
pick: '#imagePicker',
//上传请求的方法
method: "POST",
// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
resize: false,
//指定接受哪些类型的文件
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
}
});
/**
* 文件被添加进队列的时候
*/
imageUploader.on('fileQueued', function (file) {
var $list = $('#imagesList');
var $li = $(' <li id="'+file.id+'">'+
'<div class= "wait state">等待上传</div>'+
'<span class="delete">×</span>'+
'<img src="" alt="图片">'+
'<p class="filename">'+file.name+'</p>'+
'</li>'),
$img = $li.find('img');
$list.append($li);
//创建图片预览
imageUploader.makeThumb(file, function (error, src) {
if (error) {
$img.replaceWith('<span>不支持格式,不能预览</span>');
return;
}
$img.attr('src', src);
});
});
//移除选择的图片
$('#imagesList').on('click', '.delete', function () {
var fileId = $(this).parents('li').attr('id');
if (confirm("确认移除次图片吗?")) {
// 从上传队列中移除
imageUploader.removeFile(fileId, true);
// 从视图中移除缩略图
$(this).parents('li').remove();
}
});
// 文件上传过程中创建进度条实时显示。
imageUploader.on('uploadProgress', function (file, percentage) {
var $li = $('#' + file.id),
$progress = $li.find('div.progress');
// 避免重复创建
if (!$progress.length) {
$li.children('div.state').remove();
$progress = $('<div class="progress state"></div>').appendTo($li);
}
$progress.text('上传中');
});
// 文件上传成功处理。
imageUploader.on('uploadSuccess', function (file, response) {
var $li = $('#' + file.id),
$success = $li.find('div.success');
// 避免重复创建
if (!$success.length) {
$li.children('div.state').remove();
$success = $('<div class="success"></div>').appendTo($li);
}
$success.text('上传成功');
});
//上传出错
imageUploader.on('uploadError', function (file) {
var $li = $('#' + file.id),
$error = $li.find('div.error');
// 避免重复创建
if (!$error.length) {
// 移除原来的
$li.children('div.state').remove();
// 创建新的状态进度条
$error = $('<div class="error"></div>').appendTo($li);
}
$error.text('上传出错');
});
/**
* 确认上传
*/
$("#sureUpload").on('click', function () {
imageUploader.upload();
})
})
Spring MVC部分
/**
* 保存文件file/image
* @param request
* @return
*/
@RequestMapping(value = "save",method = RequestMethod.POST,produces = "application/json;charset=utf-8")
@ResponseBody
public String saveFile(HttpServletRequest request){
//获取项目根路径(web.xml中需先设置才能使用这个获取项目路径)
String rootpath=System.getProperty("rootpath");
MultipartHttpServletRequest req= (MultipartHttpServletRequest) request;
MultipartFile multipartFile=req.getFile("file");
//保存路径
String realPath=rootpath+"../upload/images";
//获取上传的源文件名
String filename = multipartFile.getOriginalFilename();
//文件类型(.xxxx)
String contentType=filename.substring(filename.lastIndexOf("."));
try{
//判断文件夹是否存在
File dir=new File(realPath);
// 不存在则创建
if(!dir.exists()){
dir.mkdirs();
}
//保存图片
File file = new File(realPath, filename);
//写出文件
multipartFile.transferTo(file);
}catch (Exception e){
e.printStackTrace();
}
return "success";
}
样式部分
webuploader.css
.webuploader-container {
position: relative;
}
.webuploader-element-invisible {
position: absolute !important;
width: 100%;
display: block;
height: 100%;
opacity: 0;
}
/* 所见上传按钮效果关键样式部分 */
.webuploader-pick {
position: relative;
display: inline-block;
cursor: pointer;
background: #00b7ee;
padding: 9px 20px;
color: #fff;
text-align: center;
border-radius: 3px;
overflow: hidden;
}
.webuploader-pick-hover {
background: #00a2d4;
}
.webuploader-pick-disable {
opacity: 0.6;
pointer-events:none;
}
style.css
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
/* 图片上传区域 */
#uploadArea {
width: 888px;
}
/* 承载Webuploader按钮的标签 */
#imagePicker {
display: block;
margin: 6px;
}
#imagesList {
position: relative;
overflow: hidden;
}
#imagesList li {
display: block;
position: relative;
width: 110px;
height: 140px;
margin: 10px;
float: left;
}
/* 确认上传按钮 */
#sureUpload {
margin: 6px;
height: 38px;
padding: 0 20px;
display: block;
color: #fff;
text-align: center;
cursor: pointer;
background-color: rgba(76, 175, 80, .9);
border: none;
}
/* 图片删除按钮 */
#imagesList li span.delete {
z-index: 10;
width: 18px;
height: 18px;
background-color: red;
display: block;
border-radius: 50%;
text-align: center;
line-height: 18px;
color: #fff;
cursor: pointer;
position: absolute;
right: -4px;
top: -10px;
}
/* 预览图片大小 */
#imagesList li img {
width: 100%;
}
/* 文件名 */
#imagesList li p.filename {
text-align: center;
/* 多的内容换行 */
/* word-wrap: break-word;
word-break: break-all; */
/* 多的部分截断 用...代替*/
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
/* 上传进度条状态样式 */
.wait,
.error,
.success,
.progress {
width: 100%;
text-align: center;
font-weight: bold;
position: absolute;
top: -1px;
left: 0;
}
/* 等待上传 */
.wait {
background-color: rgba(158, 158, 158, .5);
}
/* 上传出错 */
.error {
background-color: rgba(255, 0, 0, .5);
color: #fff;
}
/* 上传成功 */
.success {
background-color: rgba(76, 175, 80, .9);
color: #fff;
}
/* 上传中 */
.progress {
background-color: rgba(255, 235, 59, .7);
color: #fff;
}
源码链接戳我查看
利用webuploader插件上传图片文件,完整前端示例demo,服务端使用SpringMVC接收的更多相关文章
- 利用webuploader实现超大文件分片上传、断点续传
之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需 ...
- android上传图片、视频、文件，服务端使用wcf接收
最近一直在搞android上传图片.视频.文件,服务端使用wcf接收,本文对调试中的遇到的问题进行记录. 首先android上传一些小图片是比较容易的一天下来差不多就能调试出来,但是上传一些大的文件时 ...
- 前端利用webuploader实现超大文件分片上传、断点续传
本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案.见文章:WEB版一次选择多个文件进行批量上传(swfupload)的解决方案. 本人在2013年时使用plupload为核心 ...
- b/s利用webuploader实现超大文件分片上传、断点续传
本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案.见文章:WEB版一次选择多个文件进行批量上传(swfupload)的解决方案. 本人在2013年时使用plupload为核心 ...
- 利用Spring MVC 上传图片文件
本文转自:http://amcucn.iteye.com/blog/264457.感谢作者 近日在工作当中,需要用到上传图片的功能,然而自己平时学习的时候只会使用struts的上传功能,但因为项目并没 ...
- php利用webuploader实现超大文件分片上传、断点续传
PHP用超级全局变量数组$_FILES来记录文件上传相关信息的. 1.file_uploads=on/off 是否允许通过http方式上传文件 2.max_execution_time=30 允许脚本 ...
- Spring MVC中使用Swagger生成API文档和完整项目示例Demo，swagger-server-api
本文作者:小雷FansUnion-一个有创业和投资经验的资深程序员-全球最大中文IT社区CSDN知名博主-排名第119 实际项目中非常需要写文档,提高Java服务端和Web前端以及移动端的对接效率 ...
- jQuery结合Ajax实现简单的前端验证和服务端查询
上篇文章写了简单的前端验证由传统的JavaScript转向流畅的jQuery滑动验证,现在拓展一下,使用Ajax实现用户体验比较好的异步查询,同样还是从建立一个简单的表单开始 <form nam ...
- 利用python多线程实现多个客户端与单个服务端的远程ssh
本次实验设计两个方面的代码,第一个是客户端,代码如下: import os from socket import * c = socket(AF_INET,SOCK_STREAM) c.connect ...
随机推荐
- 使用 /proc 文件系统
/proc 文件系统是一个特殊的软件创建的文件系统, 内核用来输出消息到外界. /proc 下 的每个文件都绑到一个内核函数上, 当文件被读的时候即时产生文件内容. 我们已经见到 一些这样的文件起作用 ...
- 2016.8.16上午纪中初中部NOIP普及组比赛
2016.8.16上午纪中初中部NOIP普及组比赛 链接:https://jzoj.net/junior/#contest/home/1334 这次也翻车了,感觉比之前难多了. 辛辛苦苦改完了,太难改 ...
- Tensortflow安装
1. CMD里面 pip install --upgrade --ignore-installed tensorflow
- 爬虫——python——百度地图经纬度查询——经纬度查看地点地名——利用百度API获取地名经纬度——爬取所有的中国地址
import requests address = '40.8587960,86.866991' url = 'http://api.map.baidu.com/geocoder?output=jso ...
- vuex mutation，action理解
1. 在store中分别注册mutation和action,action中用commit同步调用mutation来执行修改state,但是在组件中则使用dispatch异步调用action 2. 通俗 ...
- LintCode_13 字符串查找
题目 对于一个给定的 source 字符串和一个 target 字符串,你应该在 source 字符串中找出 target 字符串出现的第一个位置(从0开始).如果不存在,则返回 -1. 您在真实的面 ...
- samba初级使用记录
首先安利一下什么是samba: Samba是在Linux和UNIX系统上实现SMB协议的一个免费软件,由服务器及客户端程序构成.SMB(Server Messages Block,信息服务块)是一种在 ...
- centos安装gcc4.8.2
1. 下载源码:镜像地址http://mirror.bjtu.edu.cn/gnu/gcc/gcc-4.8.2/gcc-4.8.2.tar.gz用svn下载可以随时更新到最新的版本svn checko ...
- css3之背景background-origin,background-clip,background-size
background-origin属性指定了背景图像的位置区域. content-box, padding-box,和 border-box区域内可以放置背景图像. background-clip用来 ...
- JS写一个方法，传入一个数组，返回该数组的层深(维度)
现在我们有一个多维数组,我们想得到该数组的层深,即最大维度 如:var arr = [1, [4,[5,6,[7]]], [2,3]] = 0:返回4:那么我们该怎么做呢? 核心思想:递归,循环遍历 ...