项目关键包和插件

插件地址：http://www.uploadify.com/documentation

项目结构

uploadify.css设置了cancel的图片路径这里修改一下

uploadify.jsp

<%@ page language="java" import="java.util.*" 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">
<base href="<%=basePath%>">
<title>uploadify</title>
<link href="<%=basePath%>css/uploadify.css" rel="stylesheet"type="text/css"/>

<style type="text/css">
#some_file_queue {
    background-color: #FFF;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    height: 103px;
    margin-bottom: 10px;
    overflow: auto;
    padding: 5px 10px;
    width: 300px;
}
</style>

<script type="text/javascript" src="<%=basePath%>/js/jquery-1.6.2.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/jquery.uploadify.min.js"></script>
<script type="text/javascript">

// http://www.uploadify.com/documentation/
        $(function() {  
            $('#file_upload').uploadify({
                ////接受true or false两个值，当为true时选择文件后会自动上传；为false时只会把选择的文件增加进队列但不会上传，这时只能使用upload的方法触发上传。不设置
                'auto'     : false,
                
                //falsh路径
                'swf'      :  '<%=basePath%>'+'/css/uploadify.swf',
                
                //上传到服务器
                
                'uploader' :'<%=basePath%>'+'/upload/unloadifyU',
                
                //XX图片
                //'cancelImg' :  '<%=basePath%>'+'/css/uploadify-cancel.png',
                
                //The maximum size allowed for a file upload.  This value can be a number or string.  If it’s a string, it accepts a unit (B, KB, MB, or GB).  The default unit is in KB.  You can set this value to 0 for no limit.
                //设置上传文件的容量最大值。这个值可以是一个数字或者字符串。如果是字符串，接受一个单位（B,KB,MB,GB）。如果是数字则默认单位为KB。设置为0时表示不限制
                'fileSizeLimit' : '100000KB',
                
                //The maximum number of files that can be in the queue at one time.  This does not limit the number of files that can be uploaded.  To limit the number of files that can be uploaded, use uploadLimit.  If the number of files selected to add to the queue exceeds this limit, the <onSelectError> event is triggered.Default Value999
                //设置每一次上传队列中的文件数量。注意并不是限制总的上传文件数量（那是uploadLimit）.如果增加进队列中的文件数量超出这个值，将会触发onSelectError事件。默认值为999
                //queueSizeLimit等 可触发onSelectError
                'queueSizeLimit' : 1,

//The maximum number of files you are allowed to upload.  When this number is reached or exceeded, the <onUploadError> event is triggered.Default Value999
                //uploadLimit等 可触发onUploadError
                //允许上传多少个，除非重新刷新
                'uploadLimit' : 10,

//Default Value'*.*'   (i.e. ‘*.jpg; *.png; *.gif’).
                //设置允许上传的文件扩展名（也就是文件类型）。但手动键入文件名可以绕过这种级别的安全检查，所以你应该始终在服务端中检查文件类型。输入多个扩展名时用分号隔开('*.jpg;*.png;*.gif')
                'fileTypeExts' : '*.txt;*.sql;*.gif; *.jpg; *.png',
                
                //An object containing additional data to send via get or post with each file upload.  If you plan on setting these values dynamically, this should be done using the ‘settings’ method in the onUploadStart event.  You can access these values in the server-side script using the $_GET or $_POST arrays (PHP).
                //通过get或post上传文件时，此对象提供额外的数据。如果想动态设置这些值，必须在onUploadStartg事件中使用settings的方法设置。在后台脚本中使用 $_GET or $_POST arrays (PHP)存取这些值。看官网参考写法：http://www.uploadify.com/documentation/uploadify/formdata/
                'formData'      : {'id' : "1", 'idd' : 1111},
                //也可这样onUploadStart动态设置值
                
                //Set to false to keep files that have completed uploading in the queue. Default Value true
                //是否移除掉队列中已经完成上传的文件。false为不移除
                'removeCompleted' : false,
                
                //The delay in seconds before a completed upload is removed from the queue.Default Value 3
                ////设置上传完成后删除掉文件的延迟时间，默认为3秒。如果removeCompleted为false的话，就没意义
                //'removeTimeout' : 3,
                
                ////提交上传文件的方法，接受post或get两个值，默认为post
                'method'   : 'post',
                
                //Set to false to allow only one file selection at a time.Default Value true
                //设置是否允许一次选择多个文件，true为允许，false不允许
                //'multi'    : false,
                
                //The ID (without the hash) of a DOM element to use as the file queue.  File queue items will be appended directly to this element if defined.  If this option is set to false, a file queue will be generated and the queueID option will be dynamically set.Default Value false
                //设置上传队列DOM元素的ID，上传的项目会增加进这个ID的DOM中。设置为false时则会自动生成队列DOM和ID。默认为false
                //'queueID'  : 'some_file_queue',
                
            
                //If set to true, a random value is added to the SWF file URL so it doesn’t cache.  This will conflict with any existing querystring parameters on the SWF file URL.Default Value true
                ////是否缓存swf文件。默认为true，会给swf的url地址设置一个随机数，这样它就不会被缓存。(有些浏览器缓存了swf文件就会触发不了里面的事件--by rainweb)
                //'preventCaching' : true,
                
                //Set what type of data to display in the queue item during file upload progress updates.  The two options are ‘percentage’ or ‘speed’.
                //Default Value'percentage'
                //'progressData' : 'speed',
                
                //The time in seconds to wait for the server’s response when a file has completed uploading.  After this amount of time, the SWF file will assume success.Default Value30
                //设置文件上传后等待服务器响应的秒数，超出这个时间，将会被认为上传成功，默认为30秒
                //'successTimeout' : 5,
                
                //If set to true, files that return errors during an upload are requeued and the upload is repeatedly tried.Default Valuefalse
                //设置上传过程中因为出错导致上传失败的文件是否重新加入队列中上传
                'requeueErrors' : false,
                
                
                //The name of the file object to use in your server-side script.  For example, in PHP, if this option is set to ‘the_files’, you can access the files that have been uploaded using $_FILES['the_files'];
              //设置在后台脚本使用的文件名。举个例子，在php中，如果这个选项设置为'the_files',你可以使用$_FILES['the_files']存取这个已经上传的文件。
                //'fileObjName' : 'the_files',
                
                
                //button height,Default Value 30
                ////设置按钮的高度(单位px)，默认为30.(不要在值里写上单位，并且要求一个整数，width也一样)
                //'height'   : 50,
                
                //button width,Default Value 120
                ////设置按钮宽度(单位px)，默认120
                //'width'    : 300,
                
                //The description of the selectable files.  This string appears in the browse files dialog box in the file type drop down.
                //弹出窗口时候右边选择类型的描叙，意义不大
                //'fileTypeDesc' : 'Any old file you want...',
                
                //debug模式
                //'debug'    : false,
                
                ////设置上传按钮的class
                //'buttonClass':'',
                
                //设置图片按钮的路径（当你的按钮是一张图片时）。如果使用默认的样式，你还可以创建一个鼠标悬停状态，但要把两种状态的图片放在一起，并且默认的放上面，悬停状态的放在下面（原文好难表达啊：you can create a hover state for the button by stacking the off state above the hover state in the image）。这只是一个比较便利的选项，最好的方法还是把图片写在CSS里面
                //'buttonImage':'',
                
                 ////设置按钮文字。值会被当作html渲染，所以也可以包含html标签
                //buttonText: '<div>选择文件</div>'
                
                //The script should return 1 if the file name exists or 0 if the file name does not exist.
                ////接受一个文件路径。此文件检查正要上传的文件名是否已经存在目标目录中。存在时返回1，不存在时返回0(应该主要是作为后台的判断吧)，默认为false
                //'checkExisting' : '/uploadify/check-exists.php',
                
                ////设置鼠标移到按钮上的开状，接受两个值'hand'和'arrow'(手形和箭头)默认是hand
                //'buttonCursor' : 'arrow',
                
                //An array of event names for which you would like to bypass the default scripts for.  You can tell which events can be overridden on the documentation page for each event.
                //Default ValueEmpty Array
                ////重写事件，接受事件名称的数组作为参数。所设置的事件将可以被用户重写覆盖
                //'overrideEvents' : ['onUploadProgress'],  
                
                
                 //itemTemplate:The itemTemplate option allows you to specify a special HTML template for each item that is added to the queue.           
                //'itemTemplate' : '',
                
                
                
                
                
                
                         
                //事件
                
                
                   //Triggered when a file is removed from the queue (but not if it’s replaced during  a select operation).
                onCancel: function(file){
                        alert(file.name+":cancle");
                },
                
                //文件被移除出队列时触发,返回file参数
                onClearQueue: function(queueItemCount){
                    //console.log(queueItemCount+'file(s) were removed frome the queue');
                },
                
                
                onDestroy: function(){
                    //调用destroy方法的时候触发
                },
                
                //打开选择文件对话框时触发
                onDialogOpen:function(){
                    //console.log('OPEN dialog');
                },
                
                //关闭掉浏览文件对话框时触发。返回queueDate参数，有以下属性：
                /*
                    filesSelected 浏览文件对话框中选取的文件数量
                    filesQueued 加入上传队列的文件数
                    filesReplaced 被替换的文件个数
                    filesCancelled 取消掉即将加入队列中的文件个数
                    filesErrored 返回错误的文件个数
                */
                onDialogClose: function(queueData){
                    //console.log(queueData.filesSelected+'\n'+queueData.filesQueued+'\r\n'+queueData.filesReplaced+'\r\n'+queueData.filesCancelled+'\r\n'+ queueData.filesErrored)
                },
                
                onDisable:function(){
                    //禁用uploadify时触发(通过disable方法)
                },
                onEnalbe: function(){
                    //启用uploadify时触发(通过disable方法)
                },
                
                
               //每次初始化一个队列时触发，返回uploadify对象的实例
                onInit: function(instance){
                    //console.log('The queue ID is:'+ instance.settings.queueID);
                },
                
                onSWFReady: function(){
                    //swf动画加载完后触发，没有参数
                    //console.log('SWF IS READDY');
                },
                
                onFallback:function(){
                    //在初始化时检测不到浏览器有兼容性的flash版本时实触发
                    alert("init false error");
                },
                
                
              //选择每个文件增加进队列时触发，返回file参数
                onSelect: function(file){
                    //console.log("onSelect:::"+file.name);
                },
                
                /*
                errorCode是一个包含了错误码的js对象，用来查看事件中发送的错误码，以确定错误的具体类型，可能会有以下的常量：
                QUEUE_LIMIT_EXCEEDED:-100 选择的文件数量超过设定的最大值；
                FILE_EXCEEDS_SIZE_LIMIT:-110 文件的大小超出设定
                INVALID_FILETYPE:-130 选择的文件类型跟设置的不匹配

errorMsg 完整的错误信息，如果你不重写默认的事件处理器，可以使用‘this.queueData.errorMsg’ 存取完整的错误信息
                */
                onSelectError: function(file,errorCode,errorMsg){
                    //console.log(errorCode);
                    //console.log(this.queueData.errorMsg);
                },
                
                
              //每个文件即将上传前触发
                'onUploadStart' : function(file) {
                    $("#file_upload").uploadify("settings", "formData", {"someOtherKey":1111111});
                },
                
              //每个文件上传成功后触发 ,可根据服务器返回data字段进行下一步
                onUploadSuccess: function(file,data,respone){
                    alert( 'id: ' + file.id+ ' - 索引: ' + file.index
                    + ' - 文件名: ' + file.name
                    + ' - 文件大小: ' + file.size
                    + ' - 类型: ' + file.type
                    + ' - 创建日期: ' + file.creationdate
                    + ' - 修改日期: ' + file.modificationdate
                    + ' - 文件状态: ' + file.filestatus
                    + ' - 服务器端消息: ' + data
                    + ' - respone: ' + respone);
                },
                
                          
                //一个文件完成上传但返回错误时触发，有以下参数
                /*
                    file 完成上传的文件对象
                    errorCode 返回的错误代码
                    erorMsg 返回的错误信息
                    errorString 包含所有错误细节的可读信息
                */
                onUploadError: function(file,errorCode,erorMsg,errorString){
                },
                
                
                
                
                
                onUploadComplete: function(file){
                    //在每一个文件上传成功或失败之后触发，返回上传的文件对象或返回一个错误，如果你想知道上传是否成功，最后使用onUploadSuccess或onUploadError事件
                },
                
                
                //每更新一个文件上传进度的时候触发,返回以下参数
                /*
                    file 正上传文件对象
                    bytesUploaded 文件已经上传的字节数
                    bytesTotal 文件的总字节数
                    totalBytesUploaded 在当前上传的操作中（所有文件）已上传的总字节数
                    totalBytesTotal 所有文件的总上传字节数
                */
                onUploadProgress: function(file,bytesUploaded,bytesTotal,totalBytesUploaded,totalBytesTotal){
                    $('#pregress').html('<span>总共需要上传'+bytesTotal+'字节，'+'已上传'+totalBytesTotal+'字节</span>');
                },
                
                
                
                
                
                //队列中的文件都上传完后触发，返回queueDate参数，有以下属性：
                /*
                    uploadsSuccessful 成功上传的文件数量
                    uploadsErrored 出现错误的文件数量
                */
                onQueueComplete:function(queueData){
                    console.log("onQueueComplete::::::"+queueData.uploadsSuccessful+'\n'+queueData.uploadsErrored);
                },
                
                
                
                
            });  
            
                 
            
        });  
        
        function changeBtnText() {
            $('#file_upload').uploadify('settings','buttonText','BROWSE');
        }
        function returnBtnText() {
            alert('The button says ' + $('#file_upload').uploadify('settings','buttonText'));
        }

</script>

</head>

<body>
<form>

<input type="text" name="xxxxxxxxx" />

<div id="some_file_queue"></div>

<div id="pregress"></div>
    <input type="file" name="file_upload" id="file_upload" />
<br/>
    <div>
    <a href="javascript:$('#file_upload').uploadify('cancel')">Cancel First File</a> | <a href="javascript:$('#file_upload').uploadify('cancel', '*')">Clear the Queue</a>
   </div>
<br/>   
   <div>
   <a href="javascript:$('#file_upload').uploadify('destroy')">Destroy Uploadify</a>
   </div>
<br/>   
   <div>
   <a href="javascript:$('#file_upload').uploadify('disable', true)">Disable the Button</a> | <a href="javascript:$('#file_upload').uploadify('disable', false)">Enable the Button</a>
   </div>
<br/>   
   <div>
   <a href="javascript:$('#file_upload').uploadify('upload','*')">Upload Files</a>
   </div>
<br/>   
   <div>
    <a href="javascript:$('#file_upload').uploadify('stop')">Stop the Uploads!</a>
   </div>
   <br/>
     
   <div>
   <a href="javascript:changeBtnText()">Change the Button Text</a> | <a href="javascript:returnBtnText();">Read the Button</a>
   </div>
   
</form>
  </body>
</html>

后台程序

    @RequestMapping(value="unloadify")
    public String unloadify(HttpServletRequest request,HttpServletResponse response){       
        return "/unloadify";
    }
    
    
    @RequestMapping(value="unloadifyU",method=RequestMethod.POST)
    public void unloadifyU(HttpServletRequest request,HttpServletResponse response) throws FileUploadException, Exception{
        
        Map<String,String> map = new HashMap<String,String>();
        PrintWriter out = response.getWriter();
        
      //这样获取不到unloadify中设置formData的值，要通过下面方法取（getFieldName，getString），和form中name的值（因为不是form提交）
        String id=request.getParameter("id");
        String idd=request.getParameter("idd");  
        String someOtherKey=request.getParameter("someOtherKey");
        String xxxxxxxxx=request.getParameter("xxxxxxxxx");
        
        File uploadPath = new File("D:\\temp");//上传文件目录
        if (!uploadPath.exists()) {
           uploadPath.mkdirs();
        }
        // 临时文件目录
        File tempPathFile = new File("d:\\temp\\buffer\\");
        if (!tempPathFile.exists()) {
           tempPathFile.mkdirs();
        }
        try {
           DiskFileItemFactory factory = new DiskFileItemFactory();
           factory.setSizeThreshold(4096); // 设置缓冲区大小，这里是4kb
           factory.setRepository(tempPathFile);//设置缓冲区目
           ServletFileUpload upload = new ServletFileUpload(factory);    
           upload.setSizeMax(41943040); // 设置最大文件尺寸，这里是40MB
     
           List<FileItem> items = upload.parseRequest(request);//得到所有的文件
           Iterator<FileItem> i = items.iterator();
           while (i.hasNext()) {
               FileItem fi = (FileItem) i.next();           
               if(fi.isFormField()){//如果是普通的表单字段           
                   //获取unloadify中设置formData的值，而不是form的值，因为不是form提交所以xxxxxxxxx读取不到
                   String fieldName = fi.getFieldName();
                   System.out.println(" name is:" + fi.getFieldName()+"-value:"+ fi.getString());//显示表单内容。
                   
               }else{//如果是上传文件，显示文件名。
                   String fileName = fi.getName();
                   if (fileName != null) {                     
                       //检查文件后缀格式  
                   String fileEnd = fileName.substring(fileName.lastIndexOf(".")+1).toLowerCase();                   
                   List<String> extList=new ArrayList<String>();//ext后缀校验
                   extList.add("sql");
                   extList.add("txt");
                     if(extList.contains(fileEnd)){
                         File fullFile = new File(fi.getName());
                         File savedFile = new File(uploadPath, fullFile.getName());
                         fi.write(savedFile);
                     }else{
                            map.put("res", "1");
                         System.out.print("ext error");
                     }               
                   }
               }
           }
           map.put("res", "0");
           System.out.print("upload succeed");
        }  catch (Exception e) {
            e.printStackTrace();
         }

JSONObject jsonObject = JSONObject.fromObject(map);
        String msg =  jsonObject.toString();
        out.print(msg);
        out.close();
    }

java 上传2（使用java组件fileupload和uploadify）的更多相关文章

  1. 在C#客户端用HTTP上传文件到Java服务器

    在C#客户端用HTTP上传文件到Java服务器  来源:http://www.cnblogs.com/AndyDai/p/5135294.html 最近在做C / S 开发,需要在C#客户端上传文件到 ...

  2. java上传excel文件及解析

      java上传excel文件及解析 CreateTime--2018年3月5日16:25:14 Author:Marydon 一.准备工作 1.1 文件上传插件:swfupload: 1.2 文件上 ...

  3. edtftpj让Java上传FTP文件支持断点续传

    在用Java实现FTP上传文件功能时,特别是上传大文件的时候,可以需要这样的功能:程序在上传的过程中意外终止了,文件传了一大半,想从断掉了地方继续传:或者想做类似迅雷下载类似的功能,文件太大,今天传一 ...

  4. Java上传文件FTP服务器代码

    1. 在实际的应用重,通常是通过程序来进行文件的上传. 2. 实现java上传文件到ftp服务器中 新建maven项目 添加依赖 <dependency> <groupId>c ...

  5. java模拟表单上传文件，java通过模拟post方式提交表单实现图片上传功能实例

    java模拟表单上传文件,java通过模拟post方式提交表单实现图片上传功能实例HttpClient 测试类,提供get post方法实例 package com.zdz.httpclient; i ...

  6. java 上传文件到 ftp 服务器

    1.  java 上传文件到 ftp 服务器 package com.taotao.common.utils; import java.io.File; import java.io.FileInpu ...

  7. 根据短链生成二维码并上传七牛云(Java)

    通过短链生成二维码并上传七牛云(Java) 前言 网上这种帖子其实也是很多,大部分搜出来的是CSDN的,然后点进去一看都几乎一样:所以这次给个自己实践的例子记录. 这次也是通过搜索得到的一部分能实现这 ...

  8. java上传组件FileUpload

    如果表单中有文件要上传,也就是有<input type="file" name="name"/> 就需要在form标签中添加enctype=&quo ...

  9. java 上传1（使用java组件fileupload）

    使用fileupload要添加以下包

随机推荐

  1. Hibernate(一)之Hibernate入门

    一.Hibernate入门 ssh框架体系结构 1.1.ORM框架 Hibernate是一个数据持久化层的ORM框架. Object:对象,java对象,此处特指JavaBean Relational ...

  2. java中GUI的awt和Swing的知识点

    刚刚学习了java的GUI,写了几个程序,基本熟悉了awt和Swing,下面和大家分享一下知识点 1.JFrame的层次结构 参考:http://tieba.baidu.com/p/200421612 ...

  3. 如何高效实现扫描局域网IP、主机名、MAC和端口

    近几年工作经常使用RFID识读器,智能家居网关,温湿度传感器.串口服务器.视频编码器等,一般是有串口和网口,由于现场原因一般较少使用串口,大多使用网口.连接方法是IP地址和端口,有的设备带搜索软件,有 ...

  4. c#FTP操作类,包含上传，下载，删除，获取FTP文件列表文件夹等Hhelp类

    有些时间没发表文章了,之前用到过,这是我总结出来关于ftp相关操作一些方法,网上也有很多,但是没有那么全面,我的这些仅供参考和借鉴,希望能够帮助到大家,代码和相关引用我都复制粘贴出来了,希望大家喜欢 ...

  5. python paramiko模块简介

    一:简介 paramiko是用python语言写的一个模块,遵循SSH2协议,支持以加密和认证的方式,进行远程服务器的连接. 由于使用的是python这样的能够跨平台运行的语言,所以所有python支 ...

  6. chrome浏览器tab页内存占用变大，网站变慢为哪般？

    问题概述: 公司做的是BS应用. 之前我们的后台服务器程序是带状态的,用ehcache存储登录状态:这两天被我改成了redis存储,应用本身不再存储登录状态. 然后自测,我在测试某个很耗时间的网页操作 ...

  7. html、css、js实现简易计算器

    学习HTML,CSS,JS一个月后,想着能自己是否能写出一个简单的东西,故编写了简易的计算器,之前也写过一个坦克大战,坦克大战的有些基本功能没有实现, 故也没有记录下来,想来,对这行初来咋到的,还是需 ...

  8. jquery使用CSS3实现文字动画效果插件Textillate.js

    Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...

  9. stl_组件

    2.1.STL中: 2.1.1.包含常用的数据结构. 2.1.2.包含常用的基本算法.结构和算法其实就是一些接口. 2.1.3.提供了一套可扩展的框架. 2.2.六大组件: 2.2.1.容器组件(基本 ...

  10. webpack中dev-server不写contentBase时如何设置可以显示页面并且加载js

    今天学习了dev-server这个配置,中间遇到疑惑,我写了contentBase是可以走通,可以再localhost:8080看到页面并且正确加载bundle.js的,但是这个contentBase ...