webuploader上传文件，后台Java接收

最新推荐文章于 2024-07-16 11:25:15 发布
最新推荐文章于 2024-07-16 11:25:15 发布
阅读量3k 收藏 1
点赞数 1

前台html页面:

 

<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="resources/webuploader/webuploader.css">
<link rel="stylesheet" type="text/css" href="resources/css/boostrap/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="resources/css/boostrap/bootstrap.min.css">
 
<script type="text/javascript" src="resources/js/jquery-1.11.0.min.js"></script>
</head>
<body>
 <div id="uploader" class="wu-example">
  <!--用来存放文件信息-->
  <div id="thelist" class="uploader-list"></div>
  <div class="btns">
   <div id="picker">选择文件</div>
   <button id="ctlBtn" class="btn btn-default">开始上传</button>
  </div>
 </div>
 <script type="text/javascript"
  src="resources/webuploader/webuploader.js"></script>
 <script type="text/javascript" src="resources/js/index.js"></script>
</body>
</html>
引用的index.js:

 

$(function() {
 var $list = $("#thelist");
 var $btn = $("#ctlBtn");
 var state = 'pending'; // 上传文件初始化
 var uploader = WebUploader.create({
  swf : 'webuploader/Uploader.swf',
  server : 'http://localhost:8080/Shopping/filecontroller/upload',
  pick : '#picker',
  resize : false
 });
 uploader.on('fileQueued', function(file) {
  $list.append('<div id="' + file.id + '" class="item">'
    + '<h4 class="info">' + file.name + '</h4>'
    + '<p class="state">等待上传...</p>' + '</div>');
 });
 
 uploader.on('uploadProgress',
     function(file, percentage) {
      var $li = $('#' + file.id), $percent = $li
        .find('.progress .progress-bar');
 
      // 避免重复创建
      if (!$percent.length) {
       $percent = $(
         '<div class="progress progress-striped active">'
           + '<div class="progress-bar" role="progressbar" style="width: 0%">'
           + '</div>' + '</div>')
         .appendTo($li).find('.progress-bar');
      }
 
      $li.find('p.state').text('上传中');
 
      $percent.css('width', percentage * 100 + '%');
     });
 
 
  uploader.on('uploadSuccess', function(file) {
  $('#' + file.id).find('p.state').text('已上传');
 });
 
 uploader.on('uploadError', function(file) {
  $('#' + file.id).find('p.state').text('上传出错');
 });
 
 uploader.on('uploadComplete', function(file) {
  $('#' + file.id).find('.progress').fadeOut();
 });
 $btn.on('click', function() {
  if (state === 'uploading') {
   uploader.stop();
  } else {
   uploader.upload();
  }
 });
 
});
后台的Java Controller:

 

package com.wdg.controller;
 
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.List;
 
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.log4j.Logger;
import org.springframework.util.FileCopyUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
 
import com.alibaba.fastjson.JSONObject;
import com.wdg.util.BuildJsonOfObject;
 
@RestController
@RequestMapping("/filecontroller")
public class UploadFileController {
 
 private Logger log;
 
 public UploadFileController() {
  this.log = Logger.getLogger(this.getClass());
 }
 
 @RequestMapping(value = "/upload", method = RequestMethod.POST)
 public String upload(@RequestParam("file")MultipartFile files,HttpServletRequest request, HttpServletResponse response) throws IOException {
  JSONObject json=new JSONObject();
  response.setCharacterEncoding("utf-8");
  String msg = "添加成功";
  log.info("-------------------开始调用上传文件upload接口-------------------");
  try{
  String name = files.getOriginalFilename();
  String path = this.getClass().getClassLoader().getResource("/").getPath();
  int index = path.indexOf("Shopping");
  path = path.substring(0, index + "Shopping".length()) + "/WebContent/resources/upload/";
  path = path + File.separator + name;
  File uploadFile = new File(path);
  files.transferTo(uploadFile);
  }catch(Exception e){
   msg="添加失败";
  }
  log.info("-------------------结束调用上传文件upload接口-------------------");
  json.put("msg", msg);
  return BuildJsonOfObject.buildJsonOfJsonObject(json);
 }
 
 /*private byte[] inputStreamToByte(InputStream is) throws IOException {
  ByteArrayOutputStream bAOutputStream = new ByteArrayOutputStream();
  int ch;
  while ((ch = is.read()) != -1) {
   bAOutputStream.write(ch);
  }
  byte data[] = bAOutputStream.toByteArray();
  bAOutputStream.close();
  return data;
 }*/
 
 @RequestMapping(value = "/uploadservlet", method = RequestMethod.POST, produces = "text/html;charset=utf-8")
 protected String uploadServlet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  JSONObject json=new JSONObject();
  response.setCharacterEncoding("utf-8");
  String msg = "添加成功";
  log.info("-------------------开始调用上传文件uploadservlet接口-------------------");
  try {
   if (request instanceof MultipartHttpServletRequest) {
    MultipartHttpServletRequest mr = (MultipartHttpServletRequest) request;
    List<MultipartFile> multipartFile = mr.getFiles("myfile");
    if (null != multipartFile && !multipartFile.isEmpty()) {
     MultipartFile file = multipartFile.get(0);
     String name = file.getOriginalFilename();
     String path = this.getClass().getClassLoader().getResource("/").getPath();
     int index = path.indexOf("Shopping");
     path = path.substring(0, index + "Shopping".length()) + "/WebContent/resources/upload/";
     path = path + File.separator + name;
     File uploadFile = new File(path);
     if(FileCopyUtils.copy(file.getInputStream(), new FileOutputStream(uploadFile))>0)
     {
      json.put("path",path);
     }
    
    }
   }
  } catch (Exception e) {
   msg = "上传失败";
  }
  log.info("-------------------结束调用上传文件uploadservlet接口-------------------");
  json.put("msg", msg);
  return BuildJsonOfObject.buildJsonOfJsonObject(json);
 }
}

 

可以看到的是利用百度的webuploader上传文件还是十分的简单

 

希望对你有所帮助

 

bzerah
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
web uploader 框架上传图片，java后台处理
amelia_
04-06 6420
前言：最近刚刚接触到微信端的开发，使用到了web uploader 框架作为上传组件，初步接触，走进了很多坑，在不断的试验，查文档基础上终于解决了这个问题。再次记录，希望能够使其他使用此框架上传图片的初学者少走弯路。 目录： 1.web uploader前台代码实现 2.Java后台接收处理 3.前台图片回显（多张图片上传） 一.前台代码：web uploader 1.前台js，需要注
webuploader java_使用WebUploader实现上传文件功能（一）
weixin_39769740的博客
02-16 452
写在前面：文件上传方式很多的，对于大文件的上传，在本次项目中也有涉及，主要是用了分片断点上传大文件。所以就去了解了一下WebUploader，先从简单的上传文件开始吧。在代码中写注释，这样看的比较好点，那就直接上代码来看了解实现的过程吧。前台jsp页面：String scheme = request.getScheme();String serverName = request.getServer...
WEBUPLOADER实现大文件断点续传
最新发布
weixin_52041354的博客
07-16 933
百度上传插件WEB UPLOADER，使用WEBUPLOADER组件实现大文件分片上传，断点续传，百度WEBUPLOADER开源上传控件，百度WEBUPLOADER上传文件夹技术，WEBUPLOADER上传文件夹技术，JS实现文件夹的多线程上传和下载，JS实现文件夹的加密上传和下载，JS怎么实现文件夹的上传和下载，vue实现文件夹的上传和下载。百度的这个控件怎么说呢，简单的场景用是能用，它实际上也就是对HTML5的API进行了一个封闭，扩展性还是不太好，兼容性也不太好，对IE的兼容比较差。
使用WebUploader客户端批量上传图片，后台使用springMVC接收实例
finalAmativeness的博客
01-22 1万+
使用WebUploader客户端批量上传图片，后台使用springMVC接收实例我是搞java后台的，因为最近主管让用webUploader写客户端，但是在网上找了很多，能够复制就能用的并没有几个，但是经过修改后还可以，为了后面的人在需要使用到的时候可以直接copy我再此将代码和注释共享在这里。<!--需要引入的文件--> <link rel="stylesheet" type="text/css
大文件上传的java例子（webuploader包括前台和后台代码）
12-01
用百度的js webuploader 做的大文件上传的例子， 多线程上传，包括前台和后台代码
Java后台接收上传的文件
热门推荐
xian云的学习笔记
06-24 2万+
servlet 3.0提供的文件上传的api，不用再导入外部的包了，直接贴代码：package util;import java.io.File;import java.io.IOException;import java.util.Collection;import javax.servlet.ServletException;import javax.servlet.http.HttpServ...
Java与WebUploader相结合实现文件上传功能(实例代码)
08-30
在本文中，我们将深入探讨如何使用Java与WebUploader这一JavaScript库来实现文件上传功能。WebUploader是由阿里大鱼团队开发的一个强大的文件上传组件，它支持多文件上传、断点续传、图片预览等特性，使得文件上传变...
WebUploader+SpringMVC实现文件上传功能
08-30
在后台，SpringMVC作为控制器，负责接收前端上传的文件。你需要创建一个`@RequestMapping`注解的方法，通常接收`MultipartFile`类型的参数，处理文件的接收、存储和返回响应。例如： ```java @PostMapping("/upload...
webupload分片上传（JAVA后台）
socia1ca3t的博客
06-12 1129
主要问题就是解决分片合并完成之后通知前台上传成功的问题。因为所有分片合并之后才表示此次上传真正意义上的成功，但是上传文件与合并分片的AJAX并不是同一个。   var fileMd5; //监听分块上传过程中的三个时间点 WebUploader.Uploader.register({ "before-send-fi...
webuploader java前后端完整demo
01-11
有pom 的全部依赖文件，有完整的css、js，以及demo脚本，我的后端是smm的框架，只贴出了相关的全部代码示例，一看就懂。在配置过程中，如果使用springMVC，需要配置 springMultipartFile的bean， <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="defaultEncoding" value="UTF-8"></property> <property name="maxUploadSize" value="54000000"></property> <property name="maxInMemorySize" value="40960"></property> <property name="uploadTempDir" value="fileUpload/temp"></property> </bean> 分不够的，加我qq 448452585 发你
webuploader java前后端完整DEMO
11-29
有pom 的全部依赖文件，有完整的css、js，以及demo脚本，我的后端是smm的框架，只贴出了相关的全部代码示例，一看就懂。在配置过程中，如果使用springMVC，需要配置 springMultipartFile的bean，
自己做的java版Webuploader,demo
11-24
自己做的java版Webuploader,采用了弹窗展示,但是有个问题就是如果采用iframe，由于页面加载的时候就执行了upload.js，点击开始上传事没有在执行upload.js,直接flash形式提交了~~，要想带参数只能用我这里面不弹窗的形式咯
WebUploader多文件上传java实例
03-30
百度WebUploader上传插件java实现demo，将整个项目导入eclipse可以直接使用。
webuploader实例 java_使用WebUploader用户端批量上传图片，后端使用springMVC接收实例...
weixin_34462581的博客
02-22 463
我是搞java后端的，由于最近主管让用webUploader写用户端，但是在网上找了很多，能够复制就能用的并没有几个，但是经过修改后还可以，为了后面的人在需要使用到的时候可以直接copy我再此将代码和注释共享在这里。1234这里是前端代码，这里我不过是加了个注释和修改了一点东西，这是网络上某个大神的代码 我借鉴一下。这个webUploader 使用其实很简单，我先简单做一个形容。了解就很快了。先准...
webuploader java上传文件后台源码 mpush
TinnnnnnY
12-22 3579
controller 包含MD5计算和断点续传 /** * ChengDu ShuXing Technology Co., Ltd. CopyRight */ package com.shuxing.mpush.web.controller; import java.io.File; import java.io.FileInputStream; import java.io.FileOutput
百度webUploader分片断点上传java后台代码
追风
04-24 1035
以下代码有部分类未粘贴出来。分别是服务器Session，用户类和返回值HashMap的封装类，这些类根据项目的不同封装的也不同，请酌情使用.package com.css.commcon.bean;import org.springframework.web.multipart.MultipartFile;public class Webuploader { //uploader自带参数 priv...
webuploader实例 java_Java与WebUploader相结合实现文件上传功能(实例代码)
weixin_42099906的博客
02-12 260
之前自己写小项目的时候也碰到过文件上传的问题，没有找到很好的解决方案。虽然之前网找各种解决方案的时候也看到过WebUploader，但没有进一步深究。这次稍微深入了解了些，这里也做个小结。简单的文件和普通数据上传并保存jsp页面：pageEncoding="UTF-8"%>Insert title here文件： 信息： servlet：package com.yihengliu.web.a...
WebUploader文件上传详解与示例
WebUploader是由FEX团队开发的一个强大的文件上传组件，支持图片、文件等多种类型的上传，并且可以实现多文件选择、预览、上传进度显示等功能。本文档对WebUploader的基本用法进行了注解，包括初始化、事件监听以及...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值