广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >struts1和jquery form如何实现文件异步上传
  • 201
分享到

struts1和jquery form如何实现文件异步上传

2024-04-02 19:04:59 201人浏览 安东尼
摘要

这篇文章主要介绍struts1和Jquery fORM如何实现文件异步上传,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1.概述还在用struts1?是的,在地球的没写地方,落后的生

这篇文章主要介绍struts1和Jquery fORM如何实现文件异步上传,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

1.概述

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

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

2. 代码

2.1 html页面

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

  </center>

  <h2>文件信息列表</h2>
  <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


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如何实现文件异步上传”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网JavaScript频道!

--结束END--

本文标题: struts1和jquery form如何实现文件异步上传

本文链接: https://www.lsjlt.com/news/75293.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • struts1和jquery form如何实现文件异步上传
    这篇文章主要介绍struts1和jquery form如何实现文件异步上传,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1.概述还在用struts1?是的,在地球的没写地方,落后的生...
    99+
    2022-10-19
  • Jquery实现异步上传文件
    本文实例为大家分享了Jquery实现异步上传文件的具体代码,供大家参考,具体内容如下 一、参数说明 1、contentType:(默认: "application/x-ww...
    99+
    2022-11-13
  • jQuery中jQuery-form.js如何实现异步上传文件
    这篇文章将为大家详细讲解有关jQuery中jQuery-form.js如何实现异步上传文件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、举个栗子1.先下载 JQuer...
    99+
    2022-10-19
  • Jquery如何实现跨域异步上传文件
    这篇文章主要为大家展示了“Jquery如何实现跨域异步上传文件”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Jquery如何实现跨域异步上传文件”这篇文章吧。先...
    99+
    2022-10-19
  • jquery中Form怎么实现文件上传
    这篇文章给大家分享的是有关jquery中Form怎么实现文件上传的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。①先是html<a href="javas...
    99+
    2022-10-19
  • html5如何实现文件异步上传
    这篇文章主要为大家展示了“html5如何实现文件异步上传”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“html5如何实现文件异步上传”这篇文章吧。1 简介开发文...
    99+
    2022-10-19
  • Ajax如何实现异步上传文件
    这篇文章将为大家详细讲解有关Ajax如何实现异步上传文件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体代码如下所示:<!DOCTYPE html>...
    99+
    2022-10-19
  • JS中如何实现异步文件上传
    这篇文章将为大家详细讲解有关JS中如何实现异步文件上传,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。在非html5的情况下是无法用ajax把文件推送到后端的,只能通过fo...
    99+
    2022-10-19
  • html中如何实现异步上传文件
    这篇文章将为大家详细讲解有关html中如何实现异步上传文件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。   代码如下:   <formaction="...
    99+
    2022-10-19
  • Ajax和form+iframe怎么实现文件上传
    这篇文章将为大家详细讲解有关Ajax和form+iframe怎么实现文件上传,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。HTML5Ajax上传html5的上传实现,是需要file控件以及XMLHttpR...
    99+
    2023-06-08
  • Html5如何实现文件异步上传功能
    这篇文章主要介绍Html5如何实现文件异步上传功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1 简介开发文件上传功能从来不是一件愉快的事,异步上传更是如此,使用过iframe和F...
    99+
    2022-10-19
  • JavaScript如何实现异步上传图片文件
    这篇文章将为大家详细讲解有关JavaScript如何实现异步上传图片文件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。html:<form action=...
    99+
    2022-10-19
  • Ajax如何实现表单异步上传文件
    这篇文章主要介绍Ajax如何实现表单异步上传文件,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1.起因做前台页面时,需要调用WebAPI的Post请求,发送一些字段和文件(相当于把表...
    99+
    2022-10-19
  • 如何使用Html5实现异步上传文件
    本篇内容主要讲解“如何使用Html5实现异步上传文件”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何使用Html5实现异步上传文件”吧! 服务器准备IIS ...
    99+
    2022-10-19
  • ajax异步如何实现文件分片上传
    这篇文章主要介绍ajax异步如何实现文件分片上传,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!实例代码:<!DOCTYPE html><html lang="en&qu...
    99+
    2023-06-08
  • 怎么使用Jquery插件实现跨域异步上传文件功能
    这篇文章主要介绍“怎么使用Jquery插件实现跨域异步上传文件功能”,在日常操作中,相信很多人在怎么使用Jquery插件实现跨域异步上传文件功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么使用Jquer...
    99+
    2023-07-04
  • AjaxFileUpload.js实现异步上传文件功能
    AjaxFileUpload.js是一个用于实现异步上传文件的JavaScript库。它基于XMLHttpRequest对象实现文件的异步上传,可以在不刷新页面的情况下将文件上传到服务器。使用AjaxFileUpload.js需要引入相...
    99+
    2023-08-09
    js
  • asp.net中表单上传功能如何实现ajax文件异步上传
    这篇文章主要为大家展示了“asp.net中表单上传功能如何实现ajax文件异步上传”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“asp.net中表单上传功能如何...
    99+
    2022-10-19
  • 如何利用HTML5实现图片文件异步上传
    小编给大家分享一下如何利用HTML5实现图片文件异步上传,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! 1.文件未选择 2.文...
    99+
    2022-10-19
  • Ajax如何实现提交Form表单及文件上传
    这篇文章主要为大家展示了“Ajax如何实现提交Form表单及文件上传”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Ajax如何实现提交Form表单及文件上传”这...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作