圖片預覽上傳

框架：Struts二、Spring、MyBatis 

需求簡介：

[新建頁面] 可添加多張圖片，只顯示一張，添加後顯示在頁面列表中，可刪除，可切換預覽。

[編輯頁面] 功能同上。

 

頁面設計：

 

預覽圖

xxxxx1.jpg 刪除

xxxxx2.jpg 刪除

添加文件

 

技術點：

1. 本地圖片上傳後在jsp頁面中預覽。js

2.服務器讀硬盤文件，顯示到jsp。java

3.jsp提交包含文件表單不刷新。easyUI

 

---------------------------------------------------割不割-----------------------------------------------------------

 

 

1. 關鍵字： FileReader

• INPUT type=file 元素
• 必須爲 INPUT type=file 元素指定NAME 標籤屬性的值。
• FORM 元素 METHOD 標籤屬性的值必須設置爲post。
• FORM 元素 ENCTYPE 標籤屬性的值必須設置爲multipart/form-data。  

//要處理上載到服務器的文件，服務器端進程必須能夠處理 multipart/form-data 的提交。
//標籤屬性 value 當文本經過用戶輸入設置後獲取 input 對象的文件名。
//C:\Documents and Settings\Administrator\My Documents\My Pictures\ak.jpg
//obj.value 爲 C:\fakepath\ak.jpg  虛假路徑，文件名正確。

 

<form name="myform" action="post.do" enctype="multipart/form-data" method="post">
<input type="file" name="file1"/>
<input type="submit" value="上傳文件">
</form>

 

var reader = new FileReader(); reader.onload = function(e){ document.getElementById(imgPreviewId).setAttribute("src",e.target.result); } reader.readAsDataURL(fileObj.files[0]);

解讀file:
obj.file // undefined
obj.files // [object FileList]
obj.files[0] //[object File]
// 一個input支持多個文件
obj.files[0] 包含的信息：
webkitRelativePath:
lastModifiedDate:Fri Jan 16 2015 16:38:56 GMT+0800 (中國標準時間)
name:a1.png
type:image/png
size:7144
slice:function slice() { [native code] }

2.jsp img 標籤設置

<img src="showPic.do" /> 

3. struts.xml 文件配置

<result name="pic" type="stream">  
    <param name="inputName">inputStream</param>  
    <param name="contentType">image/jpeg</param>  
    <param name="bufferSize">2048*2048</param>  
</result> 

附：result-types

<result-types>  
<result-type name="chain" class="com.opensymphony.xwork2.ActionChainResult"/>  
<result-type name="dispatcher" class="org.apache.struts2.dispatcher.ServletDispatcherResult" default="true"/>  
<result-type name="freemarker" class="org.apache.struts2.views.freemarker.FreemarkerResult"/>  
<result-type name="httpheader" class="org.apache.struts2.dispatcher.HttpHeaderResult"/>  
<result-type name="redirect" class="org.apache.struts2.dispatcher.ServletRedirectResult"/>  
<result-type name="redirectAction" class="org.apache.struts2.dispatcher.ServletActionRedirectResult"/>  
<result-type name="stream" class="org.apache.struts2.dispatcher.StreamResult"/>  
<result-type name="velocity" class="org.apache.struts2.dispatcher.VelocityResult"/>  
<result-type name="xslt" class="org.apache.struts2.views.xslt.XSLTResult"/>  
<result-type name="plainText" class="org.apache.struts2.dispatcher.PlainTextResult" />  
</result-types>  

4. java action配置

InputStream inputStream; getter ... setter ... public showPic (){ inputstream = ... return "pic" }

5. 讓表單（form）成爲 ajax 提交的表單（form）

easyUI 插件 Form表單

http://www.jeasyui.net/plugins/166.html

var options = { success: function (dataStr){ ... } } $("#myform").form("submit",options);// 此處options 爲json

 如返回jsonString  可經過 eval('(' + dataStr + ')'); 轉爲json對象

6.關鍵字：Array

var fileNameArray = new Array();

push(fileName); // 添加元素

pop();//彈出最右一個，即頂部，看做桶，有底

shift(); // 移除數組第一個元素

var array = new Array(); array.push(1); array.push(2); array.push(3); array.pop(); alert(array.join(",")); // 1,2
var array = new Array(); array.push(1); array.push(2); array.push(3); array.shift(); alert(array.join(",")); //2,3

 移除元素N

var array = new Array(); array.push("a"); array.push("b"); array.push("c"); array.push("d"); array.splice(array.indexOf("b"),1); alert(array.join(",")); //a,c,d 

 

var array = new Array(); array.push("a"); array.push("b"); array.push("c"); array.push("d"); array.pop(); array.shift(); alert(array.length); //2

7.關鍵字：file

java.io.File file = ...; file.length(); //long 文件大小

 

File file = new File(filePath); // 刪除返回true ，再次刪除返回false，目標文件不存在（路徑存在new、file不存在）返回false
file.delete();

 

//文件刪除

// 1.已存在文件夾: old
// 2.目標文件夾: new
// 3.mkdir :建立最右單個文件夾，只一個new
// 4.mkdirs:依次建立多個文件夾
// 5.只要有一個new被建立則返回true
// 6.二次執行 mkdir or mkdirs 時，返回false，不建立文件夾。
// 7.mkdir or mkdirs 不能建立file.txt文本文件 ,會生成名爲file.txt 的文件夾
// 8.1.方法createNewFile會拋出io異常
// 例如：包含非法字符時：文件名、目錄名或卷標語法不正確。
// 例如：路徑中存在new時：系統找不到指定的路徑。
// 8.2方法createNewFile 二次執行時，返回false，不建立文件。
//----------------------------

 

File d1 = new File("D:\\old\\new\\new"); d1.mkdir(); // return false 未建立
File d2 = new File("D:\\old\\new\\new"); d2.mkdirs(); // return true 建立成功
File d3 = new File("D:\\old\\new"); d3.mkdir(); // return true 建立成功
File f1 = new File("D:\\old\\new.txt"); try { f1.createNewFile();} catch (IOException e) { e.printStackTrace();}

 

 /** * File -> byte[] * * @param file */
    public byte[] file2ByteArray(File file) throws FileNotFoundException,IOException { byte[] buf = null; FileInputStream fis = null; ByteArrayOutputStream baos = null; try { fis = new FileInputStream(file); baos = new ByteArrayOutputStream(1024 * 1024); byte[] b = new byte[1024 * 1024]; int l; while ((l = fis.read(b)) != -1) { baos.write(b, 0, l); } baos.flush(); buf = baos.toByteArray(); } catch (FileNotFoundException e) { //logger.info("文件[" + file + "]未找到！");
            throw e; } catch (IOException e) { //logger.info("文件[" + file + "]讀寫錯誤！" + e.getMessage());
            throw e; } finally { try { if (fis != null) { fis.close(); } if (baos != null) { baos.close(); } } catch (IOException e) { throw e; } } return buf; }

 

 /** * * @param filePath \\user\\ * @param fileName file.jpg * @param byteArray * */
    public String fileWrite(String filePath, String fileName, byte[] byteArray) { // 目標文件夾
        File dir = new File(filePath); // 建立文件夾
 dir.mkdirs(); String f = filePath + File.separator + fileName; // 目標文件
        File file = new File(f); // 若是文件存在返回
        if (file.exists()) { return "文件["+f+"]已存在"; // or // file.delete();
 } // 文件輸出流
        FileOutputStream fos = null; try { // 輸出目標
            fos = new FileOutputStream(filePath + File.separator + fileName); // 輸出
 fos.write(byteArray); fos.flush(); } catch (FileNotFoundException e) { return "文件["+f+"]未找到"; } catch (IOException e) { return "文件["+f+"]讀寫錯誤"; } finally { try { // 關閉
                if(fos!=null){ fos.close(); } } catch (IOException e) { return "文件輸出流關閉時異常"; } } return null; }

 

// 文件複製

fileWrite("D:\\old","new.png",file2ByteArray(new File("D:\\old\\old.png")));

// 文件分割符

//linux  讀取文件若是路徑中存在反斜槓 \\ ，會不能正常讀取。

File.separator

Linux下爲 /

Windows 下爲 \