`
yunhuisdu19811011
  • 浏览: 94674 次
  • 性别: Icon_minigender_2
  • 来自: 济南
社区版块
存档分类
最新评论
  • fightingIOW： 案例看了，能实现上传，但是不是异步的，怎么改成页面可以预览呢？ ...
    swfUpload实例
  • kizz： 您好，实例我看了，确实不错。您有struts2版的吗？现在项目 ...
    swfUpload实例

swfUpload实例

struts2javajsp
阅读更多

 很好的实例：

 

官方网站：

http://swfupload.org/

 

 

1. 第一步：需要引入的css

    <link href="css/default.css" rel="stylesheet" type="text/css" />

2. 第二步：需要引入的js

   <script type="text/javascript" src="js/swfupload.js"></script>
   <script type="text/javascript" src="js/swfupload.queue.js"></script>
   <script type="text/javascript" src="js/fileprogress.js"></script>
   <script type="text/javascript" src="js/handlers.js"></script>

 

3.第三步：页面设置的swfupload控件的相关属性：

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

  window.onload = function() {
   var settings = {
    flash_url : "js/swfupload.swf",  // 调用的上传的flash控件
    upload_url: "${pageContext.request.contextPath}/personcenter/axtxcc/doUpload.action",     //  后台调用的文件处理程序 注意：配置不正确的话，易导致404错误
    file_size_limit : "1024 MB",       //  所选文件的最大值
    file_types : "*.*",                     //  限定所上传文件的类型
    file_types_description : "All Files",
    file_upload_limit : 100,            //  设置所上传文件最大个数
    file_queue_limit : 0,                 //  设置上传列表中的最大个数 0：不限制
    custom_settings : {                 //  用户自定义设置
     progressTarget : "fsUploadProgress",
     uploadButtonId : "btnUpload",
     cancelButtonId : "btnCancel"
    },
    debug: false,
    auto_upload:false,                  //  设置自动上传为false

 

    // Button settings   按钮的设置
    button_image_url: "images/TestImageNoText_65x29.png",
    button_width: "65",
    button_height: "29",
    button_placeholder_id: "spanButtonPlaceHolder",
    button_text: '<span class="theFont">选择</span>',
    button_text_style: ".theFont { font-size: 14; }",
    button_text_left_padding: 15,
    button_text_top_padding: 3,
    
    // The event handler functions are defined in handlers.js  事件的处理函数定义在handlers.js中
    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,
    queue_complete_handler : queueComplete // Queue plugin event
   };

   swfu = new SWFUpload(settings);
      };
 </script>

 

4. 第四步：页面代码：

   
 <body>
  <form id="form1" action="uploadFile.do" method="post"
   enctype="multipart/form-data">
   <div class="wrap" id="content">
    <div class="titleDiv">
     <div class="titleFont">
      <img src="images/up.png" width="16" height="16" />
      文件上传
     </div>
    </div>
    <div class="content">
     <div class="fieldset flash" id="fsUploadProgress">
      <p>
       <span class="legend">上传列表</span>
      </p>
     </div>
     <div id="divStatus" class="num">
      0 个文件上传
     </div>
     <div style="margin-left: 30px;">
      <span id="spanButtonPlaceHolder"></span>
      <div style="margin-top: -20px; margin-left: 60px;">
      
      <input id="btnUpload" type="button" value="上 传"
         onclick="swfu.startUpload();"
         style="margin-left: 20px; margin-bottom: 10px" class="Btn" />
         
       <input id="btnCancel" type="button" height="29" value="取消上传"
        onclick="swfu.cancelQueue();"
        style="margin-left: 20px; margin-bottom: 10px" />
      </div>
     </div>
    </div>
   </div>
  </form>
 </body>

 

5:第五步：后台的处理代码：

// 上传文件，并将文件信息保存到数据库中
 public String doUpload() {
  try {

   if (file != null) {

    // 将文件名解码
    /*ServletActionContext.getRequest().setCharacterEncoding("gbk");
     String fileFName = ServletActionContext.getRequest()
      .getParameter("fileFName");
        String title =URLDecoder.decode(fileFName, "UTF-8");
              */

    String realpath = ServletActionContext.getServletContext().getRealPath(StringContonts.FILE_AXT_PATH);
    
    // 将文件上传到文件服务器上 begin
    File savefile = new File(new File(realpath), fileFileName);
    
    // 判断目录是否存在，不存在，创建目录
    if (!savefile.getParentFile().exists())
     savefile.getParentFile().mkdirs();
    FileUtils.copyFile(file, savefile);
    // 将文件上传到文件服务器上 end
    return "success";
   } else {
    return "error";
   }

  } catch (Exception e) {
   // TODO Auto-generated catch block
   e.printStackTrace();

   return "error";
  }
 }

 

6. 第六步 配置文件：

<!-- swf文件上传测试  注意：result的返回路径一定要配置正确，否则报404错误 --> 
  <action name="doUpload" class="swfUploadAction" method="doUpload">
   <result name="success">/personcenter/aixuetang/course/swfupload.jsp</result>
   <result name="error">/personcenter/aixuetang/course/swfupload.jsp</result>
  </action> 

 

分享到：
| 图片轮播js及调用
评论
2 楼 fightingIOW 2014-04-28  
案例看了，能实现上传，但是不是异步的，怎么改成页面可以预览呢？
1 楼 kizz 2013-11-07  
您好，实例我看了，确实不错。您有struts2版的吗？现在项目中要用
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    SWFUpload实例

    - **初始化设置**：在JavaScript中配置SWFUpload实例，设置服务器端接收文件的URL、文件大小和类型限制等。 - **绑定事件**：为SWFUpload的各种事件注册处理函数，例如上传开始、上传结束、文件成功/失败等。 - *...

    swfupload 实例

    - 使用`window.onload`确保在页面加载完成后初始化SWFUpload实例。 - `settings`对象包含了SWFUpload的配置，如`flash_url`指定Flash文件路径，`post_params`用于传递额外参数到服务器。 - 事件处理函数如`...

    PHP jquery SWFUpload 实例

    在网页中引入jQuery和SWFUpload库，然后配置SWFUpload实例。这包括设置上传URL、文件类型限制、文件大小限制等参数。 ```html &lt;script src="jquery.js"&gt;&lt;/script&gt; &lt;script src="swfupload.js"&gt; $(document).ready...

    swfupload实例（java能运行）

    SWFUpload实例中的"SWFTest"可能是一个包含测试代码的文件或目录，用于演示如何与Java后台交互。这可能包括一个简单的HTML页面，展示SWFUpload的使用，以及Java代码处理文件上传的逻辑。在调试过程中，你可能会遇到...

    swfupload实例 结合c# 包含样式和用到的js flash

    总的来说，这个SWFUpload实例结合C#的上传解决方案提供了一种高效且用户友好的文件上传体验。它展示了如何利用JavaScript库与后端服务进行交互，以及如何通过CSS定制上传组件的视觉效果。如果你正在寻找一个支持多...

    swfupload实例

    四、SWFUpload实例 在实际使用中，我们通常需要以下步骤来集成SWFUpload： 1. 引入SWFUpload库：在HTML页面中添加SWFUpload的JavaScript和Flash文件引用。 2. 初始化SWFUpload对象：配置参数，如文件大小限制、文件...

    SWFUpload实例代码.pdf

    然后通过`new SWFUpload(settings)`来创建SWFUpload实例。 由于文件内容中的文字是通过OCR扫描获取的，可能存在一些识别错误或遗漏，但可以确定的是，文件中描述的代码和知识点主要用于展示如何在Web应用中嵌入...

    swfupload实例]SWFUpload_java实例.doc

    ### SWFUpload与Java实例详解 #### SWFUpload概述 SWFUpload是一个强大的Flash和JavaScript组件，用于实现浏览器上的多文件无刷新上传功能。通过利用Flash技术，它能够跨浏览器和平台提供一致的用户体验，同时提供...

    mvc下swfupload实例

    在本实例中，我们将探讨如何在MVC（Model-View-Controller）架构下集成SwfUpload，特别是在Visual Studio 2013环境下。 1. **MVC 框架** MVC是一种设计模式，用于将业务逻辑、数据模型和用户界面分离。在ASP.NET ...

    swfUpload实例程序

    **SWFUpload 实例程序详解** SWFUpload 是一款经典的前端文件上传组件，它通过Flash技术实现了非阻塞式的多文件上传功能。这个实例程序提供了一个可以直接运行的环境，帮助开发者快速理解和应用SWFUpload。 ### 一...

    ASP+swfUpload使用实例

    在JavaScript部分，开发者会初始化SWFUpload实例，设置参数如上传URL、文件类型限制等，并绑定事件处理函数来处理文件选择、上传进度、成功/失败等事件。 "readme.txt"通常包含有关如何使用此实例的说明，可能包括...

    SWFUPLOAD使用实例 (JSP)

    下面将详细介绍SWFUpload的使用及其在JSP环境中的应用实例。 首先，SWFUpload的核心特性在于它支持多个文件同时上传，用户可以在选择文件时无需多次点击，极大地提升了用户体验。此外，它还提供了进度条显示，让...

    SWFupload文件上传实例

    在SWFUpload实例中，开发者通常会遇到以下关键知识点： 1. **文件选择和预览**：SWFUpload使用Flash组件提供一个用户友好的文件选择对话框，支持多文件选择。选择的文件可以在网页上预览，提高了用户体验。 2. **...

    swfUpload+多文件上传php实例代码

    考虑到不同设备和浏览器的兼容性，SWFUpload实例的创建和事件处理应确保在各种环境下都能正常工作。 9. **AJAX通信**： 虽然SWFUpload是基于Flash，但它通常会通过XMLHttpRequest（XHR）进行部分通信，比如获取...

    大名鼎鼎SWFUpload- Flash+JS 上传

    动态修改实例设置 接收服务端返回的数据 (只针对Flash 9 版本) 非取消形式的停止文件上传 自定义上传的顺序 支持单文件、多文件的文件的选择 文件入队数量，文件上传数量和文件大小的限制 更合理地处理0字节的...

Magicbox
Global site tag (gtag.js) - Google Analytics