nutz 文件上传例子

2.6. 文件上传例子

用netbean 6.9.1 ,nutz-1.a.31书写。附件是完整源代码,注意要引用lib中的nutz包

在入口函数中如下定义:
@AdaptBy(type = UploadAdaptor.class,args = { "d:/uploadTemp", "8192", "UTF-8", "10" })
其中:args中用逗号分割了四个参数,第一个是临时文件夹,nutz所上传的文件都放在这里,第二个是缓冲区大小限制,第四个是临时文件个数限制
由于nutz在上传中会自动在临时文件夹中生成子文件夹,因此使用时,需要在入口函数中,增加Tempfile参数:形如
@Param("Filedata") TempFile  f,
其中:Filedata 是客户端上传文件中所定义的名称。第三方上传控件,需要打印request的输入流,进行查看。

以下是例子,客户端有两个,一个使用上传组件,一个没有使用。其中的web.xml与主模块 省略,详细见相关的hello Mvc.
2.6.1. 没使用上传组件的客户端
注:
    (1) 注意 “Filedata”,在服务端,得上传文件在临时文件夹中的路径时,要用上
    (2) 本例上传时,会检查文件大小与格式
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  
</head>
 <body>
//注意 下面的“Filedata”,在服务端得上传文件在临时文件夹中的路径时,要用上
 <form  name ="fr"  action ="upload"  method ="post"  enctype ="multipart/form-data"  onsubmit ="return chk()" >
     <input  type ="file"  name ="Filedata"  id ="Filedata"  size ="30"  UNSELECTABLE ="on" />
     <input  type ="submit"  name ="submit"  value ="上传" />
 </form>
 <script  language ="javascript" >
    function  chk() {
    var  s=fr.file.value;
    if (fr.file.value == "" ) {   
        alert( "请输入图片地址!" );
        fr.file.focus();
        return  false ;
     }
     s= s.substr(s.lastIndexOf( " . " ) + 1 , 3 );
    // if (s != "gif" && s != "jpg" ){
    //   alert( " 请选择正确的图片格式! " )
     //  return   false ;
    //}

     var img=new Image();
     var  FileMaxSize  =   100 ; // 限制上传的文件大小,单位(k)

     img.src    =  fr.file.value;
     if (img.fileSize > FileMaxSize * 1024 )  {
        alert("请上传小于100K的图片" );
        fr.file.focus();
         return   false ;
      }
    }
 </script>
 </body>
 </HTML>


2.6.2. 使用上传组件uploadify
说明:
   (1)组件下载点http://www.uploadify.com/
   (2)使用了jquery,下载点:http://docs.jquery.com/Downloading_jQuery
   (3) uploadify 中使用了这些文件:uploadify.css;swfobject.j;jquery.uploadify.v2.1.0.min.js;uploadify.swf;cancel.png。这些文件分别在本文件同层文件夹相应的子文件中。如果 代码是:“./image/cancel.png”,表时,该文件与f.html文件同层文件夹下的名为image的文件夹中。

f.html源代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>uploadify-实例</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="./css/default.css" rel="stylesheet" type="text/css" />
        <link href="./css/uploadify.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="./js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="./js/swfobject.js"></script>
        <script type="text/javascript" src="./js/jquery.uploadify.v2.1.0.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#uploadify").uploadify({
                    'uploader'       : './flash/uploadify.swf',
                    'script'         : 'upload?',
                    'cancelImg'      : './image/cancel.png',
                    'queueID'        : 'fileQueue',
                    'auto'           : false,
                    'multi'          : true,
                    'wmode'			 : 'transparent',
                    'simUploadLimit' : 999,
                    'fileExt'		 : '*.png;*.gif;*.jpg;*.bmp;*.jpeg;*.txt',
                    'fileDesc'		 : '图片文件(*.png;*.gif;*.jpg;*.bmp;*.jpeg)',
                    'onAllComplete'  :function(event,data) {
                        $('#result').html(data.filesUploaded +'个图片上传成功');
                    }
                });
            });
        </script>
        <style type="text/css">
            .inputcss{
                color:#333333;
                font-family: "Tahoma";
                font-size: 12px;
                border:solid 1px #CCCCCC;
            }
            .buttoncss{
                color:#333333;
                font-family: "Tahoma";
                font-size: 12px;
                background-color:#FFFFFF;
                border:solid 1px #CCCCCC;
            }
        </style>
    </head>
    <body>
        <table style="width: 90%;">
            <tr>
                <td style="width: 100px;">
                    <input type="file" name="uploadify" id="uploadify" />
                </td>
                <td align="left">
                    <a href="javascript:$('#uploadify').uploadifyUpload()">开始上传</a>|
                    <a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消上传</a>
                <span id="result" style="font-size: 13px;color: red"></span>
                </td>
            </tr>
        </table>
        <div id="fileQueue" style="width: 400px;height: 300px; border: 2px solid green;"></div>
    </body>
</html>

  
  
2.6.3. 服务端
下面是核心代码:
@At("/upload")
    @AdaptBy(type = UploadAdaptor.class,args = { "/uploadTemp", "8192", "UTF-8", "10" })
    public String upload(
                @Param("Filedata") TempFile  f,
                HttpServletRequest req,
                ServletContext context)
 

上面中的Filedata,是客户端上传时 所使用的名称。Uploadify上传组件固定使用了Filedata名。由于Uploadify是以多次请求完成多文件上传的,而nutz无法对这种情况 给出上传文件的路径,故在用@Param("file") List<TempFile>  tempFiles 进行捕捉时,会出错。

子模块完整代码:
import java.io.IOException;
import java.sql.SQLException;
import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import org.nutz.mvc.annotation.AdaptBy;
import org.nutz.mvc.annotation.At;
import org.nutz.mvc.annotation.Ok;
import org.nutz.mvc.annotation.Param;
import org.nutz.mvc.upload.TempFile;
import org.nutz.mvc.upload.UploadAdaptor;

@Ok("json")
// @Filters({@By(type=MyFilter.class)})
public class HelloWorld {

    /*
     * 注释"@Param("Filedata ") List<TempFile>  tempFiles," 中的Filedata是客户端
     *  <input  type =" Filedata "  name =" Filedata "  id ="file" /> 中的name名
     */
    @At("/upload")
    @AdaptBy(type = UploadAdaptor.class,args = { "/uploadTemp", "8192", "UTF-8", "10" })
    public String upload(
                @Param("Filedata") TempFile  f,
                HttpServletRequest req,
                ServletContext context) throws SQLException, IOException {
        String aa="dd";
//        当@AdaptBy这句被注释不执行时,以下的代码可查看上传文件的格式
//        InputStream in= req.getInputStream();
//        ByteArrayOutputStream baos = new ByteArrayOutputStream();
//        int i = -1;
//
//        while ((i =in.read()) != -1) {
//            baos.write(i);
//        }
//        System.out.println( baos.toString());
//        String str="";
        return "";
    }

}

你可能感兴趣的:(html,jquery,mvc,json,servlet)