开发者社区> 技术小胖子> 正文

java uploadify上传图片并预览

简介:
+关注继续查看

前一篇文章可以看到对jquery uploadify的属性的讲解,这里给出具体的java代码实现,代码基于servlet,实现了上传图片并预览的效果,不多说,上代码


index.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<%@ 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
public class uploadifyServlet extends HttpServlet {
     
       private String configPath="d:/image/";
         
      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的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
public class getImg extends HttpServlet {
     
       private String configPath="d:/image/";
         
      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




     本文转自布拉君君 51CTO博客,原文链接:http://blog.51cto.com/5148737/1588035,如需转载请自行联系原作者






版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
springboot之文件上传、图片预览(thymeleaf+layui)
springboot自带图片服务器,但是一般我们都不会用,文件这一块因为灵活性比较高,可能每个公司的都不一样,因此最好还是自己来搞定。 一、思路 1、上传①.
3325 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
19980 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
23523 0
nginx上传模块nginx_upload_module使用
1、安装模块   1 cd /data/software 2 wget http://www.grid.net.ru/nginx/download/nginx_upload_module-2.
1259 0
swfupload 的ASP上传示例代码
swfupload(以下简称su)遇到的主要问题就是,版本不同造成的极大差异, 现在的版本已经到2.1beta。我用的是2.02版,天哪用的是1.xx版。 差异具体体现在: lash_url : ".
848 0
.NET FileUpLoad上传文件
  一.上传扫描件到服务器,自定义创建文件夹(如果存在该文件夹,则无需创建),并判断格式以及文件大小进行保存: 首先创建一个保存按钮事件:      protected void btnSave_Click(object sender, EventArgs e) { ...
906 0
21115
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载