前一篇文章可以看到对jquery uploadify的属性的讲解,这里给出具体的java代码实现,代码基于servlet,实现了上传图片并预览的效果,不多说,上代码
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!--引入jquery.js-->
<script src="scripts/jquery-1.10.2.min.js"></script>
<!--引入uploadify.js-->
<script src="scripts/jquery.uploadify.min.js" type="text/javascript"></script>
<!--引入uploadify.css-->
<link href="css/uploadify.css" rel="stylesheet" type="text/css" />
<!--引入自己写的css-->
<link href="css/customer.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function() {
$("#upload_org_code").uploadify({
'auto' :true,
'buttonClass':'mybutton',
'buttonCursor':'hand',
'buttonText' : '选择图片',
'fileSizeLimit' : '2MB',
'height' : 27,
'width' : 80,
'fileTypeExts' : '*.jpg;*.jpge;*.gif;*.png',
'fileTypeDesc' :'请选择jpg,jpge,jif,png后缀结尾的图片',
'progressData':'speed',
'queueID':'some_file_queue',
'removeCompleted':false,
'queueSizeLimit':2,
'removeTimeout':1,
'swf' : '${pageContext.request.contextPath}/scripts/uploadify.swf',
<!--这是关键,上传后台处理的servlet地址-->
'uploader' : '${pageContext.request.contextPath}/uploadifyServlet',
'multi' : false,
//加上此句会重写onSelectError方法【需要重写的事件】
'overrideEvents': ['onSelectError', 'onDialogClose','onCancel','onClearQueue'],
'onCancel':function(file){
console.log(file.name);
},
'onClearQueue':function(queueItemCount){
console.log(queueItemCount);
},
'onDestroy':function(){
console.log('destory');
},
'onDialogClose':function(queueData){
console.log(queueData.filesSelected );
console.log(queueData.filesQueued );
},
'onUploadSuccess':function(file,data,response){
$('#' + file.id).find('.data').html('');
console.log('data='+data);
$("#upload_org_code_name").val(data);
<!--这是关键,预览后台处理的servlet地址-->
$("#upload_org_code_img").attr("src","${pageContext.request.contextPath}/getImgServlet?file="+data);
$("#upload_org_code_img").show();
},
//返回一个错误,选择文件的时候触发
'onSelectError':function(file, errorCode, errorMsg){
switch(errorCode) {
case -110:
alert("文件 ["+file.name+"] 大小超出系统限制的" + jQuery('#upload_org_code').uploadify('settings', 'fileSizeLimit') + "大小!");
break;
case -120:
alert("文件 ["+file.name+"] 大小异常!");
break;
case -130:
alert("文件 ["+file.name+"] 类型不正确!");
break;
}
},
});
});
</script>
</head>
<body>
<!--用于图片预览的显示-->
<img style="display: none" id="upload_org_code_img" src="" width="100" height="100"/>
<input type="file" name="upload_org_code" id="upload_org_code"/>
<!--自定义的一个queue-->
<div id="some_file_queue">
</div>
<!--一些操作啦-->
<a href="javascript:jQuery('#upload_org_code').uploadify('upload','*');">上传</a>
<a href="javascript:$('#upload_org_code').uploadify('cancel','*')">取消上传</a>
<a href="javascript:$('#upload_org_code').uploadify('destroy')">destory</a>
</body>
</html>
其中,js中定义了上传处理的uploadifyServlet地址,所以下一步就是编写改servlet了
uploadifyServlet.java
public class uploadifyServlet extends HttpServlet {
private String configPath="d:/p_w_picpath/";
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String ret_fileName = null;//返回给前端已修改的图片名称
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=UTF-8");
PrintWriter out = response.getWriter();
// 文件保存目录路径
String savePath = configPath;
DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
upload.setHeaderEncoding("UTF-8");
try {
List<?> items = upload.parseRequest(request);
Iterator<?> itr = items.iterator();
while (itr.hasNext()) {
DiskFileItem item = (DiskFileItem) itr.next();
String fileName = item.getName();
if(fileName!=null){
ret_fileName = fileName;
}
if (!item.isFormField()) {
try {
File uploadedFile = new File(savePath,fileName);
OutputStream os = new FileOutputStream(uploadedFile);
InputStream is = item.getInputStream();
byte buf[] = new byte[1024];// 可以修改 1024 以提高读取速度
int length = 0;
while ((length = is.read(buf)) > 0) {
os.write(buf, 0, length);
}
// 关闭流
os.flush();
os.close();
is.close();
} catch (Exception e) {
e.printStackTrace();
}
}
}
} catch (FileUploadException e) {
e.printStackTrace();
}
//将已修改的图片名称返回前端
out.print(ret_fileName);
out.flush();
out.close();
}
}
上述代码的意思很简单,将上传的文件放入指定的文件夹,并返回图片的名称。
到此为止,上传就结束了,下面是预览。
在onUploadSuccess中,我们得到了上传成功图片的返回的图片名称,其中我们定义了实现预览效果的后台servlet,getImgServlet
下面给出改servlet的代码
public class getImg extends HttpServlet {
private String configPath="d:/p_w_picpath/";
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String file = request.getParameter("file");
File pic = new File(configPath+file);
FileInputStream fis = new FileInputStream(pic);
OutputStream os = response.getOutputStream();
try {
int count = 0;
byte[] buffer = new byte[1024 * 1024];
while ((count = fis.read(buffer)) != -1)
os.write(buffer, 0, count);
os.flush();
} catch (IOException e) {
e.printStackTrace();
} finally {
if (os != null)
os.close();
if (fis != null)
fis.close();
}
}
}
上述代码很简单,得到传过来的文件名之后,直接发送文件流过去,实现图片显示
具体的项目包地址如下,大家可直接下载运行:
http://yun.baidu.com/share/link?shareid=702477080&uk=2836507213
转载于:https://blog.51cto.com/5148737/1588035