JS-⽂件上传组件WebUploader使⽤详解1（带进度的⽂件上传
⼀、基本介绍
1，什么是 WebUploader？
2，功能特点
1. 分⽚、并发：WebUploader 采⽤⼤⽂件分⽚并发上传，极⼤的提⾼了⽂件上传效率。
2. 预览、压缩：WebUploader ⽀持常⽤图⽚格式 jpg,jpeg,gif,bmp,png 预览与压缩，节省⽹络数据传输。
3. 多途径添加⽂件：⽀持⽂件多选，类型过滤，拖拽(⽂件 & ⽂件夹)，图⽚粘贴功能。
4. HTML5 & FLASH：兼容主流浏览器，接⼝⼀致，实现了两套运⾏时⽀持，⽤户⽆需关⼼内部⽤了什么内核。
5. MD5 秒传：当⽂件体积⼤、量⽐较多时，⽀持上传前做⽂件 md5 值验证，⼀致则可直接跳过。
6. 易扩展、可拆分：采⽤可拆分机制, 将各个功能独⽴成了⼩组件，可⾃由搭配。
（2）接着在页⾯中将 webuploader.js 和 webuploader.css 这两个⽂件引⼊进来。其中 webuploader.css ⾥⾯内容很简单，就是定义了“选择按钮”的样式（⼀个蓝⾊按钮，具体样式见后⾯效果图）
注意：由于 webuploader 依赖 jQuery，所以我们项⽬中还需将 jQuery 引⼊。
<!--引⼊CSS-->
<link rel="stylesheet" type="text/css" href="js/webuploader.css">
<!--引⼊JS-->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/webuploader.js"></script>
（3）⽽在初始化 WebUploader 时，我们还需要指定 Uploader.swf 的地址。具体配置⽅法见下⾯的样例代码部分。
注意：Uploader.swf 是在当浏览器不⽀持H5的情况下的备⽤⽅案。我们只需配置好路径即可，具体采⽤哪种⽅案 WebUploader 会⾃动选择，同时对⽤户体验⽅⾯也没任何区别。
⼆、基本⽤法
1，效果图
（1）点击“选择⽂件”按钮选择需要上传的⽂件，选择完毕后在下⽅显⽰出⽂件名。
（2）点击“开始上传”按钮后开始上传⽂件，同时在上传的过程中会有进度显⽰。
（3）同时服务端在接受并保存⽂件后，会将接收到的⼀些⽂件信息返回过来，客户端这边将其打印到控制台中，具体内容如下。
（4）当然我们也可以选择多个⽂件，然后再⼀起上传。
**
**
2，样例代码
（1）客户端代码（index.html）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--引⼊CSS-->
<link rel="stylesheet"type="text/css"href="js/webuploader.css">
<!--引⼊JS-->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/webuploader.js"></script>
<script type="text/javascript">
$(function(){
//开始上传按钮
var $btn =$('#ctlBtn');
//⽂件信息显⽰区域
var $list =$('#thelist');
//当前状态
var state ='pending';
//初始化Web Uploader
var uploader = ate({
// swf⽂件路径
swf:'${ctx!}/assets/webuploader/Uploader.swf',
// ⽂件接收服务端。
//server: 'www.hangge/upload.php',
server:'${ctx!}/fileupload.do?path=uploadfilemanager',
// 选择⽂件的按钮。可选。
/
/ 内部根据当前运⾏是创建，可能是input元素，也可能是flash.
pick:'#picker',
//设置⽂佳上传的类型格式
//设置⽂佳上传的类型格式
// accept: { //不建议使⽤，使⽤时选择⽂件div失效
// title: 'file',
// extensions: 'xls,xlsx,word,doc,ppt,docx,rtf,ppt,txt,pptx,pdf',
// mimeTypes: '.xls,.xlsx,.word,.doc,.ppt,.docx,.rtf,.ppt,.txt,.pptx,.pdf' // }
});
// 当有⽂件被添加进队列的时候（选择⽂件后调⽤）
<('fileQueued',function( file ){
$list.append('<div id="'+ file.id +'" class="item">'+
'<h4 class="info">'+ file.name +'</h4>'+
'<p class="state">等待上传...</p>'+
'</div>');
});
// ⽂件上传过程中创建进度条实时显⽰。
<('uploadProgress',function( file, percentage ){
var $li =$('#'+file.id );
$li.find('p.state').text('上传中（'+parseInt(percentage *100)+'%）');
});
// ⽂件上传成功后会调⽤
<('uploadSuccess',function( file ){
$('#'+file.id ).find('p.state').text('已上传');
savefilemanager("/vod/uploadfilemanager/"+file.name,file.name);
});
// ⽂件上传失败后会调⽤
<('uploadError',function( file ){
$('#'+file.id ).find('p.state').text('上传出错');
});
// ⽂件上传完毕后会调⽤（不管成功还是失败）
<('uploadComplete',function( file ){
$('#'+file.id ).find('.progress').fadeOut();
});
// all事件（所有的事件触发都会响应到）
<('all',function( type ){
if( type ==='startUpload'){
state ='uploading';
}else if( type ==='stopUpload'){
state ='paused';
}else if( type ==='uploadFinished'){
state ='done';
}
if( state ==='uploading'){
$('暂停上传');
}else{
$('开始上传');
}
});
// 开始上传按钮点击事件响应
$('click',function(){
if( state ==='uploading'){
uploader.stop();
}else{
uploader.upload();
}
});
});
</script>
<style>
bytearray中文是什么#picker{
display: inline-block;
}
#ctlBtn{
position: relative;
display: inline-block;
cursor: pointer;
background: #EFEFEF;
padding: 10px 15px;
color: #2E2E2E;
text-align: center;
border-radius: 3px;
overflow: hidden;
}
#ctlBtn:hover{
#ctlBtn:hover{
background: #DDDDDD;
}
</style>
<style>
#picker{
display: inline-block;
}php语言是属于哪种类型的计算机语言
#ctlBtn{
position: relative;
display: inline-block;
cursor: pointer;
background: #EFEFEF;
padding: 10px 15px;
color: #2E2E2E;
text-align: center;
border-radius: 3px;
overflow: hidden;
}
#ctlBtn:hover{
background: #DDDDDD;
}
</style>
</head>
<body>
<div id="uploader"class="wu-example">
<div class="btns">
<div id="picker">选择⽂件</div>
<div id="ctlBtn"class="webuploader-upload">开始上传</div>
</div>
<!--⽤来存放⽂件信息-->
<div id="thelist"class="uploader-list"></div>
</div>
</body>
</html>
（2）服务端代码（upload.java）
注意：客户端是通过 form 表单的形式提交的
package;
import File;
import IOException;
import PrintWriter;
import UnsupportedEncodingException;
import Map;
import Properties;
import Resource;
import HttpServletRequest;
import HttpServletResponse;
import Controller;
import RequestMapping;oracle认证实施专家
import ResponseBody;
import MultipartFile;
import MultipartHttpServletRequest;
import FileTools;
@Controller
public class ImageUploadController {
@RequestMapping("/fileupload")
public@ResponseBody String doulefileupload(HttpServletRequest request, HttpServletResponse response)throws Exception { response.setContentType("text/html;charset=UTF-8");
PrintWriter out = Writer();
MultipartHttpServletRequest multipartRequest =(MultipartHttpServletRequest) request;
Map<String, MultipartFile> fileMap = FileMap();
MultipartFile multipartFile =null;
String fileName =null;
for(Map.Entry<String, MultipartFile> set : Set()){
urlencode方法是什么multipartFile = Value();// ⽂件名
System.out.println(multipartFile);
System.out.println(multipartFile);
}
fileName =this.storeIOcdd(multipartRequest, multipartFile);//以绝对路径存储
out.print(fileName);
return fileName;
}
// 接受图⽚，以相对路径返回图⽚地址
private String storeIOcdd(HttpServletRequest request, MultipartFile file)throws Exception {
String _fileName ="";
request.setCharacterEncoding("UTF-8");
String savepath = Parameter("path");
String fileName ="";
String realPath = Session().getServletContext().getRealPath("vod/"+ savepath +""); File f =new File(realPath);
if(!f.exists()&&!f.isDirectory()){//是⽂件夹，且⽂件夹不存在则创建⽂件夹
f.mkdirs();
}
Name().equals("software")){
FileTools.delAllFiles(realPath);
}
if(file ==null){
return"dream_ioc"+ File.separator +"headpic.jpg";
}
if(file.isEmpty()){
System.out.println("⽂件未上传");
}else{
smart原则的m_fileName = OriginalFilename();
fileName = realPath + File.separator + _fileName;
File restore =new File(fileName);
try{
jquery下载文件进度条}catch(Exception e){
throw new RuntimeException(e);
}
}
// 返回默认的图⽚地址
return"vod/"+ savepath +"/"+ _fileName;
}
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论