jsp頁面上傳圖片檔案到伺服器頁面無重新整理的技巧

阿新 • • 發佈：2019-01-15

最近做SSH專案碰到一個問題，我在頁面上想上傳一個圖片檔案到伺服器，但是在上傳前希望能在頁面上看到圖片的預覽。查了一下資料，發現有幾種方式可以完成這個功能。一種是通過javascript來實現這個預覽的功能，但是這種方法對瀏覽器有限制，有的瀏覽器用此方法無效。一種是通過ajax實現，還有一種就是通過無重新整理頁面上傳檔案到伺服器，通過顯示伺服器上的臨時圖片檔案也可以實現預覽的效果。

下面講的就是最後一種方式。先看頁面檔案test.html原始碼：

<!DOCTYPE html>
<html>
  <head>
    <title>test.html</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=GB18030">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

<script type="text/javascript">
function callback(msg)   
{   
    document.getElementById("file").outerHTML = document.getElementById("file").outerHTML;   
    document.getElementById("msg").innerHTML = "<font color=red>"+msg+"</font>";   
}   
</script>
  </head>
  
  <body>
    <form action="/ECSystem/imgupload" id="form1" name="form1" encType="multipart/form-data"  method="post" target="hidden_frame">
      
    <input type="file" id="file" name="file" style="width:450" accept=".jpg, .gif">   
    <INPUT type="submit" value="上傳檔案"><span id="msg"></span>   
    <br>   
    <font color="red">支援JPG,JPEG,GIF,BMP,SWF,RMVB,RM,AVI檔案的上傳</font>               
    <iframe name='hidden_frame' id="hidden_frame" style='display:none'></iframe>
</form>
  
  </body>
</html>

上面的原始碼中，要上傳圖片檔案form的屬性裡必須有encType="multipart/form-data" method="post"z，想要頁面不重新整理，“target="hidden_frame"”這個是必要的設定，表示頁面的action請求重新整理到iframe裡，不必重新整理整個頁面。

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">  
        <action name="imgupload" class="com.struts.action.ImageUploadAction">
        </action>
    </package>
</struts>

Action的程式碼實現ImageUploadAction.java內容：

package com.struts.action;

import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.PrintWriter;
import java.util.Date;

import org.apache.struts2.ServletActionContext;



public class ImageUploadAction {
	private String fileFileName;
	private File file;
	private static final int BUFFER_SIZE = 64 * 1024 ; //緩衝器大小
	private String imageFileName;
	
	public void setFile(File file) {   
        this.file = file;   
    }
	
	public void setFileFileName(String fileFileName) {   
        this.fileFileName = fileFileName;   
    }
	
	public int getFileSizes(File f) throws Exception {//取得檔案大小
	       int s = 0;
	       if (f.exists()) {
	           FileInputStream fis = null;
	           fis = new FileInputStream(f);
	           s= fis.available();
	           if (fis != null)
	        	   fis.close();
	       }
	       return s;
	}
	
	private void copy(File src, File dst) throws Exception {
		if (!src.exists())
			return;
		PrintWriter document_out = ServletActionContext.getResponse().getWriter();
		Boolean result = true;
		int filesize = getFileSizes(src);
		try {
			InputStream in = null ;
			OutputStream out = null ;
			try { 
				in = new BufferedInputStream( new FileInputStream(src), BUFFER_SIZE);
				out = new BufferedOutputStream(new FileOutputStream(dst), BUFFER_SIZE);
				byte [] buffer = new byte [BUFFER_SIZE];
				while (in.read(buffer, 0, filesize) > 0 ) {
					out.write(buffer, 0, filesize);
				}
			} finally {
				if ( null != in) {
					in.close();
				} 
				if ( null != out) {
					out.close();
				} 
			} 
		} catch (Exception e) {
			result = false;
			e.printStackTrace();
		} 
		if (result == true) {
			document_out.print("<script>parent.callback('upload file success');</script>");
		}
		else {
			document_out.print("<script>parent.callback('upload file fail');</script>");
		}
	} 
	
	private static String getExtention(String fileName) {
		int pos = fileName.lastIndexOf( "." );
		return fileName.substring(pos);
	} 

	
	public String execute() throws Exception {
		
		imageFileName = new Date().getTime() + getExtention(this.fileFileName);
		File imageFile = new File(ServletActionContext.getServletContext().getRealPath("/") + imageFileName);
		copy(file, imageFile);
		
		return "success";
	}

}

這樣就ok了

jsp頁面上傳圖片檔案到伺服器頁面無重新整理的技巧

jsp頁面上傳圖片檔案到伺服器頁面無重新整理的技巧

基於VUE選擇上傳圖片並在頁面顯示（圖片可刪除）

HTML頁面上傳圖片直接預覽

vue html jq 實現上傳圖片顯示在頁面上預覽

微信小程式 —— 上傳檔案到伺服器（例：上傳圖片到伺服器）

上傳圖片(檔案)在本地沒問題，伺服器上報錯413(Request Entity Too Large)

H5 移動端上傳圖片和視訊頁面顯示縮圖

html頁面上傳圖片並進行展示

七牛雲單頁面上傳圖片的功能

jsp+servlet實現上傳圖片到伺服器並返回下載該圖片的二維碼

springboot(7)——上傳圖片/檔案到七牛雲端儲存

FormData物件提交表單及上傳圖片/檔案

vue-quill-editor-upload : 實現vue-quill-editor上傳圖片到伺服器

Swoft 踩坑筆記八 - 上傳圖片/檔案

wangedit上傳圖片的伺服器

vue 整合ueditor（百度富文字編輯器）以及使用後端Java上傳圖片到伺服器，特別注意的大坑

上傳圖片到伺服器，並且重新命名圖片-更改（小白共勉）

上傳圖片到伺服器，並且重新命名圖片（小白共勉）

微信小程式上傳圖片檔案小程式+Java

html 上傳 input type="file" 只允許上傳圖片檔案

jsp頁面上傳圖片檔案到伺服器頁面無重新整理的技巧

相關推薦