ホームページ > 記事 > ウェブフロントエンド > jqueryの実装ajaxfileupload非同期アップロードプラグインのチュートリアル

jqueryの実装ajaxfileupload非同期アップロードプラグインのチュートリアル

小云云オリジナル: 2017-12-12 11:55:241321ブラウズ

この記事では主に jquery ajaxfileupload 非同期アップロードプラグインを詳しく紹介します。興味のある方は参考にしていただければ幸いです。

サーバーは struts2 を使用してファイルのアップロードを処理します。

必要な環境: struts2が依存する
jquery.js
ajaxfileupload.js
jarパッケージ
とstruts2-json-plugin-2.1.8.1.jar

ファイルアップロード用のアクションを記述する

rrりえ

struts.xml

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

}

Actionと組み合わせたstruts.xmlの結果の構成に注意してください。

contentType パラメータが存在する必要があります。そうでない場合、ブラウザは返された JSON 結果をファイルとして保存するように常にプロンプトを表示し、処理のためにそれを ajaxfileupload に渡しません。これは、struts2 JSON プラグインのデフォルトの contentType が application/json であるのに対し、ajaxfileupload には text/html が必要であるためです。

ファイルアップロード用のJSPページ

<?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>

6c04bd5ca3fcae76e30b72ad730ca86dのコードに注目してください。フォームはありません。 ajaxFileUpload() メソッドは、ボタンがクリックされた場合にのみトリガーされます。注意する必要があるのは、js ファイルが導入される順序です。ajaxfileupload.js は jquery に依存します。

jqueryの実装ajaxfileupload非同期アップロードプラグインのチュートリアル

関連記事