01 05 Smartupload上傳組件

1 基本上傳

在HTML元素input裏面有一個file類型。

<input type="file">

那麼當文件選擇完成之後則應該隨着表單一起提交到服務器上,那麼此時的服務器可以採用二進制的方式進行內容的接收,但是這樣的接收處理的難度太大了,所以爲了簡化這樣的操作,往往會在進行上傳的時候使用一些第三方的組件,常見的組件有兩種:SmartUpload組件、FileUpload組件。

但是如果你現在並沒有使用框架進行開發,那麼強烈不建議使用FileUpload組件,推薦使用SmartUpload組件。SmartUpload組件是以一個*.jar文件的形式出現的,所以在項目裏面如果要使用這個組件就需要將*.jar文件拷貝到WEB-INF/lib目錄下。

如果要想使用SmartUpload組件開發那麼需要注意以下的幾個問題:
(1)要進行文件上傳的表單必須進行封裝;

<form action="upload.jsp" method="post" enctype="multipart/form-data">
		選擇文件:&nbsp;<input type="file" name="file" id="file">
		<input type="submit" value="submit">
	</form>

(2)隨後在接收上傳的頁面裏面按照如下的步驟操作:
|————第一步:實例化SmartUpload類對象;
|————第二步:初始化上傳環境;
|————第三步:接收所有的上傳數據;
|————第四步:進行文件保存。
範例:定義upload.jsp文件

<%
	//第一步:實例化SmartUpload類對象;
	SmartUpload smart = new SmartUpload();
	//第二步:初始化上傳環境;
	smart.initialize(config, request, response);
	//第三步:接收所有的上傳數據;
	smart.upload();
	//第四步:進行文件保存。
	smart.save(getServletContext().getRealPath("/") + "/upload");
%>

這個時候就可以很輕鬆的實現文件的上傳操作了,但是上傳之後的保存在upload目錄下的文件名稱就是原始的圖片名稱。

2 上傳加強

使用save()方法保存上傳文件的時候會使用文件的原始名稱進行保存,這樣一來就有可能發生文件覆蓋的情況,所以在任何的上傳操作過程之中,絕對不會直接使用原始文件名稱進行保存,所以需要針對於上傳的文件進行重命名。

實際上最穩妥的命名方式就是使用IP+時間戳+三位隨機數。但是這樣做太麻煩了,所以在java.util包裏面提供有一個UUID的類,這個類就是根據時間戳生成一個幾乎不會重複的名稱。

public static void main(String[] args) {
	UUID uuid = UUID.randomUUID();
	System.out.println(uuid.toString());
}

如果只是存在有文件名稱根本就不能夠進行開發操作,還需要知道文件的後綴,那麼這些信息要想取得就必須通過SmartUpload取得。這個類定義有如下的方法:
(1)取得所有的上傳文件對象:public SmartFiles getFiles()
當取得了SmartFiles類對象後可以進行如下的操作:
(1)取得上傳文件的個數:public int getCount()
(2)取得上傳文件的大小:public long getSize()
(3)根據索引取得每一個上傳文件:public SmartFile getFile(int index)

//取得上傳文件個數
int count = smart.getFiles().getCount();
//取得上傳文件大小
long size = smart.getFiles().getSize();

通過代碼的演示可以發現,getSize()方法可以判斷是否有文件上傳。如果有上傳,返回的數據是大於0的。

取得的SmartFile表示每一個上傳文件,也就是說每一個上傳文件的信息都在這個對象裏面保存了。此類中的方法如下:
(1)取得上傳文件的MIME類型:public String getContentType()
(2)取得上傳文件的大小:public int getSize()
(3)取得上傳文件的擴展名:public String getFileExt()

for(int i = 0; i < smart.getFiles().getCount(); i++){
%>
		<h2><%=smart.getFiles().getFile(i).getFileExt() %><%=smart.getFiles().getFile(i).getContentType() %><%=smart.getFiles().getFile(i).getSize() %></h2>
<%
	}
%>

那麼通過此過程就應該清楚了,如果在日後進行文件上傳的時候允許傳遞的只能夠是圖片信息。

在SmartFile類裏面提供有一個文件保存的操作功能:public void saveAs(String path)
範例:批量上傳

//存儲文件
	if(smart.getFiles().getSize() > 0){
		for(int i = 0; i < smart.getFiles().getCount(); i++){
			if(smart.getFiles().getFile(i).getContentType().contains("image") && smart.getFiles().getFile(i).getSize() > 0){
				String fileName = UUID.randomUUID().toString() + "." + smart.getFiles().getFile(i).getFileExt();
				String filePath = getServletContext().getRealPath("/") + java.io.File.separator +"upload" + java.io.File.separator + fileName;
				smart.getFiles().getFile(i).saveAs(filePath);
			}
		}
	}

以後只要是上傳操作其結構都一樣,但是一定要記住了,如果你現在只有一個文件上傳。

3 混合表單

以上的所有代碼所完成的只是進行了文件的上傳,但是在很多時候一個表單進行操作的過程之中往往還可能提交有其它的附屬信息。一旦表單封裝了,那麼request.getParameter()request.getParameterValues()request.getParameterNames()三個方法就無效了。
範例:定義表單

  	<form action="upload.jsp" method="post" enctype="multipart/form-data">
  		學生姓名:&nbsp;<input type="text" name="name" id="name"><br>
  		學生照片:&nbsp;<input type="file" name="file" id="file"><br>
  		<input type="submit" value="submit">
  		<input type="reset" value="reset">
  	</form>

此時由於表單在上傳的過程之中進行了封裝,所有的數據不會再以文本的形式傳遞了,都是以二進制數據流的形式完成的,所以來講request的三個接收參數的方法就無效了,爲此在SmartUpload類裏面提供有一個支持的方法:
(1)取得SmartRequest對象:public SmartRequest getRequest();這個方法一定要在接收完成後使用。
在SmartRequest對象裏面模擬了request對象的操作提供有三個方法:
(1)取得單個參數:public String getParameter(String param)
(1)取得一組參數:public String[] getParameterValues(String param)
(1)取得所有參數名稱:public Enumeration getParameterNames()
範例:改善頁面,實現預覽

<html>
  <head>
    <meta charset="UTF-8">
    <title>Upload</title>
    <style type="text/css">
        #preview, .img, img{
            width: 200px;
            height: 200px;
        }
        #preview{
            border: 1px solid #000;
        }
    </style>
    <script type="text/javascript">
        function preview(file){
            var prevDiv = document.getElementById("preview");
            if(file.files && file.files[0]){
                var reader = new FileReader();
                reader.onload = function(evt){
                    prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
                }
                reader.readAsDataURL(file.files[0]);
            }else{
                prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"><div>';
            }
        }
    </script>
  </head>
  
  <body>
  	<form action="upload.jsp" method="post" enctype="multipart/form-data">
  		學生姓名:&nbsp;<input type="text" name="name" id="name"><br>
  		學生照片:&nbsp;<input type="file" name="file" id="file" onchange="preview(this)"><div id="preview"></div><br>
  		<input type="submit" value="submit">
  		<input type="reset" value="reset">
  	</form>
  </body>
</html>

以後編寫上傳也會採用同樣的預覽方式完成的。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章