java 使用 WebUploader

時間 2019-11-18

標籤 java 使用 webuploader 欄目 Java 简体版

原文原文鏈接

參考： http://blog.csdn.net/finalAmativeness/article/details/54668090javascript

最近項目須要多文件上傳。css

因此使用了 baidu的 webuploader做爲前臺的上傳控件。html

好了，廢話很少，直接上代碼java

前臺：jquery

1 先下載 webuploader 鏈接：http://fex.baidu.com/webuploader/web

2 看一下文件：spring

3 頁面：json

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>H+ 後臺主題UI框架 - 百度Web Uploader</title>
    <meta name="keywords" content="H+後臺主題,後臺bootstrap框架,會員中心主題,後臺HTML,響應式後臺">
    <meta name="description" content="H+是一個徹底響應式，基於Bootstrap3最新版本開發的扁平化主題，她採用了主流的左右兩欄式佈局，使用了Html5+CSS3等現代技術">

    <link rel="shortcut icon" href="favicon.ico"> <link href="KintechHtml/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="KintechHtml/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="KintechHtml/css/animate.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/plugins/webuploader/webuploader.css">
    <link rel="stylesheet" type="text/css" href="css/demo/webuploader-demo.css">
    <link href="KintechHtml/css/style.css?v=4.1.0" rel="stylesheet">


</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeIn">

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>百度Web Uploader</h5>
                </div>
                <div class="ibox-content">
                    <div class="page-container">
                        <p>您能夠嘗試文件拖拽，使用QQ截屏工具，而後激活窗口後粘貼，或者點擊添加圖片按鈕，來體驗此demo.</p>
                        <div id="uploader" class="wu-example">
                            <div class="queueList">
                                <div id="dndArea" class="placeholder">
                                    <div id="filePicker"></div>
                                    <p>或將照片拖到這裏，單次最多可選300張</p>
                                </div>
                            </div>
                            <div class="statusBar" style="display:none;">
                                <div class="progress">
                                    <span class="text">0%</span>
                                    <span class="percentage"></span>
                                </div>
                                <div class="info"></div>
                                <div class="btns">
                                    <div id="filePicker2"></div>
                                    <div class="uploadBtn">開始上傳</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<!-- 全局js -->
<script src="KintechHtml/js/jquery.min.js?v=2.1.4"></script>
<script src="KintechHtml/js/bootstrap.min.js?v=3.3.6"></script>



<!-- 自定義js -->
<script src="KintechHtml/js/content.js?v=1.0.0"></script>


<!-- Web Uploader -->
<script type="text/javascript">
    // 添加全局站點信息
    var BASE_URL = 'js/plugins/webuploader';
</script>
<script src="KintechHtml/js/plugins/webuploader/webuploader.min.js"></script>
<script src="js/demo/webuploader-demo.js"></script>


</body>

</html>

PS:值得注意的地方在於，這裏我直接調用了 webuploader-demo.js，裏面已經實例化了webuploader對象，拿來直接用

不過須要修改一下提交的web api地址：server:'/test/uploader.do'bootstrap

// 實例化
    uploader = WebUploader.create({
        pick: {
            id: '#filePicker',
            label: '點擊選擇圖片'
        },
        dnd: '#uploader .queueList',
        paste: document.body,
        method:'POST',
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        },
        // swf文件路徑
        swf: BASE_URL + '/Uploader.swf',
        disableGlobalDnd: true,
        chunked: true,
        server: '/test/uploader.do',
        fileNumLimit: 300,
        fileSizeLimit: 5 * 1024 * 1024,    // 200 M
        fileSingleSizeLimit: 1 * 1024 * 1024    // 50 M
    });

後臺：

package com.kintech.webSYS.controller;

import com.kintech.common.ResultModel;
import com.kintech.web.SysLog.ISystemLog;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.context.request.RequestContextHolder;
import org.springframework.web.context.request.ServletRequestAttributes;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.util.Map;

@RestController
@RequestMapping("test")
public class TestController {
    
    @RequestMapping(value = "uploader.do",method = RequestMethod.POST)
    public ResultModel upload(HttpServletRequest request, HttpServletResponse response) throws Exception{
        MultipartHttpServletRequest Murequest = (MultipartHttpServletRequest)request;
        Map<String, MultipartFile> files = Murequest.getFileMap();//獲得文件map對象
        String upaloadUrl = request.getSession().getServletContext().getRealPath("/")+"upload/";//獲得當前工程路徑拼接上文件名
        File dir = new File(upaloadUrl);
        System.out.println(upaloadUrl);
        Integer counter=0;
        if(!dir.exists())//目錄不存在則建立
            dir.mkdirs();
        for(MultipartFile file :files.values()){
            counter++;
            String fileName=file.getOriginalFilename();
            File tagetFile = new File(upaloadUrl+fileName);//建立文件對象
            if(!tagetFile.exists()){//文件名不存在 則新建文件，並將文件複製到新建文件中
                tagetFile.createNewFile();
                file.transferTo(tagetFile);
            }
        }
        return  new ResultModel();

    }


}