Heim Web-Frontend js-Tutorial So implementieren Sie Batch-Upload und -Download von Dateien mit Ajax

So implementieren Sie Batch-Upload und -Download von Dateien mit Ajax

Mar 30, 2018 pm 04:59 PM
ajax 批量 文件

Dieses Mal zeige ich Ihnen, wie Sie das Hochladen und Herunterladen von Dateien mit Ajax im Stapelbetrieb implementieren Schauen Sie mal rein. Ich habe heute Dateien hochgeladen und heruntergeladen. Um es kurz zusammenzufassen: Die grundlegende Einrichtung des Webprojekts und der Aufbau des SpringMVC-Frameworks werden hier nicht im Detail beschrieben.

Formular hochladen:

<form id="uploadfiles" enctype="multipart/form-data">
    <input type="file" multiple="multiple" id="file_upload" name="file_upload" /> 
    <input type="button" value="上传" onclick="upload()" />
</form>
Nach dem Login kopieren
Ajax hochladen:

<script type="text/javascript">
/*
 * 上传文件
 */
function upload(){
  var formData = new FormData($( "#uploadfiles" )[0]);
   $.ajax({
      type: "post",
      url: "./path/upload",
      dataType: "json",
      data: formData,
      /**  
       *必须false才会自动加上正确的Content-Type  
       */ 
      contentType : false, 
      /**  
       * 必须false才会避开jQuery对 formdata 的默认处理  
       * XMLHttpRequest会对 formdata 进行正确的处理  
       */ 
      processData : false,
      success: function(data){//从后端返回数据进行处理
       if(data){
         alert("上传成功!");
       }else{
         alert("上传失败!");
       }
      },
      error: function(err) {//提交出错
        $("#msg").html(JSON.stringify(err));//打出响应信息
        alert("服务器无响应");
       }
     });
}
</script>
Nach dem Login kopieren
spring.xml-Konfigurationserweiterung Oben:

Der heruntergeladene JSP-Seitencode wird von Ihnen entsprechend den unterschiedlichen Anforderungen entworfen. Hier ist der Controller-Code:
<!-- 配置文件上传 -->
  <bean id="multipartResolver"
    class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <!-- 默认编码 -->
    <property name="defaultEncoding" value="utf-8" />
    <!-- 文件大小最大值 -->
    <property name="maxUploadSize" value="10485760000" />
    <!-- 内存中的最大值 -->
    <property name="maxInMemorySize" value="40960" />
  </bean>
controller:
/*
   * 上传多个文件
   */
  @RequestMapping(value = "/upload", produces = "application/json;charset=UTF-8")
  public @ResponseBody
  boolean uploadFiles(@RequestParam("file_upload") MultipartFile [] files) {
    boolean result = false;
    String realPath;
    for(int i=0;i<files.length;i++){
      if (!files[i].isEmpty()) { 
          String uniqueName=files[i].getOriginalFilename();//得到文件名
          realPath="E:"+File.separator+uniqueName;//文件上传的路径这里为E盘
          files[i].transferTo(new File(realPath));  // 转存文件
          result = true;      
        } catch (Exception e) { 
          e.printStackTrace(); 
        } 
      }
    }
    return result;
  }
Nach dem Login kopieren

Fügen Sie mehrere Dateien in ein komprimiertes Paket ein zum Herunterladen und löschen Sie dann die generierte temporäre komprimierte Datei.
/*
   * 下载多个文件
   */
  @RequestMapping(value = "/download")
  public void downloadFiles(HttpServletResponse response) {
    String str= request.getParameter("rows");//下载文件信息,包括文件名、存储路径等
    JSONArray path=(JSONArray) JSONArray.parse(request.getParameter("rows"));
    Path paths[]=new Path[path.size()];
    paths = JSONArray.parseArray(str, Path.class).toArray(paths);
    String uri = "d:"+ File.separator + "mldn.zip";//临时文件存储路径
    File zipFile = new File(uri) ;  // 定义压缩文件名称 
    ZipOutputStream zipOut = null;// 声明压缩流对象 
    InputStream input = null;
    //将要压缩的文件加入到压缩输出流中
    try {
      zipOut = new ZipOutputStream(new FileOutputStream(zipFile));
    } catch (FileNotFoundException e) {
      e.printStackTrace();
    }
    for(int i = 0;i<paths.length;i++){
      File file = new File(paths[i].getUri()+File.separator+paths[i].getFilename());
      try {
        input = new FileInputStream(file) ;// 定义文件的输入流 
        zipOut.putNextEntry(new ZipEntry(file.getName())) ; // 设置ZipEntry对象 
      } catch (Exception e) {
        e.printStackTrace();
      } 
    }
    //将文件写入到压缩文件中
    int temp = 0 ; 
    try {
      while((temp=input.read())!=-1){ // 读取内容 
        zipOut.write(temp) ;  // 写到压缩文件中 
      }
    } catch (IOException e) {
      e.printStackTrace();
    }finally{ 
      try {
        input.close() ;
        zipOut.close() ; 
      } catch (IOException e) {
        e.printStackTrace();
      } 
    }
    try {
      // 以流的形式下载文件。
      BufferedInputStream fis = new BufferedInputStream(new FileInputStream(zipFile));
      byte[] buffer = new byte[fis.available()];
      fis.read(buffer);
      fis.close();
      // 清空response
      response.reset();
      OutputStream toClient = new BufferedOutputStream(response.getOutputStream());
      response.setContentType("application/x-msdownload;"); 
      response.setHeader("Content-Disposition", "attachment;filename=" + zipFile.getName());
      toClient.write(buffer);
      toClient.flush();
      toClient.close();
      zipFile.delete();    //将生成的服务器端文件删除
    } 
    catch (IOException ex) {
      ex.printStackTrace();
    }  
  }
Nach dem Login kopieren

Wenn Sie Ajax zum Senden einer Anfrage auf der Download-Seite verwenden, beachten Sie bitte: Die Rückgabetypen der Ajax-Funktion sind nur XML, Text, JSON, HTML und andere Typen, und es gibt keinen „Stream“-Typ Daher müssen wir den Ajax-Download implementieren und können die entsprechende Funktion nicht verwenden. Die Ajax-Funktion führt einen

Dateidownload

durch. Sie können jedoch js verwenden, um ein Formular zu generieren, dieses Formular zum Senden von Parametern verwenden und Daten vom Typ „Stream“ zurückgeben. Beispiel:

function download(){
    var form=$("<form>");//定义一个form表单
    form.attr("style","display:none");
    form.attr("target","");
    form.attr("method","post");
    form.attr("action","./path/download");//请求url
    var input1=$("<input>");
    input1.attr("type","hidden");
    input1.attr("name","rows");//设置属性的名字
    input1.attr("value",“test”);//设置属性的值
    $("body").append(form);//将表单放置在web中
    form.append(input1);
    form.submit();//表单提交       
              }
Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben, bitte Achten Sie auf andere verwandte Themen im chinesischen PHP-Website-Artikel!

Empfohlene Lektüre:

Ajax+Servlet zur Implementierung einer aktualisierungsfreien Dropdown-Verknüpfung (mit Code)


Wie Um Ajax asynchron zu verwenden, prüfen Sie, ob der Benutzername doppelt vorhanden ist

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Batch-Upload und -Download von Dateien mit Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Können Dateien im Tmp-Format gelöscht werden? Können Dateien im Tmp-Format gelöscht werden? Feb 24, 2024 pm 04:33 PM

TMP-Formatdateien sind ein temporäres Dateiformat, das normalerweise von einem Computersystem oder Programm während der Ausführung generiert wird. Der Zweck dieser Dateien besteht darin, temporäre Daten zu speichern, um die ordnungsgemäße Ausführung des Programms zu unterstützen oder die Leistung zu verbessern. Sobald die Programmausführung abgeschlossen ist oder der Computer neu gestartet wird, werden diese tmp-Dateien häufig nicht mehr benötigt. Daher sind Dateien im Tmp-Format grundsätzlich löschbar. Darüber hinaus kann das Löschen dieser tmp-Dateien Festplattenspeicher freigeben und den normalen Betrieb des Computers gewährleisten. Bevor wir jedoch Dateien im Tmp-Format löschen, müssen wir dies tun

Was tun, wenn der Fehlercode 0x80004005 angezeigt wird? Der Editor zeigt Ihnen, wie Sie den Fehlercode 0x80004005 beheben können. Was tun, wenn der Fehlercode 0x80004005 angezeigt wird? Der Editor zeigt Ihnen, wie Sie den Fehlercode 0x80004005 beheben können. Mar 21, 2024 pm 09:17 PM

Wenn Sie einen Ordner auf Ihrem Computer löschen oder dekomprimieren, wird manchmal das Dialogfeld „Fehler 0x80004005: Nicht spezifizierter Fehler“ angezeigt. Wie können Sie diese Situation lösen? Es gibt tatsächlich viele Gründe, warum der Fehlercode 0x80004005 angezeigt wird, aber die meisten davon werden durch Viren verursacht. Wir können die DLL erneut registrieren, um das Problem zu lösen. Nachfolgend erklärt Ihnen der Editor die Erfahrung beim Umgang mit dem Fehlercode 0x80004005 . Einige Benutzer erhalten bei der Verwendung ihres Computers den Fehlercode 0X80004005. Der Fehler 0x80004005 wird hauptsächlich dadurch verursacht, dass der Computer bestimmte Dynamic Link Library-Dateien nicht korrekt registriert oder dass eine Firewall keine HTTPS-Verbindungen zwischen dem Computer und dem Internet zulässt. Wie wäre es also?

Wie übertrage ich Dateien von Quark Cloud Disk auf Baidu Cloud Disk? Wie übertrage ich Dateien von Quark Cloud Disk auf Baidu Cloud Disk? Mar 14, 2024 pm 02:07 PM

Quark Netdisk und Baidu Netdisk sind derzeit die am häufigsten verwendete Netdisk-Software zum Speichern von Dateien. Wenn Sie die Dateien in Quark Netdisk auf Baidu Netdisk speichern möchten, wie gehen Sie vor? In dieser Ausgabe hat der Herausgeber die Tutorial-Schritte zum Übertragen von Dateien vom Quark Network Disk-Computer auf die Baidu Network Disk zusammengestellt. Werfen wir einen Blick auf die Bedienung. Wie speichere ich Quark-Netzwerkfestplattendateien auf einer Baidu-Netzwerkfestplatte? Um Dateien von Quark Network Disk auf Baidu Network Disk zu übertragen, müssen Sie zunächst die erforderlichen Dateien von Quark Network Disk herunterladen, dann den Zielordner im Baidu Network Disk-Client auswählen und ihn öffnen. Ziehen Sie dann die von Quark Cloud Disk heruntergeladenen Dateien per Drag & Drop in den vom Baidu Cloud Disk-Client geöffneten Ordner oder verwenden Sie die Upload-Funktion, um die Dateien zu Baidu Cloud Disk hinzuzufügen. Überprüfen Sie nach Abschluss des Uploads unbedingt, ob die Datei erfolgreich in Baidu Cloud Disk übertragen wurde. Das ist es

Was ist die Datei hiberfil.sys? Kann hiberfil.sys gelöscht werden? Was ist die Datei hiberfil.sys? Kann hiberfil.sys gelöscht werden? Mar 15, 2024 am 09:49 AM

Vor kurzem haben viele Internetnutzer den Herausgeber gefragt: Was ist die Datei hiberfil.sys? Kann hiberfil.sys viel Speicherplatz auf Laufwerk C beanspruchen und gelöscht werden? Der Editor kann Ihnen mitteilen, dass die Datei hiberfil.sys gelöscht werden kann. Werfen wir einen Blick auf die Details unten. hiberfil.sys ist eine versteckte Datei im Windows-System und auch eine System-Ruhezustandsdatei. Es wird normalerweise im Stammverzeichnis des Laufwerks C gespeichert und seine Größe entspricht der Größe des installierten Speichers des Systems. Diese Datei wird verwendet, wenn sich der Computer im Ruhezustand befindet, und enthält die Speicherdaten des aktuellen Systems, damit dieser bei der Wiederherstellung schnell wieder in den vorherigen Zustand versetzt werden kann. Da seine Größe der Speicherkapazität entspricht, nimmt er möglicherweise mehr Festplattenspeicher ein. hiber

Unterschiedliche Verwendung von Schrägstrichen und Backslashes in Dateipfaden Unterschiedliche Verwendung von Schrägstrichen und Backslashes in Dateipfaden Feb 26, 2024 pm 04:36 PM

Ein Dateipfad ist eine Zeichenfolge, die vom Betriebssystem verwendet wird, um eine Datei oder einen Ordner zu identifizieren und zu finden. In Dateipfaden gibt es zwei gängige Symbole zur Trennung von Pfaden, nämlich den Schrägstrich (/) und den Backslash (). Diese beiden Symbole haben in verschiedenen Betriebssystemen unterschiedliche Verwendungen und Bedeutungen. Der Schrägstrich (/) ist ein häufig verwendetes Pfadtrennzeichen in Unix- und Linux-Systemen. Auf diesen Systemen beginnen Dateipfade im Stammverzeichnis (/) und werden durch Schrägstriche zwischen den einzelnen Verzeichnissen getrennt. Zum Beispiel der Pfad /home/user/Docume

Ausführliche Erläuterung der Rolle von .ibd-Dateien in MySQL und der damit verbundenen Vorsichtsmaßnahmen Ausführliche Erläuterung der Rolle von .ibd-Dateien in MySQL und der damit verbundenen Vorsichtsmaßnahmen Mar 15, 2024 am 08:00 AM

Ausführliche Erläuterung der Rolle von .ibd-Dateien in MySQL und der damit verbundenen Vorsichtsmaßnahmen. MySQL ist ein beliebtes relationales Datenbankverwaltungssystem, und die Daten in der Datenbank werden in verschiedenen Dateien gespeichert. Unter diesen ist die .ibd-Datei eine Datendatei in der InnoDB-Speicher-Engine, die zum Speichern von Daten und Indizes in Tabellen verwendet wird. Dieser Artikel bietet eine detaillierte Analyse der Rolle der .ibd-Datei in MySQL und liefert relevante Codebeispiele, um den Lesern ein besseres Verständnis zu erleichtern. 1. Die Rolle von .ibd-Dateien: Speichern von Daten: .ibd-Dateien sind InnoDB-Speicher

Detaillierte Erklärung des Protokollanzeigebefehls im Linux-System! Detaillierte Erklärung des Protokollanzeigebefehls im Linux-System! Mar 06, 2024 pm 03:55 PM

In Linux-Systemen können Sie den folgenden Befehl verwenden, um den Inhalt der Protokolldatei anzuzeigen: Befehl tail: Der Befehl tail wird verwendet, um den Inhalt am Ende der Protokolldatei anzuzeigen. Dies ist ein allgemeiner Befehl zum Anzeigen der neuesten Protokollinformationen. tail [Option] [Dateiname] Zu den häufig verwendeten Optionen gehören: -n: Geben Sie die Anzahl der anzuzeigenden Zeilen an. Der Standardwert ist 10 Zeilen. -f: Überwachen Sie den Dateiinhalt in Echtzeit und zeigen Sie den neuen Inhalt automatisch an, wenn die Datei aktualisiert wird. Beispiel: tail-n20logfile.txt#Zeigen Sie die letzten 20 Zeilen der Datei logfile.txt an. tail-flogfile.txt#Überwachen Sie den aktualisierten Inhalt der Datei logfile.txt in Echtzeit. Head-Befehl: Der Head-Befehl wird verwendet, um den Anfang anzuzeigen der Protokolldatei

Erstellen Sie Linux-„.a'-Dateien und führen Sie sie aus Erstellen Sie Linux-„.a'-Dateien und führen Sie sie aus Mar 20, 2024 pm 04:46 PM

Die Arbeit mit Dateien im Linux-Betriebssystem erfordert die Verwendung verschiedener Befehle und Techniken, die es Entwicklern ermöglichen, Dateien, Code, Programme, Skripts und andere Dinge effizient zu erstellen und auszuführen. Im Linux-Umfeld haben Dateien mit der Endung „.a“ ​​als statische Bibliotheken eine große Bedeutung. Diese Bibliotheken spielen eine wichtige Rolle in der Softwareentwicklung und ermöglichen Entwicklern die effiziente Verwaltung und gemeinsame Nutzung gemeinsamer Funktionen über mehrere Programme hinweg. Für eine effektive Softwareentwicklung in einer Linux-Umgebung ist es wichtig zu verstehen, wie „.a“-Dateien erstellt und ausgeführt werden. In diesem Artikel wird erläutert, wie Sie die Linux-Datei „.a“ ​​umfassend installieren und konfigurieren. Lassen Sie uns die Definition, den Zweck, die Struktur und die Methoden zum Erstellen und Ausführen der Linux-Datei „.a“ ​​untersuchen. Was ist L?

See all articles