suchen

Heim >Web-Frontend >js-Tutorial >ajas asynchrones Upload-Plug-in

ajas asynchrones Upload-Plug-in

php中世界最好的语言
php中世界最好的语言Original
2018-03-15 17:38:171580Durchsuche

Dieses Mal bringe ich Ihnen das asynchrone Upload-Plug-in. Was sind die Vorsichtsmaßnahmen, wenn Sie das asynchrone Upload-Plug-in verwenden? Hier sind praktische Fälle, schauen wir uns das an.

Das Beispiel in diesem Artikel zeigt, wie Sie das asynchrone Upload-Plug-in ajaxfileupload als Referenz verwenden. Der spezifische Inhalt ist wie folgt

Der Server verwendet struts2, um den Datei-Upload.

Erforderliche Umgebung:

jquery.js
ajaxfileupload.js
Das JAR-Paket, von dem struts2 abhängt
und struts2-json-plugin-2.1.8.1.jar

Schreiben Sie die Aktion für den Datei-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>
Achten Sie darauf, die Konfiguration des Ergebnisses in struts.xml in Verbindung mit der Aktion zu beachten.

Der Parameter contentType muss vorhanden sein, andernfalls fordert der Browser immer dazu auf, das zurückgegebene JSON-Ergebnis als Datei zu speichern und übergibt es nicht zur Verarbeitung an ajaxfileupload. Dies liegt daran, dass der Standardinhaltstyp des Struts2-JSON-Plugins application/json ist, während für ajaxfileupload text/html erforderlich ist.

JSP-Seite zum Hochladen von Dateien

<%@ 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>
Achten Sie auf den Code in , es gibt kein Formular. Die Methode ajaxFileUpload() wird nur ausgelöst, wenn auf die Schaltfläche geklickt wird. Zu beachten ist, dass die Reihenfolge, in der js-Dateien eingeführt werden, von jquery abhängt.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

So verwenden Sie jQuery, um die Konsistenz von Formularkennwörtern zu überprüfen

So erreichen Sie eine Nichtaktualisierung Verknüpfung von Dropdown-Boxen mit Ajax

jQuery implementiert Dropdown-Menünavigation

jQuery erhält das DIV-Attribut und bindet CheckBox

Der Unterschied zwischen erledigt und dann

Das obige ist der detaillierte Inhalt vonajas asynchrones Upload-Plug-in. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So implementieren Sie das Hochladen von Dateien mit einer FortschrittsbalkenanimationNächster Artikel：So implementieren Sie das Hochladen von Dateien mit einer Fortschrittsbalkenanimation

In Verbindung stehende Artikel

Mehr sehen