Introduction au code de prévisualisation des pièces jointes en JavaScript

Cet article présente principalement l'implémentation de la fonction d'aperçu des pièces jointes en JavaScript. Les étapes de fonctionnement spécifiques peuvent être trouvées en détail ci-dessous. Les amis intéressés peuvent s'y référer.

Étant donné que la plate-forme d'imagerie EMP de l'entreprise est relativement lourde et nécessite un téléchargement avant de pouvoir être prévisualisée, le personnel commercial a proposé d'ajouter une page d'aperçu à la page de liste des pièces jointes. Aujourd'hui, je vais enregistrer le processus terminé :

L'une est la version js, l'autre est la version jquery, la version js est utilisée ici. La version jquery est simplement introduite légèrement différemment.

1. Présentez le plug-in (téléchargé)

2e3f448508d76a6874b9ac448a7b3495 db271416853c42fd247a57c1a2c29eb6

701f448de73fc60140242f4ca57f778edb271416853c42fd247a57c1a2c29eb6

2. Donnez vie à la page d'aperçu

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

Transférez le chemin de l'image de la page de liste précédente vers la page d'aperçu. l'image, vous pouvez sélectionner ou décocher. Si cette option n'est pas sélectionnée, toutes les images de cette liste seront affichées par défaut. Si cette case est cochée, les images sélectionnées seront affichées. Ici, j'ai constaté que l'application avait téléchargé de nombreux packages d'images compressés. la décompression automatique a donc été ajoutée en arrière-plan. Pour les fonctions *.zip et *.rar, cette partie nécessite l'introduction de packages jar tiers. La version 1.6 ne prend en charge que la décompression du format *.zip, et le plus embarrassant est la valeur par défaut. encodage de la société Sun. S'il y a du chinois, une erreur sera signalée, allez sur jdk1 7 ne prend en charge que le chinois

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

3. Supprimer de manière asynchrone le fichier décompressé

Considérant que la décompression prendra de l'espace sur le disque partagé, la suppression asynchrone est effectuée après la décompression. 20 s, ce qui est suffisant. Cependant, si vous cliquez pour recharger la page après 20 s, le chargement de l'image échouera car le chemin d'accès à l'image n'est plus valide.

   //异步删除文件(节省空间)
   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. Montage du disque

Lors de l'affichage des images, on accède à la page L'image chemin que le projet pense n'est pas disponible, vous devez donc exécuter la commande mount pour monter le chemin du disque partagé sur un chemin sous le projet

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

De cette façon, il peut être affiché normalement

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!