java ajax 文件上传_在HTML5里用Ajax上传文件到Java Servlet

矫情吗；* 2022-11-03 10:53 8阅读 0赞

HTML5带来一个很棒的功能，就是能够使用XMLHttpRequest版本2上传文件。

现代Gecko和WebKit浏览器，包括一个完美的对象参数formdata，允许结合既简单又复杂的表单数据(文本和文件)包含在Ajax请求的对象中。

让我们告诉你如何做到这个。

在这个例子中，我们有两个输入框的表单，一个代表一个简单的文本字段，另一个代表一个文件字段，如下面的代码所示。

Please enter a text

Please select a file

function performAjaxSubmit() \{

var sampleText = document.getElementById("sampleText").value;

var sampleFile = document.getElementById("sampleFile").files\[0\];

var formdata = new FormData();

formdata.append("sampleText", sampleText);

formdata.append("sampleFile", sampleFile);

var xhr = new XMLHttpRequest();

xhr.open("POST","/fileUploadTester/FileUploader", true);

xhr.send(formdata);

xhr.onload = function(e) \{

if (this.status == 200) \{

alert(this.responseText);

\}

\};

\}

正如我们在上面代码中看到，它是一个正常的老XHR的代码，但它有两个差异：

1。在HTML5输入文件的文件属性，这使你能够得到的文件对象。

2。参数formdata对象，其中有一个方法叫做append，允许加入任何形式的数据(文本和文件)的对象。参数formdata对象具有另一大优势，这是Ajax请求“multipart/ form-data”没有任何特殊代码。

现在，让我们继续看Servlet代码(这里用的是Apache Commons File Upload处理multipart表单请求解析)。

public class FileUploader extends HttpServlet \{

protected void doPost(HttpServletRequest request,

HttpServletResponse response)

throws ServletException, IOException \{

String ajaxUpdateResult = "";

try \{

List items = new ServletFileUpload(new DiskFileItemFactory()).parseRequest(request);

for (FileItem item : items) \{

if (item.isFormField()) \{

ajaxUpdateResult += "Field " + item.getFieldName() +

" with value: " + item.getString() + " is successfully read\\n\\r";

\} else \{

String fileName = item.getName();

InputStream content = item.getInputStream();

response.setContentType("text/plain");

response.setCharacterEncoding("UTF-8");

// Do whatever with the content InputStream.

System.out.println(Streams.asString(content));

ajaxUpdateResult += "File " + fileName + " is successfully uploaded\\n\\r";

\}

\}

\} catch (FileUploadException e) \{

throw new ServletException("Parsing file upload failed.", e);

\}

response.getWriter().print(ajaxUpdateResult);

\}

\}

Servlet从请求中简单解析multipart表单，然后构造一个结果消息。

请记住，此代码能与Chrome5和Safari5，Firefox 4的工作，但不幸的是将不能在IE9下工作，因为悲惨的IE9没有参数formdata对象，我将告诉你如何可以在IE9实现相同的行为，“我相信你会不喜欢它，因为它是有点难“。

从这里下载完整的代码。

来源：英文原文          中文编译：IT瘾      转载请保留原文链接

IT瘾于2012年4月14日 上午09时38分03秒发布

\#

发表评论取消回复

表情：

评论列表（有 0 条评论，8人围观）

还没有评论，来说两句吧...

相关阅读

相关 ajax上传文件

关键代码如下： 1、form表单内容 <form id="form1" method="get" enctype="multipart/form-data"

蔚落/ 2024年02月18日 23:34/ 0 赞/ 45 阅读

相关 java ajax 文件上传_在HTML5里用Ajax上传文件到Java Servlet

HTML5带来一个很棒的功能，就是能够使用XMLHttpRequest版本2上传文件。现代Gecko和WebKit浏览器，包括一个完美的对象参数formdata，允许结合既

矫情吗；*/ 2022年11月03日 10:53/ 0 赞/ 9 阅读

相关 ajax 上传文件

<script src="${pageContext.request.contextPath}/jslib/jquery.form.js"></script>

向右看齐/ 2022年09月30日 03:36/ 0 赞/ 234 阅读

相关 AJAX文件上传

通过jQuery Ajax使用FormData对象上传文件字数664 阅读18622 评论14 喜欢15 FormData对象，是可以使用一系列的键值

约定不等于承诺〃/ 2022年09月23日 11:52/ 0 赞/ 222 阅读

相关 ajax上传文件

一般的时候都是用的struts提交表单进行文件上传我做了一个校验，想用ajax进行文件的验证，这时候就需要使用ajax上传文件进行验证首先需要一个js包

ゝ一世哀愁。/ 2022年09月18日 06:58/ 0 赞/ 249 阅读

相关 HTML5中用 jQuery + Ajax 上传文件

　　HTML5 中已经可以用 Ajax 上传文件了，而且代码非常简单，借助 FormData 类即可发送文件数据。 <?php if (isset($_POST['u

小鱼儿/ 2022年07月16日 12:55/ 0 赞/ 178 阅读

相关 Ajax上传文件

![Center][] [Center]: /images/20220713/216f4d21f1aa43e18f434f697468a11c.png

末蓝、/ 2022年07月12日 23:11/ 0 赞/ 310 阅读

相关 ajax 上传文件

使用ajaxFileUpload来上传。参考地址： [http://zhangzhaoaaa.iteye.com/blog/2123021][http_zhangzh

逃离我推掉我的手/ 2022年06月18日 07:24/ 0 赞/ 269 阅读

相关 Ajax上传文件

[通过Ajax方式上传文件，使用FormData进行Ajax请求][Ajax_FormData_Ajax] 目前我做到的程度是可以实现上传多个文件，只是不是一次性选择，

布满荆棘的人生/ 2022年06月11日 08:23/ 0 赞/ 266 阅读

相关 html5+FormData 实现ajax文件上传

大家都知道在html4时代，上传只能使用表单post提交方式，无法使用ajax(XMLHttpRequest )直接进行表单提交。但在HTML 5的概念形成后，W3C开始考虑标

女爷i/ 2021年06月24日 14:34/ 0 赞/ 467 阅读