我正在创建一个JSP / Servlet Web应用程序,我想通过Ajax将文件上传到Servlet.我该怎么做呢?我正在使用jQuery.
我已经做到了这一点:
<form class="upload-Box"> <input type="file" id="file" name="file1" /> <span id="upload-error" class="error" /> <input type="submit" id="upload-button" value="upload" /> </form>
有了这个jQuery:
$(document).on("#upload-button","click",function() { $.ajax({ type: "POST",url: "/Upload",async: true,data: $(".upload-Box").serialize(),contentType: "multipart/form-data",processData: false,success: function(msg) { alert("File has been uploaded successfully"); },error:function(msg) { $("#upload-error").html("Couldn't upload file"); } }); });
解决方法
到目前为止,由jQuery使用的当前XMLHttpRequest版本1,无法使用JavaScript通过XMLHttpRequest上传文件.常见的解决方法是让JavaScript创建一个隐藏的< iframe>并将表单提交给它,以便创建其异步发生的展示.这也正是大多数jQuery文件上传插件正在做的事情,如
jQuery Form plugin(
example here).
假设您的HTML表单的JSP以这样的方式重写,以便当客户端禁用JS(如现在…)时不会损坏,如下所示:
<form id="upload-form" class="upload-Box" action="/Upload" method="post" enctype="multipart/form-data"> <input type="file" id="file" name="file1" /> <span id="upload-error" class="error">${uploadError}</span> <input type="submit" id="upload-button" value="upload" /> </form>
<script src="jquery.js"></script> <script src="jquery.form.js"></script> <script> $(function() { $('#upload-form').ajaxForm({ success: function(msg) { alert("File has been uploaded successfully"); },error: function(msg) { $("#upload-error").text("Couldn't upload file"); } }); }); </script>
对于servlet方面,这里不需要特别的东西.只需实现它与使用Ajax:How to upload files to server using JSP/Servlet?时的方式完全相同
如果X-Requested-With标头等于XMLHttpRequest,那么您只需要对servlet进行额外的检查,以便您了解客户端禁用JS的情况下如何返回什么样的响应(至此,大多数是早期的移动浏览器,禁用JS).
if ("XMLHttpRequest".equals(request.getHeader("X-Requested-With"))) { // Return ajax response (e.g. write JSON or XML). } else { // Return regular response (e.g. forward to JSP). }
请注意,相对较新的XMLHttpRequest版本2能够使用新的File和FormData API发送选定的文件.另见HTML5 File Upload to Java Servlet和sending a file as multipart through xmlHttpRequest.
原文地址:https://www.jb51.cc/jquery/180192.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。