浅谈struts1 & jquery form 文件异步上传


Posted in jQuery onMay 25, 2017

1.概述

还在用struts1?是的,在地球的没写地方,落后的生产方式还在运转(老项目).

从 继承org.apache.struts.action.Action, 继承org.apache.struts.action.ActionForm开始吧

2. 代码

2.1 html页面

<html>
<head>
<title>网页上传</title>
</head>
<body>
  <center>
    <h1>本地文件网页上传</h1>
    <hr>

  </center>

  <h1>文件信息列表</h1>
  <hr>
  <form id="myform" method="post" enctype="multipart/form-data">
    <table width="0" border="0" cellspacing="10" cellpadding="0">
    
      <tr>
        <td>选择文件:</td>
        <td><input type="file" name="uploadFile" /></td>
      </tr>
      <tr>
        <td>标题:</td>
        <td><input type="text" name="filetitle" /></td>
      </tr>

      <tr>
        <td colspan="2">
          <input type="button" id="mysubmit" value="确认上传"/>
        </td>
      </tr>

    </table>
  </form>
  <script src="script/jquery.js"></script>
  <script src="script/jquery.form.js"></script>
  <script src="script/_fileUpload.js"></script>
</body>
</html>

2.2 _fileUpload.js

/**
 *_fileUpload.js 
 *
 * 
 */
window.onload = function() {
  
  
  $("#mysubmit").bind("click", function(){
    $("#myform").ajaxSubmit({
      url: "myUpload.do",
      type: "post",
      success: function(data){
        console.log(11111111);
        console.log(data);
      },
      error: function(responseError){
        console.log(22222222222);
        console.log(responseError);
      }
      
    });
  });
}

2.3 MyUploadAction.java(继承自Action)

 

package com.rocky.console.action;

import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import org.apache.struts.upload.FormFile;

import com.rocky.console.form.MyUploadForm;
import com.rocky.console.service.ResponseUtil;


public class MyUploadAction extends Action {

  
  public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request,
      HttpServletResponse response) throws Exception{
    
    MyUploadForm myUploadForm = (MyUploadForm) form;
    FormFile uploadFile = myUploadForm.getUploadFile();
    String filetitle = myUploadForm.getFiletitle();
    System.out.println("111111"+filetitle);
    
    int fileSize = uploadFile.getFileSize();
    InputStream inputStream = uploadFile.getInputStream();
    System.out.println("fileSize::::::::"+fileSize);
    String path = "x:";
    String filename = path + File.separator + uploadFile.getFileName();
    FileOutputStream fos = new FileOutputStream(filename);
    byte[] b = new byte[1024];
    int len = -1;
    while((len = inputStream.read(b))!=-1){
      fos.write(b, 0, len);
    }
    fos.close();
    String result = "success";
    ResponseUtil.write(response, result, null);
    return null;
    
  }
}

 2.4 MyUploadForm.java( 继承自ActionForm)

package com.rocky.console.form;

import javax.servlet.http.HttpServletRequest;

import org.apache.struts.action.ActionErrors;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionMapping;
import org.apache.struts.upload.FormFile;

public class MyUploadForm extends ActionForm {

  /**
   * 
   */
  private static final long serialVersionUID = 6650496540449458586L;
  
  private FormFile uploadFile = null;
  
  private String filetitle;
  
  public String getFiletitle() {
    return filetitle;
  }

  public void setFiletitle(String filetitle) {
    this.filetitle = filetitle;
  }

  public ActionErrors validate(ActionMapping mapping,
      HttpServletRequest request) {
    return null;
  }
  
  public void reset(ActionMapping mapping, HttpServletRequest request) {
  }

  public FormFile getUploadFile() {
    return uploadFile;
  }

  public void setUploadFile(FormFile uploadFile) {
    this.uploadFile = uploadFile;
  }

}

2.5 struts-config.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts-config PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 1.2//EN" "struts-config_1_2.dtd">

<struts-config>
  <data-sources />
  <form-beans>
    <form-bean name="myUploadForm" type="com.rocky.console.form.MyUploadForm" />
  </form-beans>
  <global-exceptions />
  <global-forwards />
  <action-mappings>
    <!-- rocky myupload -->
    <action path="/myUpload" attribute="myUploadForm" name="myUploadForm" type="com.rocky.console.action.MyUploadAction" />
  </action-mappings>
  <message-resources parameter="ApplicationResources" />
</struts-config>

2.6 说明

2.6.1 jquery.form.js 网上可以下载

使用var formData = new FormData(), 然后formData.append("myfile", document.getElementById("myfile").files[0]);form.append...

当form表单field较多时 写很多 append很麻烦, 显然 ajaxSubmit方便很多

2.6.2 前端过来的数据 通过 ActionForm 直接封装到其子类(MyActionForm)对象中 , 用FormFile接收file文件 用String等接收其他类型数据

当然都是根据HTML 标签的name属性一一对应 来注入的

2.6.3 ActionForm是怎么和自定义实现的bean(MyUploadForm) 对上的?

在struts-config.xml中form-bean设置自己的那个bean,通过<action path="/myUpload" attribute="myUploadForm" name="myUploadForm"

来完成这种映射

以上这篇浅谈struts1 & jquery form 文件异步上传就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
jQuery实现动态操作table行
Nov 23 jQuery
jQuery实现查看图片功能
Dec 01 jQuery
jquery Form轻松实现文件上传
May 24 #jQuery
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 #jQuery
JQuery Ajax 异步操作之动态添加节点功能
May 24 #jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 #jQuery
jquery append与appendTo方法比较
May 24 #jQuery
jQuery日期范围选择器附源码下载
May 23 #jQuery
最常用的jQuery表单验证(简单)
May 23 #jQuery
You might like
php桌面中心(二) 数据库写入
2007/03/11 PHP
php access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
php获取服务器端mac和客户端mac的地址支持WIN/LINUX
2014/05/15 PHP
PHP实现加强版加密解密类实例
2015/07/29 PHP
ThinkPHP使用Ueditor的方法详解
2016/05/20 PHP
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
JavaScript中关于indexOf的使用方法与问题小结
2010/08/05 Javascript
js获取图片大小的函数代码
2011/09/20 Javascript
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
深入浅析JavaScript面向对象和原型函数
2016/02/06 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
element form 校验数组每一项实例代码
2019/10/10 Javascript
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
Vue 中使用 typescript的方法详解
2020/02/17 Javascript
pygame学习笔记(4):声音控制
2015/04/15 Python
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
Python实现直方图均衡基本原理解析
2019/08/08 Python
python实现飞机大战游戏(pygame版)
2020/10/26 Python
没编程基础可以学python吗
2020/06/17 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
python中Pexpect的工作流程实例讲解
2021/03/02 Python
CSS3+js实现简单的时钟特效
2015/03/18 HTML / CSS
时尚、社区、科技:SEVENSTORE
2019/04/26 全球购物
印度第一网上礼品店:IGP.com
2020/02/06 全球购物
教师自荐信
2013/12/10 职场文书
女娲补天教学反思
2014/02/05 职场文书
高中教师先进事迹材料
2014/08/22 职场文书
解除租房协议书
2014/12/03 职场文书
2015幼儿园新学期寄语
2015/02/27 职场文书
读《工匠精神》有感:热爱工作,精益求精
2019/12/28 职场文书
JavaScript 去重和重复次数统计
2021/03/31 Javascript