使用uploadify实现文件上传

导入需要的js,css等文件
添加uploadify.jsp文件
//代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<base href="<%=basePath%>">
<link href="<%=basePath%>static/js/uploadify/uploadify.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="<%=basePath%>static/js/uploadify/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="<%=basePath%>static/js/uploadify/swfobject.js"></script>
<script type="text/javascript" src="<%=basePath%>static/js/uploadify/jquery.uploadify.v2.1.4.min.js"></script>
</head>
<body>
<div id="fileQueue"></div>
<label>图片： </label>
<div class="showImg">
  <img class="showImgs" width="100" height="100" src="easy/js/uploadify/default_image.gif">
</div>
<input type="file" name="uploadify" id="uploadify" style="width:200px;"/>
    <p><a href="javascript: jQuery(‘#uploadify‘).uploadifyUpload()">开始上传</a></p>
</body>
<script type="text/javascript">
//官方网址：http://www.uploadify.com/
$(document).ready(function(){
$("#uploadify").uploadify({
  ‘uploader‘ : "<%=basePath%>static/js/uploadify/uploadify.swf",
  ‘script‘    : "<%=basePath%>uploadFile",//此处是servlet请求路径；如果请求使用uploadFile.jsp，此处就是uploadFile.jsp的路径"<%=basePath%>static/js/uploadify/uploadFile.jsp"
  ‘cancelImg‘ : "<%=basePath%>static/js/uploadify/cancel.png",
  ‘folder‘ : "static/uploads",//上传文件存放的路径,请保持与uploadFile.jsp中PATH的值相同
  ‘queueId‘ : "fileQueue",
  ‘queueSizeLimit‘ : 10,//限制上传文件的数量
  ‘fileExt‘ : "*.rar,*.zip",
  //‘fileDesc‘ : "RAR *.rar",//限制文件类型
  ‘auto‘  : false,
  ‘multi‘  : true,//是否允许多文件上传
  ‘simUploadLimit‘: 2,//同时运行上传的进程数量
  ‘buttonText‘: " select files",
  ‘onComplete‘: function(event, ID, fileObj, response, data) {
  //response返回值：重命名后的文件名称,文件保存路径
  var resultArray = response.split(",");
  var realName = resultArray[0];//图片现在的名称，前面加上时间的图片名称，带扩展名
  realName = $.trim(realName);
  var p = "<%=basePath%>static/uploads/"+realName;
  $(".showImgs").attr("src",p);
}
});
});
</script>
</html>
上传文件：添加servlet方法（或者使用uploadFile.jsp）
（1）//servlet方法代码

@RequestMapping("uploadFile")
     @ResponseBody
     public String uploadifyStart(HttpServletRequest request, HttpServletResponse response)
       throws ServletException, IOException{
     String savePath = request.getSession().getServletContext().getRealPath("/");
     String PATH = "/static/uploads/";
   savePath = savePath + PATH;
   File f1 = new File(savePath);
   //System.out.println(savePath);
   if (!f1.exists()) {
    f1.mkdirs();
   }

   DiskFileItemFactory fac = new DiskFileItemFactory();
   ServletFileUpload upload = new ServletFileUpload(fac);
   upload.setHeaderEncoding("utf-8");
   List fileList = null;
   try {
    fileList = upload.parseRequest(request);
   } catch (FileUploadException ex) {
    return "";
   }
   Iterator<FileItem> it = fileList.iterator();
   String name = "";
   String extName = "";
   while (it.hasNext()) {
    FileItem item = it.next();
    if (!item.isFormField()) {
     name = item.getName();
     long size = item.getSize();
     String type = item.getContentType();
     //System.out.println(size + " " + type);
     if (name == null || name.trim().equals("")) {
      continue;
     }

     // 扩展名格式：
     if (name.lastIndexOf(".") >= 0) {
      extName = name.substring(name.lastIndexOf("."));
     }

     File file = null;
     do {
      // 生成文件名：
      name = UUID.randomUUID().toString();
      file = new File(savePath + name + extName);
     } while (file.exists());

     File saveFile = new File(savePath + name + extName);
     try {
      item.write(saveFile);
     } catch (Exception e) {
      e.printStackTrace();
     }
    }
   }
     return name + extName;
     }

（2）uploadFile.jsp实现上传

//uploadFile.jsp代码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.io.*, java.util.*, org.apache.commons.fileupload.*" %>
<%@ page import="org.apache.commons.fileupload.disk.*, org.apache.commons.fileupload.servlet.*" %>
<%!

String PATH = "/static/uploads/";
public void upload(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
  String savePath = this.getServletConfig().getServletContext().getRealPath("");
  savePath = savePath + PATH;
  File f1 = new File(savePath);
  System.out.println(savePath);
  if (!f1.exists()) {
      f1.mkdirs();
  }

  DiskFileItemFactory fac = new DiskFileItemFactory();
  ServletFileUpload upload = new ServletFileUpload(fac);
  upload.setHeaderEncoding("utf-8");
  List fileList = null;
  try {
   fileList = upload.parseRequest(request);
  } catch (FileUploadException ex) {
   return;
  }
  Iterator<FileItem> it = fileList.iterator();
  String name = "";
  String extName = "";
  while (it.hasNext()) {
   FileItem item = it.next();
   if (!item.isFormField()) {
    name = item.getName();
    long size = item.getSize();
    String type = item.getContentType();
    System.out.println(size + " " + type);
    if (name == null || name.trim().equals("")) {
     continue;
    }

    // 扩展名格式：
    if (name.lastIndexOf(".") >= 0) {
     extName = name.substring(name.lastIndexOf("."));
    }

    File file = null;
    do {
     // 生成文件名：
     name = UUID.randomUUID().toString();
     file = new File(savePath + name + extName);
    } while (file.exists());

    File saveFile = new File(savePath + name + extName);
    try {
     item.write(saveFile);
    } catch (Exception e) {
     e.printStackTrace();
    }
   }
  }
  response.getWriter().print(name + extName);
}
%>
<%
upload(request, response);
%>

时间： 2024-08-01 07:15:20

使用uploadify实现文件上传的相关文章

uploadify多文件上传插件

这个插件是兼容IE8及以上版本的,实现了基本功能,底部有下载连接代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title>uploadify多文件上传插件使用</title> <meta http-equ

Struts2 + uploadify 多文件上传完整实例！

首先我这里使用的是 Jquery Uploadify3.2的版本导入相关的CSS JS <link rel="stylesheet" type="text/css" href="<%=basePath%>css/uploadify/uploadify.css"> <script src="<%=basePath%>js/jquery.min.js"></sc

Jquery Uploadify多文件上传实例

jQuery Uploadify开发使用的语言是java. 详细的相关文档,可以参考官网的doc:http://www.uploadify.com/documentation/ 官网的讲解还是很详细的,关键是要耐心看.虽说是英文,单有百度翻译. 看官网jQuery uploadify有基于flash和html5 的2个版本.我使用的是基于flash的. Jsp页面引用的文件有:  <script type="text/javascript&

[Asp.net]通过uploadify将文件上传到B服务器的共享文件夹中

写在前面客户有这样的一个需求,针对项目中文档共享的模块,客户提出如果用户上传特别的大,或者时间久了硬盘空间就会吃满,能不能将这些文件上传到其他的服务器?然后就稍微研究了下这方面的东西,上传到网络中的某个共享的文件夹下确实能做到的. 解决方案环境描述: 若A为web服务器,B为要存放文档的文件服务器. 如果通过A中的某个页面将文件上传到服务器B,则需要如下三个步骤. 1.在服务器B上面建立共享文件夹,步骤如下: 编辑贡献文件夹的权限,添加一个用户,并给它开放读写的权限. 2.共享文件夹建立之后

jquery uploadify 多文件上传插件使用经验

Uploadify 官网:http://www.uploadify.com/ 一.如何使用呢? 官网原文:http://www.uploadify.com/documentation/uploadify/implementing-uploadify/在我理解的基础上,做了一些翻译吧,建议直接看官网原文,因为截止到发布这篇博客为止,官方的版本是v3.2.1使用之前我们来看下使用的最低要求. 要求 jQuery 1.4.x 或更新的版本Flash Player 9.0.24 或更新的版本服务器端实现

springmvc 使用uploadify进行文件上传

1.首先在uploadify官网下载相关的文件,目前有两种类型的,一种是flash(免费),另一种是html5(要收费) 然后部署到项目里这里需要 uploadify.js uploadify.min.js uploadify.css uploadify-cancel.png uploadify.swf 当然别忘了添加文件上传时jar包 commons-fileupload.jar和commons-io.jar 2.然后进行初始化 <script type="text/javascrip

Struts2 + uploadify 多文件上传完整的例子！

首先,我这里使用的是 Jquery Uploadify3.2版本号导入相关的CSS JS <link rel="stylesheet" type="text/css" href="<%=basePath%>css/uploadify/uploadify.css"> <script src="<%=basePath%>js/jquery.min.js"></s

用.net改写的uploadify多文件上传控件

有图真相: ASP.NET代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadV2.aspx.cs" Inherits="TestUpload.UploadV2" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

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/