webuploader在springMVC+jquery+Java开发环境下的大文件分片上传的实例代码

enctype="multipart/form-data"

2.并且屏蔽ApplicationContext-mvc.xml里面的拦截配置!

下面正式开始前后台代码开发:

1.在页面jsp文件中,调用webuploader组件的公共文件

页面上的控件代码:

因为我用的是自动上传,所以注释了上传按钮,upload3.js里也注释了相对的上传按钮的点击方法.

2.真正的上传组件代码是upload3.js,里面介绍了webuploader的初始化,分片,各种参数,具体可以参考官网上的API

 
$(function(){ 
  var $list = $("#thelist"); 
  var uploader ;// 实例化   
  uploader = WebUploader.create({  
      auto:true, //是否自动上传 
      pick: { 
 id: '#attach', 
 name:"multiFile", //这个地方 name 没什么用，和fileval 配合使用。 
 label: '点击选择文件,会自动上传', 
 multiple:false //默认为true，true表示可以多选文件，HTML5的属性 
      }, 
      swf: '../Uploader.swf', //在这里必需要引入swf文件，webuploader初始化要用 
      fileval:'multiFile', //提交到到后台，是要用"multiFile"这个名称属性来取文件的 
      server: "myPractice/webUploader.do", 
      duplicate:true,//是否可重复选择同一文件 
      resize: false, 
      chunked: true, //分片处理 
      chunkSize: 20 * 1024 * 1024, //每片20M 
      chunkRetry:2,//如果失败，则不重试 
      threads:1,//上传并发数。允许同时最大上传进程数。 
      fileNumLimit:1,//上传的文件总数 
      // 禁掉全局的拖拽功能。 
      disableGlobalDnd: true 
    });  
    // 当有文件添加进来的时候 
    uploader.on( "fileQueued", function( file ) { 
      console.log("fileQueued:"); 
      $list.append( "" + 
 "
" + file.name + "" + 
 "
正在上传...
" + 
      "" ); 
    }); 
    //当所有文件上传结束时触发 
    uploader.on("uploadFinished",function(){ 
      console.log("uploadFinished:"); 
    }) 
    //当文件上传成功时触发。 
    uploader.on( "uploadSuccess", function( file ,response) { 
//     alert(file.name); 
      $( "#"+file.id ).find("p.state").text("已上传"); 
    }); 
    uploader.on( "uploadError", function( file ) { 
      $( "#"+file.id ).find("p.state").text("上传出错"); 
      uploader.cancelFile(file); 
      uploader.removeFile(file,true); 
      uploader.reset(); 
    }); 
    //如果是手动上传,用下面的事件,并启用jsp页面上的上传按钮 
//    $("#upload").on("click", function() { 
//      uploader.upload(); 
//    }) 
}); 
 

3.前台完毕之后,需要找到后台Java代码,实现上传到服务器的功能,webuploader组件中server属性就是指向服务端代码:

@Controller 
@RequestMapping(value="/myPractice")//这里就是表明上传组件怎么通过server属性找到后端代码的,不要太在意细节 
public class MyPracticeController extends baseController { 
  
@RequestMapping(method = {RequestMethod.POST}, value = {"/webUploader"}) 
@ResponseBody 
public void webUploader(HttpServletRequest request, HttpServletResponse response) throws Exception { 
  try { 
      boolean isMultipart = ServletFileUpload.isMultipartContent(request); 
      if (isMultipart) { 
 FileItemFactory factory = new DiskFileItemFactory(); 
 ServletFileUpload upload = new ServletFileUpload(factory); 
 // 得到所有的表单域，它们目前都被当作FileItem 
 List fileItems = upload.parseRequest(request); 
 String id = ""; 
 String fileName = ""; 
 // 如果大于1说明是分片处理 
 int chunks = 1; 
 int chunk = 0; 
 FileItem tempFileItem = null; 
 for (FileItem fileItem : fileItems) { 
   if (fileItem.getFieldName().equals("id")) { 
     id = fileItem.getString(); 
   } else if (fileItem.getFieldName().equals("name")) { 
     fileName = new String(fileItem.getString().getBytes("ISO-8859-1"), "UTF-8"); 
   } else if (fileItem.getFieldName().equals("chunks")) { 
     chunks = NumberUtils.toInt(fileItem.getString()); 
   } else if (fileItem.getFieldName().equals("chunk")) { 
     chunk = NumberUtils.toInt(fileItem.getString()); 
   } else if (fileItem.getFieldName().equals("multiFile")) { 
     tempFileItem = fileItem; 
   } 
 } 
 //session中的参数设置获取是我自己的原因,文件名你们可以直接使用fileName,这个是原来的文件名 
 String fileSysName = this.getRequest().getSession().getAttribute("fileSysName").toString(); 
 String realname = fileSysName+fileName.substring(fileName.lastIndexOf("."));//转化后的文件名 
 this.getRequest().getSession().setAttribute("realname",realname); 
 String filePath = Const.VIDEOPATHFILE + "sound/";//文件上传路径 
 // 临时目录用来存放所有分片文件 
 String tempFileDir = filePath + id; 
 File parentFileDir = new File(tempFileDir); 
 if (!parentFileDir.exists()) { 
   parentFileDir.mkdirs(); 
 } 
 // 分片处理时，前台会多次调用上传接口，每次都会上传文件的一部分到后台 
 File tempPartFile = new File(parentFileDir, realname + "_" + chunk + ".part"); 
 FileUtils.copyInputStreamToFile(tempFileItem.getInputStream(), tempPartFile); 
 // 是否全部上传完成 
 // 所有分片都存在才说明整个文件上传完成 
 boolean uploadDone = true; 
 for (int i = 0; i < chunks; i++) { 
   File partFile = new File(parentFileDir, realname + "_" + i + ".part"); 
   if (!partFile.exists()) { 
     uploadDone = false; 
   } 
 } 
 // 所有分片文件都上传完成 
 // 将所有分片文件合并到一个文件中 
 if (uploadDone) { 
   // 得到 destTempFile 就是最终的文件 
   File destTempFile = new File(filePath, realname); 
   for (int i = 0; i < chunks; i++) { 
     File partFile = new File(parentFileDir, realname + "_" + i + ".part"); 
     FileOutputStream destTempfos = new FileOutputStream(destTempFile, true); 
     //遍历"所有分片文件"到"最终文件"中 
     FileUtils.copyFile(partFile, destTempfos); 
     destTempfos.close(); 
   } 
   // 删除临时目录中的分片文件 
   FileUtils.deleteDirectory(parentFileDir); 
 } else { 
   // 临时文件创建失败 
   if (chunk == chunks -1) { 
     FileUtils.deleteDirectory(parentFileDir); 
   } 
 } 
      } 
    } catch (Exception e) { 
      logger.error(e.getMessage(), e); 
    } 
} 

到这里基本完了,webuploader前后台设计的代码就这些,

Uploader.swf 

webuploader.min.js
webuploader.js
webuploader.css
这4个公共文件从官网可以下载,都一样.
最后,文件上传后页面样式是
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

以上所述是小编给大家介绍的webuploader在springMVC+jquery+Java开发环境下的大文件分片上传的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！