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;
}
}
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
jQuery文件上传插件Uploadify使用指南
对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Flash,主要特性:支持多文件上传.HTML5版本可拖拽上传.实时上传进度条显示.强大的参数定制功能,如文件大小.文件类型.按钮图片定义.上传文件脚本等. Flash版本使用方法:1.加载JS和CSS 复制代码 代码如下: <script src="jquery/1.7.1/jquery.min.js" type="text/javascript"></script&
-
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/
-
php+jQuery.uploadify实现文件上传教程
这两天用上传的控件,PHP+Jquery今天先介绍这个uploadify,嗯,我今天下载因为我英文不是很好所以我就在网上找的使用教程,我发现好多用不了,我那个去,你看官方文档才知道很多API已经不是以前的API了.今天总结一下给大家,给大家一个提醒最多还是要看官方的http://www.uploadify.com/documentation/! 简单举例一下使用然后我都加上注释给大家,方便大家阅读和使用下载官方的之后直接使用就OK了,当然你需要什么在直接修改就可以了! 复制代码 代码如下: <!
-
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&
-
JavaScript Uploadify文件上传实例
前言 java+javascript,没用上数据库,做了一个简简单单的jsp上传小功能,就是记录一下,对于这个小项目有什么建议,欢迎指出不足之处 (-_+) PS:从我的包名看得出,我用过很多前辈们的代码,基本上都是东凑西拼,各个部分代码的出处就不一一列出了,能看就行! 运行环境: Java EE + Tomcat 7.0 项目结构 ( Dynamic Web Project ) src各部分代码 1. com.bijian.study.Upload.java package com.bijia
-
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
-
详解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
-
ASP.NET文件上传控件Uploadify的使用方法
对于文件上传来说,有很多种实现方式,如传统的表单方式,现在流行的flash方式,甚至还有纯JS方式,之所以有这些方式来实现文件上传,我想主要原因是因为,传统的上传对于大文件支持不够,因为它是单线程同步机制,当大文件通过HTTP方式发送到服务端时,对于服务端站点的主线程影响比较大,会产生阻塞,所以,现在很多上传控制都是异步,多线程的方式去实现的. 今天来介绍一个文件上传控制,它就是Uploadify,它应该是flash的异步上传工具,对于大文件支持还不错,所以,我选择了它. 相关API介绍 upl
-
Javascript使用uploadify来实现多文件上传
使用uploadify来实现文件上传能够客户端判断文件大小.控制文件上传的类型.实现多文件上传.显示进度条等功能,方便易用,兼容性较好. 本例是把dwz中整合uploadify功能抽取出来的,可以进行单独使用,不一定要遭dwz中才能使用,本例只是为了测试,所以使用静态页面进行测试: 话不多说,代码敬上: 2,html页面的代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html&g
-
ASP.NET多文件上传控件Uploadify的使用方法
对于Uploadify文件上传之前已经讲过一次(文件上传~Uploadify上传控件),只不过没有涉及到多文件的上传,这回主要说一下多个文件的上传,首先,我们要清楚一个概念,多文件上传前端Uploadify是通过轮训的方式去调用我们的后台upload程序的,所以,对于多文件上传来说,也没什么稀奇的. 下面是文件上传后的缩略图如下 列表的组装使用JS模板,这样对于复杂的HTML结构来说,可以减少拼写错误的出现,关闭是将LI元素从UI元素移除,最后提交时,从UI里检查LI元素,然后对它进行组装,并进