uploadify java实现多文件上传和预览

本文实例为大家分享了java文件上传和预览实现代码，供大家参考，具体内容如下

1、下载uploadify插件

2、index.html

<!DOCTYPE html>
<html lang="en">
<head>
<@head/>
<script src="<@path/>/js/uploadify-v3.1/jquery.uploadify-3.1.js"></script>
<link href="<@path/>/js/uploadify-v3.1/uploadify.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#uploader {
 position: relative;
} 

#uploader_queue {
 position: absolute;
 width: 600px;
 left: 200px;
 top: 0;
}
</style>
<script type="text/javascript">
 $(function() {
  $("#file_upload")
    .uploadify(
      {
       'auto' : false,
       'method' : "get",
       'formData' : {
        'folder' : 'file'
       },
       'height' : 30,
       'swf' : '<@path/>/js/uploadify-v3.1/uploadify.swf', // flash
       'uploader' : '<@path/>/uploadAttach.do', //
       'width' : 120,
       'fileTypeDesc' : 'ֻ支持多种文件格式',
       'fileTypeExts' : '.dat;.264;.h264;.mp4;.dav;.MP4;.AVI;.ts;.avi;'
         + '.mpg;.rmvb;.flv;.rm;.mov;.wmv;.JPG;.bmp;.png;.BMP;.jpg;.PNG;'
         + '.gif;.xlsx;.xls;.txt;.pdf;.doc;.docx;.rar;.zip;.7z',
       'fileSizeLimit' : '800KB',
       'buttonText' : '选择文件',
       'uploadLimit' : 5,
       'successTimeout' : 5,
       'requeueErrors' : false,
       'removeTimeout' : 10,
       'removeCompleted' : false,
       'queueSizeLimit' : 10,
       'queueID' : 'uploader_queue',
       'progressData' : 'speed',
       'onInit' : function() {
       },
       'onUploadSuccess' : function(file, data, response) {
        $("#uploader_view").append(
          '<img height="60" alt="" src="<@path/>/upload/'
            + encodeURI(data)
            + '"/><br/><br/>');
       },
       'onQueueComplete' : function(queueData) {
        $('#uploader_msg').html(
          queueData.uploadsSuccessful
            + '个文件上传成功<br/>');
       }
      });
 });
</script>
</head>
<body class="">
 <@header/>
 <br />
 <br />
 <br />
 <br />
 <div id="uploader">
  <p>
   <input type="file" name="file_upload" id="file_upload" />
  </p>
  <a href="javascript:$('#file_upload').uploadify('upload','*')">上传</a>
  <a href="javascript:$('#file_upload').uploadify('stop')">取消上传</a>
  <div id="uploader_queue"></div>
  <div id="uploader_msg"></div>
  <div id="uploader_view"></div>
 </div>
 <br />
 <br />
 <br />
 <br /> <@footer/>
</body>
</html>

3、java文件

package com.frame.core.ctrl; 

import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;
import java.util.Map;
import java.util.UUID; 

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; 

import org.apache.log4j.Logger;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.servlet.ModelAndView; 

@Controller
public class loginCtrl {
 private static Logger log = Logger.getLogger(loginCtrl.class);
 @RequestMapping(value = "/goindex")
 public ModelAndView goindex() {
  ModelAndView mav = new ModelAndView("index");
  mav.addObject("name", "笑傲江湖");
  mav.addObject("projectName", "Freemarker框架");
  return mav;
 }
 @RequestMapping(value = "/login")
 public void login(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
  request.getSession().setAttribute("username", "身份认证成功");
  request.getRequestDispatcher("/index.jsp").forward(request, response);
 }
 @RequestMapping("/uploadAttach")
 public void processUploadDir(ModelMap modelMap,
   MultipartHttpServletRequest request, PrintWriter writer) throws Exception {
  Map<String, MultipartFile> fileMap = request.getFileMap();
  String path = request.getSession().getServletContext().getRealPath("/");;
  System.out.println("path:"+path);
  Date currentTime = new Date();
  long prefix = currentTime.getTime();
  StringBuffer attachIds = new StringBuffer();
  for (Map.Entry<String, MultipartFile> f : fileMap.entrySet()) {
   MultipartFile file = f.getValue();
   if (!isLegalFile(file)) {
    String msg = "is a illegal file";
    throw new RuntimeException(msg);
   }
   String originalFileName = prefix + "_" + file.getOriginalFilename();
   File fileDir = new File(path + "/upload" + File.separator);
   if (!fileDir.exists()) {
    fileDir.mkdirs();
   } 

   File files = new File(path + "/upload" + File.separator
     + originalFileName);
   FileOutputStream fileOutputStream = null;
   try {
    fileOutputStream = new FileOutputStream(files);
    fileOutputStream.write(file.getBytes());
    fileOutputStream.flush(); 

    attachIds.append(originalFileName + ","); 

   } catch (FileNotFoundException e) {
    e.printStackTrace();
   } catch (IOException e) {
    e.printStackTrace();
   } catch (Exception e) {
    e.printStackTrace();
   } finally {
    if (fileOutputStream != null) {
     try {
      fileOutputStream.close();
     } catch (IOException e) {
      e.printStackTrace();
     }
    }
   } 

  } 

  writer.write(attachIds.toString().substring(0,attachIds.toString().length()-1));
 }
 private final String[] fileType = new String[]{".dat",".264",".h264",".mp4",".dav",".MP4",".AVI",".ts",".avi",".mpg",".rmvb",".flv",".rm",".mov",".wmv",
   ".JPG",".bmp",".png",".BMP",".jpg",".PNG",".gif",
   ".xlsx",".xls",".txt",".pdf",".doc",".docx",
   ".rar",".zip",".7z"};
 private boolean isLegalFile(MultipartFile file) {
  String originalFileName = file.getOriginalFilename();
  for(String ft : fileType) {
   if (originalFileName.endsWith(ft)) {
    return true;
   }
  }
  return false;
 }
}

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解jQuery uploadify文件上传插件的使用方法

    uploadify这个插件是基于js里面的jquery库写的.结合了ajax和flash,实现了这个多线程上传的功能. 现在最新版为3.2.1. 在线实例 实例中用到的php文件UploaderDemo.php请在页面下方下载 引入文件 <link rel="stylesheet" type="text/css" href="uploadify.css" /> <script type="text/javascript

  • jQuery文件上传插件Uploadify使用指南

    对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Flash,主要特性:支持多文件上传.HTML5版本可拖拽上传.实时上传进度条显示.强大的参数定制功能,如文件大小.文件类型.按钮图片定义.上传文件脚本等. Flash版本使用方法:1.加载JS和CSS 复制代码 代码如下: <script src="jquery/1.7.1/jquery.min.js" type="text/javascript"></script&

  • uploadify多文件上传参数设置技巧

    uploadify多文件上传参数设置技巧

    比起swfupload,uploadify插件配置使用都更简单,只是刚加载的时候稍微慢了一秒左右. 废话不多说了,直接给大家贴代码了. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8″ /> <title>php jquery

  • ASP.NET文件上传控件Uploadify的使用方法

    ASP.NET文件上传控件Uploadify的使用方法

    对于文件上传来说,有很多种实现方式,如传统的表单方式,现在流行的flash方式,甚至还有纯JS方式,之所以有这些方式来实现文件上传,我想主要原因是因为,传统的上传对于大文件支持不够,因为它是单线程同步机制,当大文件通过HTTP方式发送到服务端时,对于服务端站点的主线程影响比较大,会产生阻塞,所以,现在很多上传控制都是异步,多线程的方式去实现的. 今天来介绍一个文件上传控制,它就是Uploadify,它应该是flash的异步上传工具,对于大文件支持还不错,所以,我选择了它. 相关API介绍 upl

  • jQuery.uploadify文件上传组件实例讲解

    jQuery.uploadify文件上传组件实例讲解

    1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好,无刷新,带上传进度等等.在最近的短信平台开发中,使用Uploadify进行文件上传. Uploadify官网地址是:http://www.uploadify.com/ 可满足项目开发需求. 下载地址:http://www.uploadify.com/wp-content/uploads/files/

  • Javascript使用uploadify来实现多文件上传

    Javascript使用uploadify来实现多文件上传

    使用uploadify来实现文件上传能够客户端判断文件大小.控制文件上传的类型.实现多文件上传.显示进度条等功能,方便易用,兼容性较好. 本例是把dwz中整合uploadify功能抽取出来的,可以进行单独使用,不一定要遭dwz中才能使用,本例只是为了测试,所以使用静态页面进行测试: 话不多说,代码敬上: 2,html页面的代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html&g

  • ASP.NET多文件上传控件Uploadify的使用方法

    ASP.NET多文件上传控件Uploadify的使用方法

    对于Uploadify文件上传之前已经讲过一次(文件上传~Uploadify上传控件),只不过没有涉及到多文件的上传,这回主要说一下多个文件的上传,首先,我们要清楚一个概念,多文件上传前端Uploadify是通过轮训的方式去调用我们的后台upload程序的,所以,对于多文件上传来说,也没什么稀奇的. 下面是文件上传后的缩略图如下 列表的组装使用JS模板,这样对于复杂的HTML结构来说,可以减少拼写错误的出现,关闭是将LI元素从UI元素移除,最后提交时,从UI里检查LI元素,然后对它进行组装,并进

  • JavaScript Uploadify文件上传实例

    JavaScript Uploadify文件上传实例

    前言 java+javascript,没用上数据库,做了一个简简单单的jsp上传小功能,就是记录一下,对于这个小项目有什么建议,欢迎指出不足之处 (-_+) PS:从我的包名看得出,我用过很多前辈们的代码,基本上都是东凑西拼,各个部分代码的出处就不一一列出了,能看就行! 运行环境: Java EE + Tomcat 7.0 项目结构 ( Dynamic Web Project ) src各部分代码 1. com.bijian.study.Upload.java package com.bijia

  • php+jQuery.uploadify实现文件上传教程

    php+jQuery.uploadify实现文件上传教程

    这两天用上传的控件,PHP+Jquery今天先介绍这个uploadify,嗯,我今天下载因为我英文不是很好所以我就在网上找的使用教程,我发现好多用不了,我那个去,你看官方文档才知道很多API已经不是以前的API了.今天总结一下给大家,给大家一个提醒最多还是要看官方的http://www.uploadify.com/documentation/! 简单举例一下使用然后我都加上注释给大家,方便大家阅读和使用下载官方的之后直接使用就OK了,当然你需要什么在直接修改就可以了! 复制代码 代码如下: <!

  • jQuery文件上传控件 Uploadify 详解

    jQuery文件上传控件 Uploadify 详解

    基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件. 要求使用jquery1.4或以上版本,flash player 9.0.24以上. 有两个版本,一个用flash,一个是html5.html5的需要付费~所以这里只说flash版本的用法. 官网:http://www.uploadify.com/ 控件截图: 用法: 首先引用下面的文件 <link rel="stylesheet" type="text/css&

随机推荐