nutz 文件上传例子

最新推荐文章于 2024-06-14 11:20:36 发布

yunhaifeiwu

最新推荐文章于 2024-06-14 11:20:36 发布

阅读量275

点赞数

分类专栏： java 文章标签： jQuery MVC HTML json Servlet ViewUI

java 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

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)

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

子模块完整代码：
[code="java"]
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 "";
    }

}

yunhaifeiwu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
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中用逗号分割了四个参数，第一个是临时文...
复制链接

扫一扫