利用SWFUpload V2.2.0 免费控件进行大文件上传!

 

 

1.页面

1.引用js脚本  2.编写样式

<link href="swfupload/css/default.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="swfupload/js/swfupload.js"></script>
    <script type="text/javascript" src="swfupload/js/swfupload.queue.js"></script>
    <script type="text/javascript" src="swfupload/js/fileprogress.js"></script>
    <script type="text/javascript" src="swfupload/js/handlers.js"></script>
   <!-- 初始化swfupload 对象-->

<script type="text/javascript">
  var upload;

  window.onload = function() {
   upload = new SWFUpload({

    //提交路径
    upload_url: "upload.action",
    //向后台传递额外的参数
    post_params: {"name" : "kaobian"},
    //上传文件的名称
    file_post_name: "file",
    
    // 下面自己按照字面意思理解
    file_size_limit : "2048 MB", // 100MB
    file_types : "*.*",
    file_types_description : "All Files",
    file_upload_limit : "10",
    file_queue_limit : "0",

    // 事件处理
    file_dialog_start_handler : fileDialogStart,
    file_queued_handler : fileQueued,
    file_queue_error_handler : fileQueueError,
    file_dialog_complete_handler : fileDialogComplete,
    upload_start_handler : uploadStart,
    upload_progress_handler : uploadProgress,
    upload_error_handler : uploadError,
    upload_success_handler : uploadSuccess,
    upload_complete_handler : uploadComplete,
    

    // 按钮的处理
    button_image_url : "swfupload/images/XPButtonUploadText_61x22.png",
    button_placeholder_id : "spanButtonPlaceholder1",
    button_width: 61,
    button_height: 22,
    
    
    // Flash Settings
    flash_url : "swfupload/js/swfupload.swf",
    

    custom_settings : {
     progressTarget : "fsUploadProgress1",
     cancelButtonId : "btnCancel1"
    },
    
    // Debug Settings
    debug: false
   });
      }
    
 </script>
  </head>
 
  <body>
  <div id="content">
    <form action="upload.action" method="post" name="thisform" enctype="multipart/form-data">
  <table>
   <tr valign="top">
    <td>
     <div>
      <div class="fieldset flash" id="fsUploadProgress1">
       <span class="legend">文件上传</span>
      </div>
      
      <div style="padding-left: 5px;">
       <span id="spanButtonPlaceholder1"></span>
       <input type="button" value="开始上传" onclick="upload.startUpload()"/>
       <input id="btnCancel1" type="button" value="停止上传" onclick="cancelQueue(upload);" disabled="disabled" style="margin-left: 2px; height: 22px; font-size: 8pt;" />
       <br />
      </div>
     </div>
    </td>
   </tr>
  </table>
    </form>
    </div>
    <div><A href="test.action">测试</A></div>

 

 

 

2.配置struts2.xml

<!-- 配置struts2.1.8 上传是文件的最大限制为100000M -->
 <constant name="struts.multipart.maxSize" value="1048576000000" />
 
 <!-- 设置struts2 上传文件时  保存的临时目录 -->
 <constant name="struts.multipart.saveDir" value="C:\temp"></constant>

 

3.action写入流

// 实现上传
  InputStream is = new FileInputStream(file);
  String root = ServletActionContext.getRequest().getRealPath("/upload");
  File deskFile = new File(root, this.getFileFileName());
  OutputStream os = new FileOutputStream(deskFile);
  byte[] bytefer = new byte[1024];
  int length = 0;
  while ((length = is.read(bytefer)) != -1) {
   os.write(bytefer, 0, length);
  }
  os.close();
  is.close();
  return "success";$('#uploadify').uploadify({
    uploader: '/home/upload',           // 服务器端处理地址
    swf: '/uploadify/uploadify.swf',    // 上传使用的 Flash

    width: 60,                          // 按钮的宽度
    height: 23,                         // 按钮的高度
    buttonText: "上传",                 // 按钮上的文字
    buttonCursor: 'hand',                // 按钮的鼠标图标

    fileObjName: 'Filedata',            // 上传参数名称

    // 两个配套使用
    fileTypeExts: "*.jpg;*.png",             // 扩展名
    fileTypeDesc: "请选择 jpg png 文件",     // 文件说明

    auto: true,                // 选择之后,自动开始上传
    multi: true,               // 是否支持同时上传多个文件
    queueSizeLimit: 5          // 允许多文件上传的时候,同时上传文件的个数

});


例子2

$('#uploadify').uploadify({
    uploader: '/home/upload',           // 服务器端处理地址
    swf: '/uploadify/uploadify.swf',    // 上传使用的 Flash

    width: 60,                          // 按钮的宽度
    height: 23,                         // 按钮的高度
    buttonText: "上传",                 // 按钮上的文字
    buttonCursor: 'hand',                // 按钮的鼠标图标

    fileObjName: 'Filedata',            // 上传参数名称

    // 两个配套使用
    fileTypeExts: "*.jpg;*.png",             // 扩展名
    fileTypeDesc: "请选择 jpg png 文件",     // 文件说明

    auto: true,                // 选择之后,自动开始上传
    multi: true,               // 是否支持同时上传多个文件
    queueSizeLimit: 5          // 允许多文件上传的时候,同时上传文件的个数

});




 <ul>
            <li>uploader: 服务器端接收上传文件的地址</li>
            <li>swf:用来实现客户端支持的 Flash</li>

            <li>width:按钮的宽度</li>
            <li>height:按钮的高度</li>
            <li>buttonText: 上传按钮的文字</li>
            <li>buttonCursor:按钮的鼠标图标</li>

            <li>fileObjName:上传文件的请求参数名称</li>

            <li>fileTypeExts:上传文件过滤使用的扩展名</li>
            <li>fileTypeDesc:上传文件的类型描述</li>

            <li>auto:选择之后,是否自动开始上传</li>
            <li>multi:是否允许上传多个文件</li>
            <li>queueSizeLimit:同时选择多个文件的限额</li>
        </ul>
    </p>
    <span id="uploadify"></span>

    <script src="~/uploadify/jquery-1.9.1.min.js"></script>
    <script src="~/uploadify/jquery.uploadify.min.js"></script>
    <script type="text/javascript">
        $(function () {

            $('#uploadify').uploadify({
                uploader: '/home/upload',           // 服务器端处理地址
                swf: '/uploadify/uploadify.swf',    // 上传使用的 Flash

                width: 60,                          // 按钮的宽度
                height: 23,                         // 按钮的高度
                buttonText: "上传",                 // 按钮上的文字
                buttonCursor: 'hand',                // 按钮的鼠标图标

                fileObjName: 'Filedata',            // 上传参数名称

                // 两个配套使用
                fileTypeExts: "*.jpg;*.png",             // 扩展名
                fileTypeDesc: "请选择 jpg png 文件",     // 文件说明

                auto: true,                // 选择之后,自动开始上传
                multi: true,               // 是否支持同时上传多个文件
                queueSizeLimit: 5          // 允许多文件上传的时候,同时上传文件的个数
            });
        });






 <ul>
            <li>uploader: 服务器端接收上传文件的地址</li>
            <li>swf:用来实现客户端支持的 Flash</li>

            <li>width:按钮的宽度</li>
            <li>height:按钮的高度</li>
            <li>buttonText: 上传按钮的文字</li>
            <li>buttonCursor:按钮的鼠标图标</li>

            <li>fileObjName:上传文件的请求参数名称</li>

            <li>fileTypeExts:上传文件过滤使用的扩展名</li>
            <li>fileTypeDesc:上传文件的类型描述</li>

            <li>auto:选择之后,是否自动开始上传</li>
            <li>multi:是否允许上传多个文件</li>
            <li>queueSizeLimit:同时选择多个文件的限额</li>
        </ul>
    </p>
    <span id="uploadify"></span>

    <script src="~/uploadify/jquery-1.9.1.min.js"></script>
    <script src="~/uploadify/jquery.uploadify.min.js"></script>
    <script type="text/javascript">
        $(function () {

            $('#uploadify').uploadify({
                uploader: '/home/upload',           // 服务器端处理地址
                swf: '/uploadify/uploadify.swf',    // 上传使用的 Flash

                width: 60,                          // 按钮的宽度
                height: 23,                         // 按钮的高度
                buttonText: "上传",                 // 按钮上的文字
                buttonCursor: 'hand',                // 按钮的鼠标图标

                fileObjName: 'Filedata',            // 上传参数名称

                // 两个配套使用
                fileTypeExts: "*.jpg;*.png",             // 扩展名
                fileTypeDesc: "请选择 jpg png 文件",     // 文件说明

                auto: true,                // 选择之后,自动开始上传
                multi: true,               // 是否支持同时上传多个文件
                queueSizeLimit: 5          // 允许多文件上传的时候,同时上传文件的个数
            });
        });


 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值