本片博客主要内容:jsp+java实现图片上传可以预览原图的功能。
效果图如下:
这个功能就可以避免放上错误的图片;还可以查看图片原图效果。
那么该怎么实现呢?
大体思路:
<input type="file" name="myFile"/>
文件表单有一个change事件,文件的路径就是表单的value值。当文件路径发生改变也就是更换了上传文件,就会触发change事件。然后我们就可以通过jq&&js来修改预览框img、div的属性了。
jsp代码如下:
<table id="datashow" style="position: relative;">
<form action="AddLineType" enctype="multipart/form-data" method="post">
<tr>
<td>
<label for="typeName">线路类型名:</label>
<input type="text" name="typeName" id="typeName" value="" />
</td>
</tr>
<tr>
<td>
<!-- 预览图片位置 -->
<img id="myFile1" src="images/show.png" width="80" height="80" class="previewImg">
</td>
</tr>
<tr>
<td>
<label for="myFile1">线路类型图标</label>
<input type="file" name="myFile1" class="myFile" id="myFile_1" value="" />
<!-- <input type="button" value="添加" id="btn"/> -->
<input type="submit" value="添加" />
</td>
<td>
<!-- 预览原图div容器绝对定位 -->
<div id="preview" style="position: absolute;"></div>
</td>
</tr>
</form>
</table>
绑定文件表单的change事件和img标签的移入、动(mouseover、mousermove)移出(mouseout)事件:
$(function() {
//1.绑定change事件
$(".myFile").change(function() { //上传文件预览效果
var url = null; //创建生成地址的空变量
var name = $(this).attr("name"); //得到表单名
var index = parseInt(name.charAt(6) - 1); //获取文件集合的下表
/* var fileObj = document.getElementById("myFile").files[0]; //得到input的第一个文件js写法 */
var fileObj = $(".myFile")[index].files[0]; //得到文件对象
//2.得到文件的绝对路径地址(由于浏览器的安全机制,原路径会被隐藏替换成fakepath)
if (window.createObjcectURL != undefined) {
url = window.createOjcectURL(fileObj); //创建的地址
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(fileObj);
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(fileObj);
}
//3.修改img标签的src属性,换成刚刚上传的文件路径
$("#" + name).attr("src", url); //更改预览图片地址
});
//4.预览原图效果
/* 根据页面鼠标位置显示图片预览 */
var ya = $("#preview"); //得到预览图的容器div
ya.hide(); //隐藏该div
$(".previewImg").mouseover(function() { //绑定对img绑定鼠标移入事件
ya.html('<img src = "' + this.src + '"/>').show(); //将原图路径放入div并且显示
$(this).mousemove(function(e) {
//5.绑定鼠标移动事件,使div跟随鼠标显示
ya.css({ //根据鼠标位置显示图片
top: e.pageY, //设置div的top(纵坐标)
left: e.pageX //设置div的left(横坐标)
});
});
});
$(".previewImg").mouseout(function() { //绑定移出事件,移出隐藏div
ya.hide();
});
});
好了,页面的效果就完成了,下面就要将页面的文件保存到web项目里。
文件保存操作:
1.需要下面红色框框里的jar包,并且将这几个包拷到lib目录下。
2.创建servlet接受请求
(1)设置文件上传的属性
//创建SmartUpload()对象
SmartUpload su = new SmartUpload();
su.setCharset("utf-8");
su.initialize(this.getServletConfig(), request, response);//初始化
//设置单个文件最大值
su.setMaxFileSize(1024*1024*10);
//设置表单所有文件最大值
su.setTotalMaxFileSize(1024*1024*100);
//设置上传文件格式
su.setAllowedFilesList("jpg,png,gif");
(2)创建自定义目录upload保存文件到自定义目录
try {
su.upload();
String typeName = su.getRequest().getParameter("typeName");
if ((typeName != "") && (typeName != null)) {
String houZhuiMing = null;
// 获取并保存文件
for (int i = 0; i < su.getFiles().getCount(); i++) {// 修改文件名
File files = su.getFiles().getFile(i);
houZhuiMing = files.getFileExt();//获取后缀名
String path = "upload\\" + RandomOrderNumber.testP("IG")//这里是一个静态的随机数生成方法
+ "." + houZhuiMing;
icon = path;
files.saveAs(path, su.SAVE_VIRTUAL);
}
文件会保存到tomcat的工作空间,在myeclipse的工作空间是没有文件的。
以上可以都可以做多个文件上传的操作,看懂了就可以在下面扩展了。
放一个多个文件上传的动图:
欢迎留言吐槽。