最近看了WebUploader文件上传组件,功能很强大但是官方的文档是给我看吐了。
废了好几头牛的力气终于写了一篇Demo,分享一下也方便以后自己查看
大致上传流程
代码
因为是篇Demo,所以可能有很多不足的地方,代码我都标记了注释
去官网下载WebUploader的包
还需要引入jQuery.js
下面是前端代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <% //取得当前Web应用的名称 String basepath = request.getContextPath(); %> <html> <head> <title>单文件上传测试页面</title> <link href="<%=basepath%>/css/webuploader.css" rel="stylesheet" type="text/css" > <link href="<%=basepath%>/css/bootstrap-3.1.1.min.css" rel='stylesheet' type='text/css' /> <script src="<%=basepath%>/js/jquery.min.js"></script> <script src="<%=basepath%>/js/webuploader.js"></script> <style> body{ text-align: center; } #drag{ margin-left: auto; margin-right: auto; width: 400px; height: auto; background-color: #CCCCCC; border-radius:25px; } .uploadText{ padding-top: 30%; } </style> </head> <body> <h1>单文件上传测试</h1> <div id="drag" class="wu-example"> <img src="<%=basepath%>/icon/uploadImg.png" style="width:85px;height: 69px;position: relative;top: 100px"> <p class="uploadText">将文件拖拽到此处进行上传</p> <!-- 回显图片 --> <div id="listImg"></div> <div id="btns"> <div id="picker">选择文件</div> <button id="ctlBtn" class="btn btn-default" onclick="fileUpload()">开始上传</button> <input type="hidden" id="fileStatus" value="wait"> <button class="btn btn-default" onclick="fileReset()">重置文件</button> </div> </div> </body> <script> var mydate = new Date(); //唯一ID var uuid = "lcl"+m