浅谈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 Validate表单验证插件实现代码
Jun 08 jQuery
使用jQuery实现动态添加小广告
Jul 11 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
jQuery实现手风琴特效
Jan 11 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文件夹与文件目录操作函数介绍
2013/09/09 PHP
PHP处理JSON字符串key缺少双引号的解决方法
2014/09/16 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
前端性能优化及技巧
2016/05/06 Javascript
JavaScript 控制字体大小设置的方法
2016/11/23 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
原生js轮播特效
2017/05/18 Javascript
Node做中转服务器转发接口
2017/10/18 Javascript
vue的全局变量和全局拦截请求器的示例代码
2018/09/13 Javascript
jQuery利用FormData上传文件实现批量上传
2018/12/04 jQuery
vue+elementUI实现图片上传功能
2019/08/20 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
JavaScript创建、读取和删除cookie
2019/09/03 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
2019/09/05 Javascript
javascript实现滚轮轮播图片
2020/12/13 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
用python分割TXT文件成4K的TXT文件
2009/05/23 Python
python函数式编程学习之yield表达式形式详解
2018/03/25 Python
深入浅析Python传值与传址
2018/07/10 Python
python中的字符串内部换行方法
2018/07/19 Python
对python插入数据库和生成插入sql的示例讲解
2018/11/14 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
python的flask框架难学吗
2020/07/31 Python
Python 如何查找特定类型文件
2020/08/17 Python
python合并多个excel文件的示例
2020/09/23 Python
基于PyTorch中view的用法说明
2021/03/03 Python
CSS3 :not()选择器实现最后一行li去除某种css样式
2016/10/19 HTML / CSS
深入解析HTML5中的Blob对象的使用
2015/09/08 HTML / CSS
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
招聘与培训专员岗位职责
2014/01/30 职场文书
2015年光棍节活动总结
2015/03/24 职场文书
css3新特性的应用示例分析
2022/03/16 HTML / CSS