使用 JSP 和 Jquery 上传文件答案

【问题标题】：File upload using JSP and Jquery使用 JSP 和 Jquery 上传文件
【发布时间】：2015-03-10 09:00:27
【问题描述】：

我有一个要求，我需要提交一个包含使用 ajax 异步输入的文件的表单。以下是我编写的代码。但它给了我错误。

Input.jsp：

<script>
function fileUpload()
{
var formData = $('#myform').serialize();
     $.ajax({
            type: "POST",
            url: "second.jsp",
            async: true,
            data: formData,
            contentType: "multipart/form-data",
            processData: false,
            success: function(msg) {
             alert("File has been uploaded successfully");
            },
            error:function(msg) {
                alert("Failed to upload file");
            }
        });
}
</script>
<form name="myform" id="myform" action="#" method="post" enctype="multipart/form-data">
        <table>
            <tr>
                <td>Slide Name :</td>
                <td><input type="text" name="filename"></td>
            </tr>
            <tr>
                <td>Video File :</td>
                <td><input type="file" name="filecontent"></td>
            </tr>
            <tr>
                <td>Some input :</td>
                <td><input type="radio" name="myinput" value="y" >Yes&nbsp;<input type="radio" name="myinput" value="n">No</td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="button" value="Submit" onclick="fileUpload()"></td>
            </tr>
        </table>
    </div>
    </form>

second.jsp

<body>
<%
String fileLocation="D://";
if(ServletFileUpload.isMultipartContent(request)){
                try {
                    List<FileItem> multiparts = new ServletFileUpload(new DiskFileItemFactory()).parseRequest(request);
                        for (FileItem item : multiparts) {
                            if (item.isFormField()) {
                                String fieldName = item.getFieldName();
                                String fieldValue = item.getString();
                            } else {
                                String fieldName = item.getFieldName();
                                String fileName = FilenameUtils.getName(item.getName());
                                InputStream fileContent = item.getInputStream();
                                String name = new File(item.getName()).getName();
                                item.write(
                                          new File(fileLocation + File.separator + name));    
                            }
                        }
                       System.out.println("File Uploaded Successfully");
                    } catch (Exception ex) {
                       System.out.println("File Upload Failed due to " + ex);
                    }
}
%>
</body>

我得到的错误是：我在控制台中收到以下错误

File Upload Failed due to org.apache.commons.fileupload.FileUploadException: the request was rejected because no multipart boundary was found

【问题讨论】：

是否在哪一行提到了错误？用ajax发送表单的原因是什么？
我有一个要求，我需要多次上传多个文件，而不将当前页面的整个响应提交到服务器。所以我只需要使用ajax。关于行号，它只是打印上面的消息，因为我在 catch 块中有一个打印语句

标签： java jquery ajax jsp

【解决方案1】：

我得到以下对我来说工作正常的代码：

function fileUpload()
{
$('#myform').attr('action', 'second.jsp');
    $('#myform').ajaxSubmit({cache:false,success: function a(){
    $('#myform').attr('action', '#');
    }
    });
}

感谢您的回复菲利克斯

【讨论】：

【解决方案2】：

在你的代码中缺少这个来捕获文件：

 // Returns the uploaded File
Iterator iter = files.iterator();

FileItem element = (FileItem) iter.next();

完整的代码应该是这样的。我不会一步完成这么多事情。

boolean isMultipart = ServletFileUpload.isMultipartContent(request);
    if (isMultipart) {
        //Create a factory for disk-based file items
        DiskFileItemFactory factory = new DiskFileItemFactory();
        ServletFileUpload upload = new ServletFileUpload(factory);

        //Console Out Starting the Upload progress.
        System.out.println("\n - - - UPLOAD");

        // List of all uploaded Files
        List files = upload.parseRequest(request);

        // Returns the uploaded File
        Iterator iter = files.iterator();

        FileItem element = (FileItem) iter.next();

而不是 .serialize();

尝试这样做：

var form = document.getElementById('form-id');
var formData = new FormData(form);

【讨论】：

我的示例仅适用于一个文件。您必须使用 for / foreach / while 在列表中才能获得更多。
我仍然得到与上述代码相同的错误，我猜该错误是由于 ajax 方法及其内容类型
尝试在控制台打印元素以检查文件是否已发送。添加这个：// Converts the File into an Input Strem InputStream is; is = element.getInputStream(); System.out.println(is);
不，它没有在控制台上使用输入流打印任何东西
你可以试试 ajax -> async=false 吗？