OperaMasks-UI框架之omFileUpload文件上传控件

最新推荐文章于 2019-12-19 09:22:27 发布

原创最新推荐文章于 2019-12-19 09:22:27 发布 · 2.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #eclipse #jquery #ui #框架

文件上传专栏收录该内容

4 篇文章

订阅专栏

本文介绍了OperaMasks-UI框架中的omFileUpload控件，这是一个轻量级的前端文件上传组件，依赖jQuery，提供丰富的前端页面代码示例和后台处理代码，包括设置上传路径、文件类型限制、回调函数等。文章还涉及了web.xml配置以及上传成功后的显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

OperaMasks-UI是一款轻量级的、基于jQuery并提供丰富组件的前端UI库，遵循LGPL开源协议，对商业使用友好。
官网下载地址：http://ui.operamasks.org/website/download.html
最新的OperaMasks-UIV2.0版本已经包含各类共26种组件，以下介绍的是其中一个omFileupload：文件上传控件的用法。
一、准备工作：

① jquery-2.0.0.js (这里测试用的是jquery2.0,也可用其它版本 )
②ui/om-core.js  (ui库，可在官网下载)
  ui/om-mouse.js 
  ui/om-resizable.js 
  ui/om-fileupload.js
  themes/default/om-all.css  (测试引用了这个样式，可以不使用)
  swf/om-fileupload.swf  (默认样式，必须要有)
③引入第三方的一个jar包：commons-fileupload-1.2.2.jar

二、前端页面代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>omFileUpload之图片上传</title>
<script type="text/javascript" src="js/jquery-2.0.0.js"></script>
<script type="text/javascript" src="ui/om-core.js"></script>
<script type="text/javascript" src="ui/om-mouse.js"></script>
<script type="text/javascript" src="ui/om-resizable.js"></script>
<script type="text/javascript" src="ui/om-fileupload.js"></script>
<link type="text/css" rel="stylesheet" href="themes/default/om-all.css">
<script type="text/javascript">
$(document).ready(function(){
    $('#fileUpload').omFileUpload({ 
        action:"/testup/upload",            //服务端请求路径
        swf:"swf/om-fileupload.swf",        //默认样式,必须要有
        method:"get",                       //提交方式，默认post
        fileExt:"*.jpg;*.jpeg;*.gif;*.png", //允许文件类型
        fileDesc:"Image Files",             //文件描述，与fileExt配合使用
        sizeLimit:1024000,                  //文件大小,1024000字节=1000KB
        multi:true,                         //允许批量上传，用ctrl或shift同时选择多个文件
        queueSizeLimit:3,                   //文件数量,默认999
        onComplete:function(ID,fileObj,response,data,event){  //回调函数，response为返回的数据                                
            $('#show').append(response);                                    
        }
    })
})
</script>
</head>
<body>
    <input type="file" id="fileUpload" value="选择文件"><br>
    <input type="button" id="btnup" onclick="$('#fileUpload').omFileUpload('upload')" value="上传"><br><br>
    <div id="show"></div>
</body>
</html>

三、后台处理代码：

        //创建文件上传对象
        ServletFileUpload fileUpload = new ServletFileUpload();
        fileUpload.setHeaderEncoding("UTF-8");
        //获取服务器路径
        String basePath = request.getSession().getServletContext().getRealPath("/") + "/files/";
        //服务器存放文件路径
        String filePath = "";
        //判断路径是否存在，不存在则创建
        File file = new File(basePath);
        if(!file.exists()){
            file.mkdir();
        }
        //判断是否上传了文件
        if (fileUpload.isMultipartContent(request)) {
            try {
                //获取文件上传列表
                FileItemIterator fileItems = fileUpload.getItemIterator(request);
                while (fileItems.hasNext()) {
                    FileItemStream fis = fileItems.next();
                    //判断是否为表单字段
                    if (!fis.isFormField()) {
                        //获取上传文件名
                        String name = fis.getName();
                        //新文件名
                        SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
                        String fileName = sdf.format(new Date()) + UUID.randomUUID().toString().replace("-", "") + 
                                                  name.substring(name.lastIndexOf("."));
                        //文件路径
                        filePath = basePath + fileName;
                        //获取输入输出流
                        BufferedInputStream bis = new BufferedInputStream(fis.openStream());
                        BufferedOutputStream bos = new BufferedOutputStream(new FileOutputStream(filePath));
                        //每次读取字节数
                        byte contents[] = new byte[1024];
                        //读写文件
                        int len = -1;
                        while ((len = bis.read(contents)) != -1) {
                            bos.write(contents,0,len);
                        }
                        bis.close();
                        bos.close();
                    }
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
            //返回页面数据
            response.setContentType("text/html;charset=UTF-8");
            PrintWriter out = response.getWriter();
            String url = "http://localhost:80/testup/" + filePath.substring(filePath.indexOf("/"));
            String fileHtml = "<img src='"+url+"'/>";
            out.println(fileHtml);
            out.close();
        }

四、web.xml文件：

<servlet>
    <servlet-name>UploadServlet</servlet-name>
    <servlet-class>com.test.UploadServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>UploadServlet</servlet-name>
    <url-pattern>/upload</url-pattern>
  </servlet-mapping>

五、测试效果：
点击选择文件后展示的效果：