Jquery 如何使用JSP/Servlet和Ajax将文件上载到服务器？

我正在创建一个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使用的当前

XMLHttpRequest

版本1开始，无法通过

XMLHttpRequest

使用JavaScript上传文件。常见的解决方法是让JavaScript创建一个隐藏的

，并将表单提交给它，以便创建一个异步执行的印象。这也是大多数jQuery文件上传插件所做的事情，比如（）

假设您的带有HTML表单的JSP被重写，这样当客户端禁用JS时（如您现在所做的…），它就不会被破坏，如下所示：

${uploadError}

然后，在jQuery表单插件的帮助下，这只是一个简单的问题

$（函数（）{
$（“#上传表单”）.ajaxForm({
成功：功能（msg）{
警报（“文件已成功上载”）；
},
错误：函数（msg）{
$（“#上载错误”）.text（“无法上载文件”）；
}
});
});

至于servlet方面，这里不需要做任何特殊的事情。只需以与不使用Ajax时完全相同的方式实现它：

如果

X-Requested-With

头是否等于

XMLHttpRequest

，您只需要在servlet中进行额外检查，这样您就可以知道在客户端禁用JS的情况下（到目前为止，大多数是禁用JS的旧移动浏览器）将返回什么样的响应

---

请注意，相对较新的

XMLHttpRequest

version 2能够使用新的

file

和

FormData

api发送所选文件。另请参见和。

此代码对我来说很好：

$（'#fileUploader'）。在（'change'，uploadFile'）上；
函数上载文件（事件）
{
event.stopPropagation（）；
event.preventDefault（）；
var files=event.target.files；
var data=new FormData（）；
$.each（文件、函数（键、值）
{
数据。追加（键、值）；
});
postFilesData（数据）；
}
函数postFilesData（数据）
{
$.ajax({
url:“你的url”，
键入：“POST”，
数据：数据，
cache:false，
数据类型：“json”，
processData:false，
contentType:false，
成功：函数（数据、文本状态、jqXHR）
{
//成功
},
错误：函数（jqXHR、textStatus、errorshown）
{
console.log（'ERRORS:'+textStatus）；
}
});
}

---

@Monsif的代码工作得很好，如果表单只有文件类型输入，如果表单中还有其他输入，那么它们就会丢失。因此，不必复制每个表单数据并将它们附加到FormData对象，而是可以将原始表单本身提供给构造函数

关于@Monsif的代码和帖子，我给出了以下代码，这些代码对我很有用。我希望它能帮助别人

<script type="text/javascript">
        var files = null; // when files input changes this will be initiliazed.
        $(function() {
            $('#form2Submit').on('submit', uploadFile);
    });

        function uploadFile(event) {
            event.stopPropagation();
            event.preventDefault();
            //var files = files;
            var form = document.getElementById('form2Submit');
            var data = new FormData(form);
            postFilesData(data);
}

        function postFilesData(data) {
            $.ajax({
                url :  'yourUrl',
                type : 'POST',
                data : data,
                cache : false,
                dataType : 'json',
                processData : false,
                contentType : false,
                success : function(data, textStatus, jqXHR) {
                    alert(data);
                },
                error : function(jqXHR, textStatus, errorThrown) {
                    alert('ERRORS: ' + textStatus);
                }
            });
        }
</script>

var files=null；//当文件输入更改时，这将被初始化。
$（函数（）{
$（'form2Submit'）。在（'submit'，uploadFile'）；
});
函数上载文件（事件）{
event.stopPropagation（）；
event.preventDefault（）；
//var files=文件；
var form=document.getElementById（'form2Submit'）；
var数据=新表格数据（表格）；
postFilesData（数据）；
}
函数postFilesData（数据）{
$.ajax({
url:“你的url”，
键入：“POST”，
数据：数据，
cache:false，
数据类型：“json”，
processData:false，
contentType:false，
成功：函数（数据、文本状态、jqXHR）{
警报（数据）；
},
错误：函数（jqXHR、textStatus、errorshown）{
警报（'错误：'+文本状态）；
}
});
}

html代码可以如下所示：

<form id ="form2Submit" action="yourUrl">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br>
<input id="fileSelect" name="fileSelect[]" type="file" multiple accept=".xml,txt">
<br>
  <input type="submit" value="Submit">
</form>

名字：



姓氏：

这个代码对我很有用

使用了commons io.jar和commons file upload.jar以及jQuery表单插件

$（函数（）{
$（“#上传表单”）.ajaxForm({
成功：功能（msg）{
警报（“文件已成功上载”）；
},
错误：函数（msg）{
$（“#上载错误”）.text（“无法上载文件”）；
}
});
});

${uploadError}

希望这能帮助您：您可以使用XMLHttpRequest方法。看这个：@BalusC知道XMLHttpRequest版本1吗？我是说，

newformdata（）

不起作用的地方。。看@BalusC我明白你的意思了：）。。啊，让我开门见山。。我在IE8和IE9上使用了相同的插件，但没有响应，上面说没有传输。。有什么想法吗？@Derek:marc_s没有发布任何东西。如果你指的是Sameera Madushanka的答案，那么请注意他发布了一个侏罗纪方法。自2009年（十年前！）以来，他的方法不再必要了。我回答中题为“如何使用JSP/Servlet将文件上载到服务器？”的链接显示了使用

HttpServletRequest\getParts（）

的最新方法。下一次，请在错过重要信息之前阅读答案中代码片段的文本和链接。感谢您提供一个服务器端Java代码示例来阅读本文。大多数帖子只显示Javascript，但Java中的处理与大多数帖子不同。

<script type="text/javascript">
        var files = null; // when files input changes this will be initiliazed.
        $(function() {
            $('#form2Submit').on('submit', uploadFile);
    });

        function uploadFile(event) {
            event.stopPropagation();
            event.preventDefault();
            //var files = files;
            var form = document.getElementById('form2Submit');
            var data = new FormData(form);
            postFilesData(data);
}

        function postFilesData(data) {
            $.ajax({
                url :  'yourUrl',
                type : 'POST',
                data : data,
                cache : false,
                dataType : 'json',
                processData : false,
                contentType : false,
                success : function(data, textStatus, jqXHR) {
                    alert(data);
                },
                error : function(jqXHR, textStatus, errorThrown) {
                    alert('ERRORS: ' + textStatus);
                }
            });
        }
</script>

<form id ="form2Submit" action="yourUrl">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br>
<input id="fileSelect" name="fileSelect[]" type="file" multiple accept=".xml,txt">
<br>
  <input type="submit" value="Submit">
</form>