项目关键包和插件

插件地址：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. JAVA加密算法系列-DESCoder

    package ***; import java.security.Key; import java.security.SecureRandom; import javax.crypto.Cipher ...

  2. 【Android】基于TCP协议的网络通信

    1.使用ServerSocket 创建TCP服务器端: ServerSocket server; try { server = new ServerSocket(8000); while (true) ...

  3. $_GET

    POST GET ,是提交表单的两种方式,GET传值就用$_GET获取,POST提交表单就用$_POSTpost与get的区别是一个在地址栏显示参数,另一个不显示 如果地址是这样:http://zhi ...

  4. javascript中的几种遍历方法浅析

    1. for...in 用于对数组或者对象的属性的可枚举属性进行循环操作.注意该对象来自原型链上的可枚举属性也会被循环.下面看例子 var arr = ["lee","h ...

  5. css高级选择器

    并集选择器 p,h1{} 交集选择器 p.first{} 后代选择器:嵌套标签 h1 span{} 子元素选择器 h1>span{} 属性选择器 input[type="passwor ...

  6. 如何在 FineUIMvc 中引用第三方 JavaScript 库

    声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. 引入第三方颜色选择器 在 FineUIMvc 中使用第三方 JavaScript 遵循一定的约定,也非常简单. 下面以官网示例为 ...

  7. javascript中json对象json数组json字符串互转及取值

    今天用到了json数组和json对象和json类型字符串之间互转及取值,记录一下: 1.json类型的字符串转换为json对象及取值 var jsonString = '{"bar" ...

  8. angular中路由的实现（针对新手）

    最近搜了一下网上的教程,看完总感觉有点糊涂,对于新手来说可能云里雾里,所以写一个最简单的路由来给大家做个指引. 首先当然需要准备angular,下载地址:https://angular.io/ 现在a ...

  9. js函数中this的指向

    本文是我个人对this指向的一些理解,如有不足之处,还望大家可以批评指正,在此先谢过了! 首先,我们来回顾一下ES5里函数的几种调用方式: 1⃣️直接调用 foo(); 2⃣️方法调用 obj.foo ...

  10. Spring事务隔离级别与传播机制详解，spring+mybatis+atomikos实现分布式事务管理

    原创说明:本文为本人原创作品,绝非他处转载,转账请注明出处 1.事务的定义:事务是指多个操作单元组成的合集,多个单元操作是整体不可分割的,要么都操作不成功,要么都成功.其必须遵循四个原则(ACID). ...