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

最新推荐文章于 2023-03-10 11:36:13 发布
最新推荐文章于 2023-03-10 11:36:13 发布
阅读量821 收藏 1
点赞数
分类专栏： js 文章标签： javascript ajax

ajax上传组件源自于http://www.phpletter.com/Demo/AjaxFileUpload-Demo/,用的jquery

不过它服务器端用的是php,原理都是一样的,我改成了java版的

本文最下方有完整demo下载

 

用到两个jar包

commons-io-xx.jar

commons-fileupload-xx.jar

xx代表版本号

 

新建一个普通的java web工程

 

前端页面jsp代码:

[html]  view plain copy
  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 plain copy
  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 plain copy
  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>  


 

demo下载地址 : 点击进入

JAVA_Maven
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax异步文件上传,servlet处理
07-06
ajax异步文件上传,servlet处理
Ajax+Servlet超详细实现文件上传
w13346019869的博客
09-28 880
废话不多说，代码都有注释 maven: <dependency> <groupId>javax.servlet</groupId> <artifactId>servlet-api</artifactId> <version>2.5</version> </dependency> <!--文
Ajax+Servlet文件上传(带进度条)
weixin_40426166的博客
12-15 744
最新项目有个需求，需要文件上传并带上上传进度条。 大致步骤为： （1）用户在标签中选择文件，并点击提交按钮。 <input id="selectFile" type="file" name="file" value="选择文件"> （2）点击按钮触发js函数，函数中获取用户提交的文件，并包装新建的FormData 对象中。 //获取文件名称 function upload(){ //获取文件名称 var fileName = getFileName($("#sele
ajax上传文件及servlet接收
三毛村滴雪鱼粉的博客
11-20 1148
ajax上传文件及servlet接收 html <div class="form-group"> <label class="col-sm-2 control-label"><span style="color:red">*</span>附件上传：</label> ...
servlet 文件上传 ajax,servlet上传 前端实现
weixin_35550400的博客
08-06 292
项目中很多地方都用到上传，这里做一个demo，还带进度条package util.upload;import java.io.File;import java.io.IOException;import java.text.SimpleDateFormat;import java.util.Date;import java.util.Iterator;import java.util.List;i...
ajax实现文件上传以及后台servlet中的处理总结
超超玄著
12-14 6206
首先分享当时查找到的资源(10个jquery ajax文件上传插件，有的插件商用会收费，注意版权)：http://superdit.com/2010/06/29/10-jquery-ajax-file-uploader-plugins/ 当时自己的需求是一次上传多个图片以及其他表单输入数据，经过对每个插件的试用最后选择了第十个插件也就是jqupload:http://jqframework.co
Ajax异步文件上传与NodeJS express服务端处理
10-20
本文主要介绍了Ajax异步文件上传与NodeJS express服务端处理的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
SpringMVC+Ajax异步文件上传
07-30
SpringMVC+Ajax异步文件上传+短视频背景+a标签绑定文件域
ajax异步上传文件实现
05-15
ajax异步上传文件实现，主要是使用h5的技术，大家可以试试看
Servlet + Ajax 实现带进度条的文件上传
我与风来
01-30 1283
需要的额外jar包有 commons-fileupload-1.2.2.jar + commons-io-2.0.1.jar 最终效果图： 原理： 服务器在处理上传文件的同时，将上传的进度信息列如文件总长度，已上传多少等写入 Session 中。客户端浏览器利用 Ajax 技术再从 Session 中获取上传进度信息，并实时显示。 分别介绍实现带进度条的文件上传所需要的类，并附上各个类的全部
ajax 文件上传与Servlet获取数据
weixin_44052919的博客
09-21 174
ajax 文件上传与Servlet获取数据 function upload() { var type = "file"; var formData = new FormData(); //文件上传 formData.append(type,$("#upfile")[0].files[0]); formData.append("mname",$("input[name='mname']").val()); formData.append("mintr",$("input[name
ajax+servlet实现文件上传
qq_38046742的博客
04-02 2259
用ajax实现文件上传需要两个jar包 html代码 图片上传 js代码（需要添加jquery依赖） servlet代码 //文件上传 public void uploadFile(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { reque...
ajax上传文件到servlet
while(True): print('adorable')
08-21 476
js $(function() { // js判断文件大小 function findSize(field_id) { let fileInput = $("#"+field_id)[0]; let byteSize = fileInput.files[0].size; return ( Math.ceil(byteSize / 1024 / 1024) ); // Size returned in MB. } //.
ajax+servlet实现向服务端上传文件
m0_37786726的博客
01-28 2871
客户端代码： maicaijian hello world                            //action的服务URL改成你自己的             分段读取文件：                                             /* * 分段读取文件为blob ，并使用a
ajax formData 上传文件，Servlet 获取文件和参数的方式
风间琉璃c
03-10 2140
Content-Type="application/x-www-form-urlencoded" 时，可以直接使用request.getParamter()获取参数。这里contentType设置为false就行，似乎会默认转为：multipart/form-data。公司项目框架比较老，遇到一个上传文件的问题，记录一下解决方式。将requset转换一次即可通过。如果参数中不传文件，但是。如果参数中不传文件，即。
Servlet + Ajax 实现异步上传文件（图片）
一只程序猿的博客
04-27 735
Html： <form id="avatarForm" enctype="multipart/form-data" method="post"> <img id="avatar" onclick="chooseAvatar()" title="点击上传头像" class="avatar" src="image/avatar.jpg"> <input id="loadAvatar" name="loadAvatar" type="file"
使用idea 中servlet 3.1 的ajax方式上传文件
dreamupyan的博客
03-20 362
1.前提条件 servlet3.1以上 maven依赖 <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>3.1.0</version> <scope>provided</scope> </dependency>
通过ajaxFileUpload异步请求上传文件（ajaxFileUpload+servlet实现文件上传下载）
雾林小妖的博客
09-01 2222
1、最终效果 实现选择图片（此处以图片为例，支持所有类型文件的上传），选择之后将选择的图片在页面中显示出来，点击上传，可以将文件上传到指定的地址中，上传成功后在当前页面自动显示下载标签。 源码下载地址：链接：https://pan.baidu.com/s/17G63S9rkfFIfGBqwCwUHaA 提取码：52b7 2、技术结构 eclipse+servlet+ajaxFileUpload+windows 3、将文件上传下载依赖的包及js文...
使用原生AJAX完成任意异步交互效果servlet部分
最新发布
04-01
假设我们要完成一个简单的异步交互效果：点击按钮后，从服务器获取一条随机的名言警句并在页面上显示。下面是使用原生AJAX和Java Servlet实现该效果的代码。 1. 创建一个Java Servlet类，名为QuoteServlet，用于处理AJAX请求并返回名言警句。 ```java import java.io.IOException; import java.io.PrintWriter; import java.util.Random; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class QuoteServlet extends HttpServlet { private static final long serialVersionUID = 1L; private String[] quotes = { "The greatest glory in living lies not in never falling, but in rising every time we fall.", "The way to get started is to quit talking and begin doing.", "Your time is limited, don't waste it living someone else's life. Don't be trapped by dogma – which is living with the results of other people's thinking.", "If life were predictable it would cease to be life, and be without flavor.", "If you look at what you have in life, you'll always have more. If you look at what you don't have in life, you'll never have enough.", }; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/plain"); PrintWriter out = response.getWriter(); out.print(getRandomQuote()); out.flush(); } private String getRandomQuote() { Random random = new Random(); int index = random.nextInt(quotes.length); return quotes[index]; } } ``` 2. 在web.xml中配置Servlet，使其能够被访问。 ```xml <servlet> <servlet-name>QuoteServlet</servlet-name> <servlet-class>QuoteServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>QuoteServlet</servlet-name> <url-pattern>/quote</url-pattern> </servlet-mapping> ``` 3. 在HTML页面中添加一个按钮和一个用于显示随机名言警句的文本框。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Random Quote Generator</title> </head> <body> <h1>Random Quote Generator</h1> <button id="get-quote">Get a quote</button> <br><br> <textarea id="quote-text" rows="5" cols="60" readonly></textarea> </body> </html> ``` 4. 使用JavaScript代码监听按钮点击事件，并使用XMLHttpRequest对象从服务器获取名言警句。 ```javascript var button = document.getElementById("get-quote"); var quoteText = document.getElementById("quote-text"); button.addEventListener("click", function() { var xhr = new XMLHttpRequest(); xhr.open("GET", "quote", true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { quoteText.value = xhr.responseText; } }; xhr.send(); }); ``` 以上就是使用原生AJAX完成任意异步交互效果的完整代码。当用户点击“Get a quote”按钮时，JavaScript代码会向服务器发送一个AJAX请求，并在获取到响应后将随机名言警句显示在文本框中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值