Introduction to the code for previewing attachments in JavaScript

This article mainly introduces the implementation of the attachment preview function in JavaScript. The specific operation steps can be found in detail below. Interested friends can refer to it.

Since the company's EMP imaging platform is relatively cumbersome and needs to be downloaded before it can be previewed, the business staff proposed to add a preview page to the attachment list page. Today I will record the completed process:

One is the js version, the other is the jquery version, the js version is used here. The jquery version is just introduced slightly differently.

1. Introduce the plug-in (uploaded)

95f58c7bd49d13940525534480183e84 db271416853c42fd247a57c1a2c29eb6

701f448de73fc60140242f4ca57f778edb271416853c42fd247a57c1a2c29eb6

##2. Bring the preview page to life

##

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

Transfer the path of the image from the previous list page to the preview page. When previewing the image, you can both select and select You can uncheck it. If not, all the pictures in this list will be displayed by default. If checked, the selected pictures will be displayed. Here I found that the APP uploaded many compressed packages of pictures, so automatic decompression was added in the background* .zip, *.rar functions, this part requires the introduction of third-party jar packages. 1.6 only supports decompression of *.zip format, and the most embarrassing thing is the default encoding of Sun company. If there is Chinese, an error will be reported. It will not be available until jdk1.7 Support Chinese

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

##3. Asynchronously delete the decompressed file

Considering that decompression will occupy the space of the shared disk, asynchronous deletion is performed after decompression. The time is 20s, which is enough time. However, if you click to reload the page after 20s, the image will fail to load because the image is The path has expired.

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

When displaying pictures, the page cannot access the project As the image path, you need to execute the mount command to mount the shared disk path to a path under the project

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

This way it can be displayed normally

The above is the detailed content of Introduction to the code for previewing attachments in JavaScript. For more information, please follow other related articles on the PHP Chinese website!