Home >Web Front-end >JS Tutorial >Detailed explanation of jquery ajaxfileupload asynchronous upload plug-in

Detailed explanation of jquery ajaxfileupload asynchronous upload plug-in

小云云Original: 2018-01-16 10:16:451337browse

This article mainly introduces the jquery ajaxfileupload asynchronous upload plug-in in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

The server uses struts2 to handle file uploads.

Required environment:
jquery.js
ajaxfileupload.js
jar package that struts2 depends on
and struts2-json-plugin-2.1.8.1.jar

Write the Action for file upload

package com.ajaxfile.action;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;

@SuppressWarnings("serial")
public class FileAction extends ActionSupport {

  private File file;
  private String fileFileName;
  private String fileFileContentType;

  private String message = "你已成功上传文件";
  
  public String getMessage() {
    return message;
  }

  public void setMessage(String message) {
    this.message = message;
  }

  public File getFile() {
    return file;
  }

  public void setFile(File file) {
    this.file = file;
  }

  public String getFileFileName() {
    return fileFileName;
  }

  public void setFileFileName(String fileFileName) {
    this.fileFileName = fileFileName;
  }

  public String getFileFileContentType() {
    return fileFileContentType;
  }

  public void setFileFileContentType(String fileFileContentType) {
    this.fileFileContentType = fileFileContentType;
  }

  @SuppressWarnings("deprecation")
  @Override
  public String execute() throws Exception {
    
    String path = ServletActionContext.getRequest().getRealPath("/upload");

    try {
      File f = this.getFile();
      if(this.getFileFileName().endsWith(".exe")){
        message="对不起,你上传的文件格式不允许!!!";
        return ERROR;
      }
      FileInputStream inputStream = new FileInputStream(f);
      FileOutputStream outputStream = new FileOutputStream(path + "/"+ this.getFileFileName());
      byte[] buf = new byte[1024];
      int length = 0;
      while ((length = inputStream.read(buf)) != -1) {
        outputStream.write(buf, 0, length);
      }
      inputStream.close();
      outputStream.flush();
    } catch (Exception e) {
      e.printStackTrace();
      message = "对不起,文件上传失败了!!!!";
    }
    return SUCCESS;
  }

}

struts.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
  <package name="struts2" extends="json-default">
    <action name="fileUploadAction" class="com.ajaxfile.action.FileAction">
      <result type="json" name="success">
        <param name="contentType">
          text/html
        </param>
      </result>
      <result type="json" name="error">
        <param name="contentType">
          text/html
        </param>
      </result>
    </action>
  </package>
</struts>

Pay attention to the configuration of result in struts.xml combined with Action.

The contentType parameter must be present, otherwise the browser will always prompt to save the returned JSON result as a file and will not hand it over to ajaxfileupload for processing. This is because the default contentType of struts2 JSON Plugin is application/json, while ajaxfileupload requires text/html.

JSP page for file upload

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/ajaxfileupload.js"></script>
    <script type="text/javascript">
  function ajaxFileUpload()
  {
    
    $("#loading")
    .ajaxStart(function(){
      $(this).show();
    })//开始上传文件时显示一个图片
    .ajaxComplete(function(){
      $(this).hide();
    });//文件上传完成将图片隐藏起来
    
    $.ajaxFileUpload
    (
      {
        url:&#39;fileUploadAction.action&#39;,//用于文件上传的服务器端请求地址
        secureuri:false,//一般设置为false
        fileElementId:&#39;file&#39;,//文件上传空间的id属性 <input type="file" id="file" name="file" />
        dataType: &#39;json&#39;,//返回值类型 一般设置为json
        success: function (data, status) //服务器成功响应处理函数
        {
          alert(data.message);//从服务器返回的json中取出message中的数据,其中message为在struts2中action中定义的成员变量
          
          if(typeof(data.error) != &#39;undefined&#39;)
          {
            if(data.error != &#39;&#39;)
            {
              alert(data.error);
            }else
            {
              alert(data.message);
            }
          }
        },
        error: function (data, status, e)//服务器响应失败处理函数
        {
          alert(e);
        }
      }
    )
    
    return false;

  }
  </script>
  </head>
  <body>
    <img src="loading.gif" id="loading" style="display: none;">
    <input type="file" id="file" name="file" />
    <br />
    <input type="button" value="上传" onclick="return ajaxFileUpload();">
  </body>
</html>

Pay attention to the code in 6c04bd5ca3fcae76e30b72ad730ca86d, there is no form. The ajaxFileUpload() method is only triggered when the button is clicked. What needs to be noted is the order in which js files are introduced. ajaxfileupload.js depends on jquery, so you know.

Related recommendations:

Detailed explanation of the asynchronous file upload function using javascript

Sharing the usage of the plug-in to upload files asynchronously using jQuery

Native js method to implement asynchronous file upload

The above is the detailed content of Detailed explanation of jquery ajaxfileupload asynchronous upload plug-in. For more information, please follow other related articles on the PHP Chinese website!

Statement：

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

Previous article：jquery-file-upload file upload with progress bar effect example sharingNext article：jquery-file-upload file upload with progress bar effect example sharing

See more

Detailed explanation of jquery ajaxfileupload asynchronous upload plug-in

Related articles