Struts1 & jquery form file asynchronous upload example sharing-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Struts1 & jquery form file asynchronous upload example sharing

Jan 10, 2018 pm 01:38 PM

form jquery

This article mainly brings you a brief discussion on struts1 & jquery form file asynchronous upload. The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Let’s follow the editor to take a look, I hope it can help everyone.

1. Overview

Still using struts1? Yes, in unwritten places on the earth, backward production methods are still running (old projects).

Inherited from org.apache.struts.action.Action, inherited from org.apache.struts.action.ActionForm Let’s get started

2. Code

2.1 html page

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;网页上传&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;center&gt;
    &lt;h1&gt;本地文件网页上传&lt;/h1&gt;
    &lt;hr&gt;

  &lt;/center&gt;

  &lt;h1&gt;文件信息列表&lt;/h1&gt;
  &lt;hr&gt;
  &lt;form id=&quot;myform&quot; method=&quot;post&quot; enctype=&quot;multipart/form-data&quot;&gt;
    &lt;table width=&quot;0&quot; border=&quot;0&quot; cellspacing=&quot;10&quot; cellpadding=&quot;0&quot;&gt;
    
      &lt;tr&gt;
        &lt;td&gt;选择文件：&lt;/td&gt;
        &lt;td&gt;&lt;input type=&quot;file&quot; name=&quot;uploadFile&quot; /&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;标题：&lt;/td&gt;
        &lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;filetitle&quot; /&gt;&lt;/td&gt;
      &lt;/tr&gt;

      &lt;tr&gt;
        &lt;td colspan=&quot;2&quot;&gt;
          &lt;input type=&quot;button&quot; id=&quot;mysubmit&quot; value=&quot;确认上传&quot;/&gt;
        &lt;/td&gt;
      &lt;/tr&gt;

    &lt;/table&gt;
  &lt;/form&gt;
  &lt;script src=&quot;script/jquery.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;script/jquery.form.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;script/_fileUpload.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

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);
      }
      
    });
  });
}

Copy after login

2.3 MyUploadAction.java (inherited from 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;
    
  }
}

Copy after login

2.4 MyUploadForm.java(Inherited from 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;
  }

}

Copy after login

2.5 struts-config.xml

&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
&lt;!DOCTYPE struts-config PUBLIC &quot;-//Apache Software Foundation//DTD Struts Configuration 1.2//EN&quot; &quot;struts-config_1_2.dtd&quot;&gt;

&lt;struts-config&gt;
  &lt;data-sources /&gt;
  &lt;form-beans&gt;
    &lt;form-bean name=&quot;myUploadForm&quot; type=&quot;com.rocky.console.form.MyUploadForm&quot; /&gt;
  &lt;/form-beans&gt;
  &lt;global-exceptions /&gt;
  &lt;global-forwards /&gt;
  &lt;action-mappings&gt;
    &lt;!-- rocky myupload --&gt;
    &lt;action path=&quot;/myUpload&quot; attribute=&quot;myUploadForm&quot; name=&quot;myUploadForm&quot; type=&quot;com.rocky.console.action.MyUploadAction&quot; /&gt;
  &lt;/action-mappings&gt;
  &lt;message-resources parameter=&quot;ApplicationResources&quot; /&gt;
&lt;/struts-config&gt;

Copy after login

2.6 Description

2.6.1 jquery.form.js can be downloaded online

Use var formData = new FormData(), then formData.append("myfile", document.getElementById("myfile").files[0]);form.append ...

When there are many fields in the form, it is troublesome to write many appends. Obviously ajaxSubmit is much more convenient.

2.6.2 The data from the front end is directly encapsulated into its subclass (MyActionForm) object through ActionForm. , use FormFile to receive file files, and use String to receive other types of data

Of course they are injected according to the one-to-one correspondence of the name attribute of the HTML tag

2.6.3 How is ActionForm customized? The implemented bean(MyUploadForm) is right?

In struts-config.xml, form-bean sets its own bean through <action path="/myUpload" attribute="myUploadForm" name="myUploadForm"

This kind of mapping

Related recommendations:

Ajax asynchronous file upload example code sharing

Javascript implementation of asynchronous file upload function detailed explanation

Using jQuery to asynchronously upload plug-in usage sharing

The above is the detailed content of Struts1 & jquery form file asynchronous upload example sharing. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn