浅谈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实现Select下拉列表进行状态选择功能
Mar 30 jQuery
jquery仿微信聊天界面
May 06 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
jQuery中each方法的使用详解
Mar 18 jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
jquery实现简单自动轮播图效果
Jul 29 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执行zip与rar解压缩方法实现代码
2010/12/05 PHP
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
实现PHP搜索加分页
2016/10/12 PHP
laravel5.6实现数值转换
2019/10/23 PHP
JQUERY 设置SELECT选中项代码
2014/02/07 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
JS模拟按钮点击功能的方法
2015/12/22 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
vue分页组件table-pagebar使用实例解析
2020/11/15 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
利用fecha进行JS日期处理
2016/11/21 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
Vue CLI3搭建的项目中路径相关问题的解决
2018/09/17 Javascript
详解关于element el-button使用$attrs的一个注意要点
2018/11/09 Javascript
JavaScript继承的特性与实践应用深入详解
2018/12/30 Javascript
微信小程序中使用echarts的实现方法
2019/04/24 Javascript
vue权限问题的完美解决方案
2019/05/08 Javascript
vue项目中全局引入1个.scss文件的问题解决
2019/08/01 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
typescript编写微信小程序创建项目的方法
2021/01/29 Javascript
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
django文档学习之applications使用详解
2018/01/29 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
用Python获取摄像头并实时控制人脸的实现示例
2019/07/11 Python
html5画布旋转效果示例
2014/01/27 HTML / CSS
Quiksilver美国官网:始于1969年的优质冲浪服和滑雪板外套
2020/04/20 全球购物
设计毕业生简历中的自我评价
2013/10/01 职场文书
大学毕业登记表自我鉴定
2013/10/09 职场文书
应征英语教师求职信
2013/11/27 职场文书
会计助理岗位职责
2014/02/17 职场文书
群众路线教育党员自我剖析材料
2014/10/06 职场文书
见习报告格式要求
2014/11/04 职场文书
2015入党自荐书范文
2015/03/05 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python