`

ajax异步文件上传,servlet处理,含demo

 
阅读更多

附件是例子程序，欢迎下载。

 

用到两个jar包

commons-io-xx.jar

commons-fileupload-xx.jar

xx代表版本号

 

新建一个普通的java web工程

 

前端页面jsp代码:

[html] view plaincopy
 
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  7. <title>Ajax File Uploader Plugin For Jquery</title>  
  8. <script type="text/javascript" src="jquery.js"></script>  
  9. <script type="text/javascript" src="ajaxfileupload.js"></script>  
  10. <script type="text/javascript">  
  11.     function ajaxFileUpload() {  
  12.         $("#loading").ajaxStart(function() {  
  13.             $(this).show();  
  14.         }).ajaxComplete(function() {  
  15.             $(this).hide();  
  16.         });  
  17.   
  18.         $.ajaxFileUpload({  
  19.             url : 'upload',// servlet请求路径  
  20.             secureuri : false,  
  21.             fileElementId : 'fileToUpload',// 上传控件的id  
  22.             dataType : 'json',  
  23.             data : {username : $("#username").val()}, // 其它请求参数  
  24.             success : function(data, status) {  
  25.                 if(data.msg) {  
  26.                     alert(data.msg);  
  27.                 }  
  28.             },  
  29.             error : function(data, status, e) {  
  30.                 alert('上传出错');  
  31.             }  
  32.         })  
  33.   
  34.         return false;  
  35.   
  36.     }  
  37. </script>  
  38. </head>  
  39.   
  40. <body>  
  41.     <h1>Ajax文件上传例子,JAVA版</h1>  
  42.     <img id="loading" src="loading.gif" style="display: none;">  
  43.     <form name="form" action="" method="POST" enctype="multipart/form-data">  
  44.         用户名:<input type="text" id="username" name="username"> <br>  
  45.         <input id="fileToUpload" type="file" size="45" name="fileToUpload"  
  46.             class="input">  
  47.         <button class="button" onclick="return ajaxFileUpload();">上传</button>  
  48.     </form>  
  49. </body>  
  50. </html>  


服务器端servlet核心代码:

[java] view plaincopy
 
  1. protected void doGet(HttpServletRequest request,  
  2.             HttpServletResponse response) throws ServletException, IOException {  
  3.         request.setCharacterEncoding("utf-8"); // 设置编码  
  4.         response.setCharacterEncoding("utf-8");  
  5.         response.setContentType("text/html;charset=UTF-8");  
  6.         // 获得磁盘文件条目工厂  
  7.         DiskFileItemFactory factory = new DiskFileItemFactory();  
  8.           
  9.         // 如果没以下两行设置的话，上传大的文件会占用很多内存，  
  10.         // 设置暂时存放的存储室 ,这个存储室,可以和最终存储文件的目录不同  
  11.         /** 
  12.          * 原理 它是先存到 暂时存储室，然后在真正写到 对应目录的硬盘上， 按理来说 当上传一个文件时，其实是上传了两份，第一个是以 .tmp 
  13.          * 格式的 然后再将其真正写到 对应目录的硬盘上 
  14.          */  
  15.         factory.setRepository(new File(TEMP_FOLDER));  
  16.         // 设置 缓存的大小，当上传文件的容量超过该缓存时，直接放到 暂时存储室  
  17.         factory.setSizeThreshold(1024 * 1024);  
  18.   
  19.         // 高水平的API文件上传处理  
  20.         ServletFileUpload upload = new ServletFileUpload(factory);  
  21.           
  22.         try {  
  23.             // 提交上来的信息都在这个list里面  
  24.             // 这意味着可以上传多个文件  
  25.             // 请自行组织代码  
  26.             List<FileItem> list = upload.parseRequest(request);  
  27.             // 获取上传的文件  
  28.             FileItem item = getUploadFileItem(list);  
  29.             // 获取文件名  
  30.             String filename = getUploadFileName(item);  
  31.   
  32.             System.out.println("存放目录:" + PATH_FOLDER);  
  33.             System.out.println("文件名:" + filename);  
  34.   
  35.             // 真正写到磁盘上  
  36.             item.write(new File(PATH_FOLDER, filename)); // 第三方提供的  
  37.                                 // 输出信息,前端页面获取,这里用的json格式             
  38.             PrintWriter writer = response.getWriter();  
  39.               
  40.             writer.print("{");  
  41.             writer.print("msg:\"文件大小:"+item.getSize()+",文件名:"+filename+"\"");  
  42.             writer.print("}");  
  43.               
  44.             writer.close();  
  45.           
  46.         } catch (FileUploadException e) {  
  47.             e.printStackTrace();  
  48.         } catch (Exception e) {  
  49.             e.printStackTrace();  
  50.         }  
  51.   
  52.     }  


别忘了web.xml配置servlet

[html] view plaincopy
 
  1. <servlet>  
  2.         <servlet-name>uploadProcessorServlet</servlet-name>  
  3.         <servlet-class>upload.UploadProcessorServlet</servlet-class>  
  4.     </servlet>  
  5.     <servlet-mapping>  
  6.         <servlet-name>uploadProcessorServlet</servlet-name>  
  7.         <url-pattern>/upload</url-pattern>  
  8.     </servlet-mapping>  
分享到：
| DateConverter does not support default S ...
评论
3 楼 ccwwdd 2016-05-16  
很好用。O(∩_∩)O谢谢分享！！！
2 楼 luanxiyuan 2015-12-01  
sunhao901001 写道
怎么获取其他参数啊，其他参数获取不到

你说的是回调function中没法获取参数吗？只要是writer.print数据符合json的格式，就能够得到。如果不懂json就自己上网了解一下吧
1 楼 sunhao901001 2015-11-27  
怎么获取其他参数啊，其他参数获取不到
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    java做的ajax异步上传 图片或文件的demo

    总的来说，这个"java做的ajax异步上传 图片或文件的demo"涵盖了Java Web开发中的关键概念，包括Ajax通信、文件上传处理、Servlet、以及Eclipse和Tomcat的使用。通过学习和实践这个demo，开发者可以深入了解这些技术...

    ajax异步上传,后台servlet处理源码

    ajax异步上传源码,后台servlet处理 改编自http://www.phpletter.com/Demo/AjaxFileUpload-Demo/ 这个后台是PHP版的,我把它改成了JAVA版的

    Servlet图片批量上传ajax异步上传

    在IT行业中，Web开发是不可或缺的一部分，而Servlet、图片批量上传和Ajax异步技术则是构建高效、用户友好的Web应用的关键技术。以下是对这些知识点的详细说明： **Servlet上传** Servlet是Java EE平台中用于扩展...

    jquery ajax servlet json简单demo

    【Demo流程】在这个"jquery ajax servlet json简单demo"中，我们可以预期以下流程： 1. 客户端（浏览器）的JavaScript代码使用jQuery的AJAX函数发起请求，请求可能包含一些参数，格式化为JSON。 2. 请求被发送到...

    ajax与Servlet，传值Demo

    这个“ajax与Servlet，传值Demo”着重展示了如何利用Ajax实现页面局部更新，同时处理Servlet接收到的Ajax传递的数据，包括解决中文乱码问题。 Ajax的核心在于JavaScript，它允许网页在不重新加载整个页面的情况下与...

    JavaWeb ajax异步自动填充信息

    本示例“JavaWeb ajax异步自动填充信息”是一个典型的Ajax应用，模拟了搜索引擎如百度在用户输入时自动填充建议的功能。 首先，我们需要理解Ajax的工作原理。Ajax的核心是XMLHttpRequest对象，它允许JavaScript在...

    servlet，文件上传，El，分页，AjaxDemo

    2. Servlet处理：接收文件上传请求，处理文件，存储到服务器，并返回确认信息。 3. EL表达式：在JSP页面中使用EL来动态显示上传文件的信息或者分页后的数据列表。 4. 分页功能：通过URL参数传递当前页码和每页数量，...

    ajax提交中文到servlet

    三、Ajax异步提交 1. 使用XMLHttpRequest对象的send()方法发送请求，如果数据是中文，需要先进行URL编码。例如，使用encodeURIComponent()函数对中文字符串进行编码。 2. 对于GET请求，中文参数会附加在URL后面，如...

    【Demo Project】ajaxSubmit+Servlet表单文件上传和下载

    本项目【Demo Project】利用AjaxSubmit结合Servlet技术，提供了一种高效、异步的方式处理文件的上传和下载，提升了用户体验。 一、AjaxSubmit简介 AjaxSubmit是jQuery Form插件中的一个方法，它允许我们在不刷新...

    servlet+mysql+jsp+ajax 注册 登陆 查询 修改 的简单demo

    在这个项目中，"servlet-mysql-demo"可能是一个包含了所有源代码和配置文件的目录，包括Servlet类、JSP页面、CSS样式表、JavaScript脚本以及数据库连接配置文件等。开发人员可以通过解压这个文件，然后在本地环境...

    使用ajax上传文件，显示上传进度demo

    在本文中，我们将深入探讨如何使用Ajax技术在Java后端实现文件上传，并实时显示上传...在后端，我们使用Spring MVC处理文件上传请求，并将文件保存到服务器。这个过程不仅提高了用户体验，还减少了不必要的网络请求。

    easyui+ajax+json+servlet实现用户登录注册简单demo

    这个“easyui+ajax+json+servlet实现用户登录注册简单demo”旨在为初学者提供一个理解这些技术实际应用的平台。 首先，EasyUI是一个基于jQuery的轻量级前端框架，它提供了丰富的UI组件，如表格、表单、对话框等，...

    AjaxServletDemo

    AjaxServletDemo是一个典型的Web开发示例，它演示了如何使用Ajax技术与Servlet进行异步通信，从而实现页面局部更新的功能。在这个项目中，Ajax被用来从客户端获取用户界面的控件内容，然后这些数据被发送到服务器上...

    文件上传和ajax获取json的小示例

    在"uploaddemo"这个压缩包中，可能包含了一个简单的JSP文件上传和AJAX获取JSON数据的示例项目。项目可能包括JSP页面、Servlet类、HTML/JavaScript代码以及数据库相关的配置文件。通过分析和运行这个示例，开发者可以...

    基于Servlet+JSP+Ajax的在线聊天室Demo

    Ajax请求通常由前端JavaScript代码触发，向Servlet发送请求，Servlet处理请求后，返回数据，前端再用这些数据更新DOM，完成局部页面的更新。 **所需Jar包**： 为了运行这个项目，可能需要包含一些必备的Java库，...

    读取EXCEL Demo&Servlet DEMO

    Servlet可以处理文件上传请求，将文件保存到服务器，然后用POI读取。 10. **前端与后端交互**：通过Ajax调用Servlet，实现了前端与后端的无刷新通信。当用户上传Excel文件或触发其他操作时，前端发送请求，后端处理...

    文字过滤（ajax+jquery+servlet）

    【文字过滤技术详解】 在现代Web应用中，用户交互性的增强带来了数据的实时...通过学习这个项目，开发者可以深入理解Ajax的异步通信、jQuery的便利操作以及Servlet在服务器端的业务处理，从而提升自己的Web开发技能。

    jsp/java多文件上传DEMO

    在这个DEMO中，可能会包含处理文件上传的Servlet代码。 5. **安全性**：在实现多文件上传时，安全问题不容忽视。例如，需要限制文件类型和大小，防止恶意用户上传大文件或危险文件。Uploadify可以通过配置项设置...

    jsp上传文件Demo

    虽然这个Demo没有涉及，但实际应用中可以使用Ajax异步上传，配合JavaScript监听上传进度，实时更新页面上的进度条。 总结来说，这个"jsp上传文件Demo"涵盖了文件上传的基本流程，包括前端表单设计、后端Servlet接收...

    文件的上传与下载demo

    3. **异常处理**：在处理文件操作时，应捕获并适当地处理可能抛出的异常，如`IOException`、`FileNotFoundException`等，确保程序的健壮性。 4. **安全性考虑**： - **文件路径安全**：避免使用用户提供的数据来...

Magicbox
Global site tag (gtag.js) - Google Analytics