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>
        <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 网上可以下载 http://malsup.com/jquery/form/#download

使用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"

来完成这种映射

时间: 2024-12-10 23:08:48

struts1 & jquery form 文件异步上传的相关文章

Jquery FormData文件异步上传 快速指南

网站中文件的异步上传是个比较麻烦的问题,不过现在通过jquery 可以很容易的解决这个问题: 使用jquery2.1版本,较老版本不支持异步文件上传功能: 表单代码: [html] view plain copy print? <form id="fileUploadForm"> <input type="file" name="file" class="imageUpload"/> <span 

ASP.NET MVC 使用jquery.form.js 异步上传 在IE下返回值被变为下载的解决办法

错误记录: <script type="text/javascript"> $(function () { $(document).off("ajaxSend"); //异步上传 $("#Submit").click(function () { if ($("#selectFileButton").val() == "") { return false; } $("#fileForm&

【转】JQuery插件ajaxFileUpload 异步上传文件(PHP版)

前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现ajaxFileUpload这个插件挺不错,所以就用这个插件来做异步上传文件的效果.网上也有很多对ajaxFileUpload插件的使用的文章,不过我发现没有PHP版,所以这次服务器那边的处理就使用PHP语言来处理. 一.先对ajaxFileUpload插件的语法参数进行讲解 原理:ajaxfileu

JQuery插件ajaxFileUpload 异步上传文件(PHP版)

太久没写博客了,真的是太忙了.善于总结,进步才会更快啊.不多说,直接进入主题. 前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现ajaxFileUpload这个插件挺不错,所以就用这个插件来做异步上传文件的效果.网上也有很多对ajaxFileUpload插件的使用的文章,不过我发现没有PHP版,所以这次服务器那边的处理就使用PHP语言来处理. 一.

jquery之ajaxfileupload异步上传插件

来自:http://www.blogjava.net/sxyx2008/archive/2010/11/02/336826.html 由于项目需求,在处理文件上传时需要使用到文件的异步上传.这里使用Jquery Ajax File Uploader这个组件下载地址:http://www.phpletter.com/download_project_version.php?version_id=6服务器端采用struts2来处理文件上传.所需环境:jquery.jsajaxfileupload.j

文件的上传(表单上传和ajax文件异步上传)

一.表单上传: html客户端部分: <form action="upload.ashx" method="post" enctype="multipart/form-data"> 选择文件:<input type="file" name="file1" /><br /> <input type="submit" value="上传&q

百度 flash html5自切换 多文件异步上传控件webuploader基本用法

双核浏览器下在chrome内核中使用uploadify总有302问题,也不知道如何修复,之所以喜欢360浏览器是因为帮客户控制渲染内核: 若页面需默认用极速核,增加标签:<meta name="renderer" content="webkit"> 若页面需默认用ie兼容内核,增加标签:<meta name="renderer" content="ie-comp"> 若页面需默认用ie标准内核,增加标签

SpringMVC + AJAX 实现多文件异步上传

转自:https://www.jianshu.com/p/f3987f0f471f 今天,我就这个问题来写一篇如何用 SpringMVC + AJAX 实现的多文件异步上传功能.基本的代码还是沿用上篇文章中所用到的项目,需要的朋友可以点击前面的链接查看.在这里只贴出关键代码. 首先我们要准备一个 JS 文件,即:ajaxfileupload.js,它需要用到 jQuery,所以我们还需要准备 jQuery 的库,两个文件在文末尾都有链接提供下载. JSP 关键代码: <li> <div&

使用AjaxFileUpload.js实现文件异步上传

ajax是无法提交文件的,所以在上传图片并预览的时候,我们经常使用Ifame的方法实现看似异步的效果.但是这样总不是很方便的,AjaxFilleUpload.js对上面的方法进行了一个包装,使得我们不用去管理Iframe的一系列操作,也不用影响我们的页面结构,实现异步的文件提交. html: <input type="file" name="upload" hidden="hidden" id="file_upload"