浅谈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实现前端分页功能
Mar 23 jQuery
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
jQuery回调方法使用示例
Jun 26 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
jquery实现聊天机器人
Feb 08 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
JavaScript枚举选择jquery插件代码实例
Nov 17 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
轻松修复Discuz!数据库
2008/05/03 PHP
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
使用Jquery来实现可以输入值的下拉选单 雏型
2011/12/06 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
2012/09/14 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
2014/01/14 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
2018/09/19 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
浅谈JS中this在各个场景下的指向
2019/08/14 Javascript
jquery实现简单自动轮播图效果
2020/07/29 jQuery
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友?
2018/04/06 DOTA
Python使用chardet判断字符编码
2015/05/09 Python
利用python将图片转换成excel文档格式
2017/12/30 Python
python逆向入门教程
2018/01/15 Python
VSCode Python开发环境配置的详细步骤
2019/02/22 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
运用PyTorch动手搭建一个共享单车预测器
2019/08/06 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
利用CSS3的定位页面元素
2009/08/29 HTML / CSS
20佳惊艳的HTML5应用程序示例分享
2011/05/03 HTML / CSS
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
护理专科毕业推荐信
2013/11/10 职场文书
股份转让协议书
2014/04/12 职场文书
学习保证书范文
2014/04/30 职场文书
公司应聘自荐书
2014/06/14 职场文书
党的群众路线教育实践活动先进个人材料
2014/12/24 职场文书
2016入党积极分子党校培训心得体会
2016/01/06 职场文书