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

来源：互联网发布：mmap文件阅读器 mac 编辑：程序博客网时间：2024/06/03 16:30

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>

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

点击上传后展示的效果：

阅读全文

0 0