Einführung in den Code zur Implementierung der Vorschaufunktion von Anhängen in JavaScript

In diesem Artikel wird hauptsächlich die Implementierung der Anhang-Vorschaufunktion in JavaScript vorgestellt. Die spezifischen Bedienungsschritte finden Sie unten im Detail.

Da die EMP-Imaging-Plattform des Unternehmens relativ umständlich ist und vor der Vorschau heruntergeladen werden muss, schlugen die Mitarbeiter des Unternehmens vor, der Anhanglistenseite eine Vorschauseite hinzuzufügen. Heute werde ich den abgeschlossenen Prozess aufzeichnen:

Eine ist die js-Version, die andere ist die jquery-Version, hier wird die js-Version verwendet. Die JQuery-Version wird nur etwas anders eingeführt.

1. Stellen Sie das Plug-in vor (hochgeladen)

2e3f448508d76a6874b9ac448a7b3495 db271416853c42fd247a57c1a2c29eb6

701f448de73fc60140242f4ca57f778edb271416853c42fd247a57c1a2c29eb6

2. Erwecken Sie die Vorschauseite zum Leben

<SCRIPT>
var attach_path= &#39;${param.attach_path}&#39;;
var attach_name= decodeURI(&#39;${param.attach_name}&#39;);
var attachPath= new Array();
attachName=attach_name.split(",");
var attachPath1= new Array();
attachPath1=attach_path.split(",");
for (var i=0;i<attachPath1.length;i++)
{ 
 attachPath2=&#39;102storage&#39;+attachPath1[i];
 $("#jq22").append("<li><img alt=&#39;"+attachName[i]+"&#39; src=&#39;"+attachPath2+"&#39;></li>"); 
}
$(function() {
 $(&#39;#jq22&#39;).viewer({
  url: &#39;src&#39;,
 });
});
</SCRIPT>

Übertragen Sie den Pfad des Bildes von der vorherigen Listenseite auf die Vorschauseite Sie können das Bild auswählen oder deaktivieren. Wenn dies nicht aktiviert ist, werden die ausgewählten Bilder angezeigt. Hier habe ich festgestellt, dass die APP viele komprimierte Bildpakete hochgeladen hat. Daher wurde im Hintergrund eine automatische Dekomprimierung hinzugefügt. Dieser Teil erfordert die Einführung von JAR-Paketen von Drittanbietern. 1.6 unterstützt nur die Dekomprimierung des *.zip-Formats, und das Peinlichste ist die Standardeinstellung Wenn es Chinesisch gibt, wird ein Fehler gemeldet. JDK1 unterstützt nur Chinesisch

import java.io.*; .ArrayList;
java.util.Enumeration importieren;
java.util .List importieren;
org.apache.tools.zip.ZipEntry importieren;
org.apache.tools.zip.ZipFile importieren ;
import com.yucheng.cmis.operation.CMISOperation;
import com .github.junrar.Archive;
import com.github.junrar.rarfile.FileHeader;

3. Löschen Sie die dekomprimierte Datei asynchron.

Da die Dekomprimierung den Speicherplatz der gemeinsam genutzten Festplatte belegt, wird die asynchrone Löschung nach der Dekomprimierung durchgeführt 20 Sekunden, was ausreichend Zeit ist. Wenn Sie jedoch nach 20 Sekunden auf „Neu laden“ klicken, schlägt das Laden des Bildes fehl, da der Pfad zum Bild nicht mehr gültig ist.

   //异步删除文件(节省空间)
   List<Thread> threadList = new ArrayList<Thread>();
   Thread thread = new Thread(new DeleteTemporaryFolder(dstDirectoryPath));
   thread.start();
   for(Thread t : threadList){
    try {
     t.join();
    } catch (InterruptedException e) {
     e.printStackTrace();
    }
   }

4. Festplattenmontage

Beim Anzeigen von Bildern wird auf die Seite zugegriffen Pfad, von dem das Projekt denkt, dass er nicht verfügbar ist. Daher müssen Sie den Mount-Befehl ausführen, um den Pfad der freigegebenen Festplatte in einen Pfad unter dem Projekt einzubinden

mount --bind /testshare01 /app/cmis/project/ cmis.war/ ff/testshare01

Auf diese Weise kann es normal angezeigt werden

Das obige ist der detaillierte Inhalt vonEinführung in den Code zur Implementierung der Vorschaufunktion von Anhängen in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!