le plug-in de téléchargement asynchrone d'aja-js tutoriel-php.cn

le plug-in de téléchargement asynchrone d'aja

php中世界最好的语言

Libérer： 2018-03-15 17:38:17

original

1533 Les gens l'ont consulté

Cette fois, je vous présente le plug-in de téléchargement asynchrone d'aja. Quelles sont les précautions lors de l'utilisation du plug-in de téléchargement asynchrone d'aja. Voici des cas pratiques, jetons un coup d'œil.

L'exemple de cet article explique comment utiliser le plug-in de téléchargement asynchrone ajaxfileupload pour votre référence. Le contenu spécifique est le suivant

Le serveur utilise struts2 pour gérer le téléchargement de fichiers<.>.

Environnement requis :

jquery.js
ajaxfileupload.js
Le package jar dont dépend struts2
et struts2-json-plugin-2.1.8.1.jar

Écrivez l'action pour le téléchargement de fichiers

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

Copier après la connexion

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>

Copier après la connexion

Faites attention à observer la configuration du résultat dans struts.xml en conjonction avec l'action.

Le paramètre contentType doit être présent, sinon le navigateur vous demandera toujours d'enregistrer le résultat JSON renvoyé sous forme de fichier et ne le remettra pas à ajaxfileupload pour traitement. En effet, le type de contenu par défaut du plug-in JSON struts2 est application/json, tandis que ajaxfileupload nécessite text/html.

Page JSP pour le téléchargement de fichiers

<%@ 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>

Copier après la connexion

Faites attention au code dans , il n'y a pas de formulaire. La méthode ajaxFileUpload() n'est déclenchée que lorsque le bouton est cliqué. Ce qu'il faut noter, c'est l'ordre dans lequel les fichiers js sont introduits ajaxfileupload.js dépend de jquery, donc vous le savez.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser jQuery pour vérifier la cohérence des mots de passe des formulaires

Comment obtenir un non-rafraîchissement liaison des listes déroulantes avec Ajax

jQuery implémente la navigation par menu déroulant

jQuery obtient l'attribut DIV et lie CheckBox

La différence entre terminé et ensuite

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!