jquery ajaxfileuplad非同期アップロードプラグイン

6452 ワード

jquery ajaxfileupload 非同期アップロード

本記事の例では、ajaxfileuploadの非同期アップロードプラグインの使い方を共有しています。参考にしてください。具体的な内容は以下の通りです。
サーバー側はstruts 2を採用してファイルアップロードを処理します。
必要な環境:
jquery.js
ajaxfileuplload.js
struts 2に依存するjarバッグ
およびstruts 2-json-plugin-2.8.1.jar
ファイルアップロードのアクションを作成します。


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>

アクションに合わせて、struts.xmlのレスポンスの配置を観察してください。
contentTypeパラメータは必ずあります。そうでないと、ブラウザはいつも返したJSON結果をファイルに保存するようにヒントを与えます。ajaxfileuploadに処理しません。これはstruts 2 JSON PluginのデフォルトのcontentTypeがaplication/jsonであり、ajaxfileuplloadはtext/htmlが要求されるからです。
ファイルアップロードのjspページ


<%@ 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:'fileUploadAction.action',//               
        secureuri:false,//     false
        fileElementId:'file',//       id   <input type="file" id="file" name="file" />
        dataType: 'json',//           json
        success: function (data, status) //           
        {
          alert(data.message);//       json   message    ,  message  struts2 action        
          
          if(typeof(data.error) != 'undefined')
          {
            if(data.error != '')
            {
              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>

注意のコードを見てください。フォームはありません。ボタンをクリックする時だけajaxFileUploadを触発します。注意したいのはjsファイルの導入の先着順です。ajaxfileuplad.jsはjqueryに依存していますので、知っています。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。

JavaはThreadとRunnableのスレッドを使って方法を比較します。

Java IOストリームとファイル操作により、プロセス解析を実現します。