图片预览上传
框架：Struts2、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 下为 \
