JSP/Servlet 및 Ajax를 사용하여 서버에 파일을 업로드하려면 어떻게 해야 합니까?

JSP/Servlet 및 Ajax를 사용하여 서버에 파일을 업로드하려면 어떻게 해야 합니까?

JSP/서블릿 웹 애플리케이션을 만들고 있는데, Ajax를 통해 서블릿에 파일을 업로드하고 싶습니다.제가 이걸 어떻게 해야 할까요?저는 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");
        }
    });
});

하지만 파일 내용을 보내지 않는 것 같습니다.

요점은, 현재 시점에서.XMLHttpRequestjQuery에서 사용하는 버전 1은 자바스크립트를 사용하여 파일을 업로드할 수 없습니다.XMLHttpRequest일반적인 해결 방법은 JavaScript가 숨김을 생성하도록 하는 것입니다.<iframe>대신 양식을 제출하여 비동기적으로 발생하는 인상을 생성합니다.이는 jQuery Form 플러그인(예: jQuery Form 플러그인)과 같은 대부분의 jQuery 파일 업로드 플러그인이 수행하는 작업이기도 합니다.

아래와 같이 클라이언트가 JavaScript를 비활성화했을 때 손상되지 않도록 HTML 양식을 사용하여 JSP를 다시 작성한다고 가정합니다.

<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>

그러면 jQuery 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>

서블릿 쪽은 여기서 특별한 일을 할 필요가 없습니다.Ajax를 사용하지 않을 때와 동일한 방식으로 구현: JSP/Servlet을 사용하여 서버에 파일을 업로드하려면 어떻게 해야 합니까?

서블릿에서 추가 체크만 하면 됩니다.X-Requested-With헤더가 같음XMLHttpRequest클라이언트가 JavaScript를 사용하지 않도록 설정한 경우 반환할 응답의 종류를 알 수 있습니다(현재는 대부분 JavaScript를 사용하지 않도록 설정한 이전 모바일 브라우저).

if ("XMLHttpRequest".equals(request.getHeader("X-Requested-With"))) {
    // Return an Ajax response (e.g. write JSON or XML).
} else {
    // Return a regular response (e.g. forward to JSP).
}

참고로 비교적 새로운 것은XMLHttpRequest버전 2는 새 파일을 사용하여 선택한 파일을 보낼 수 있습니다.File그리고.FormDataAPI. HTML5 파일을 Java Servlet으로 끌어다 놓기 및 XMLHttpRequest를 통해 멀티파트로 파일 보내기를 참조하십시오.

Monsif의 코드는 폼에 파일 형식 입력만 있으면 잘 작동합니다.파일 형식 이외의 다른 입력이 있으면 해당 입력이 손실됩니다.따라서 각 양식 데이터를 복사하여 FormData 개체에 추가하는 대신 원래 양식 자체를 생성자에게 제공할 수 있습니다.

<script type="text/javascript">
        var files = null; // when files input changes this will be initialised.
        $(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>

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>

$('#fileUploader').on('change', uploadFile);


function uploadFile(event)
    {
        event.stopPropagation(); 
        event.preventDefault(); 
        var files = event.target.files; 
        var data = new FormData();
        $.each(files, function(key, value)
        {
            data.append(key, value);
        });
        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)
        {
            //success
        },
        error: function(jqXHR, textStatus, errorThrown)
        {
            console.log('ERRORS: ' + textStatus);
        }
        });
    }

<form method="POST" enctype="multipart/form-data">
    <input type="file" name="file" id="fileUploader"/>
</form>

이 코드는 저에게 효과가 있습니다.

Commons IO의 io.jar, Commons 파일 upload.jar 및 jQuery 양식 플러그인을 사용했습니다.

<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>

<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>

 boolean isMultipart = ServletFileUpload.isMultipartContent(request);

 if (isMultipart) {
     // Create a factory for disk-based file items
     FileItemFactory factory = new DiskFileItemFactory();

     // Create a new file upload handler
     ServletFileUpload upload = new ServletFileUpload(factory);

     try {
         // Parse the request
         List items = upload.parseRequest(request);
         Iterator iterator = items.iterator();
         while (iterator.hasNext()) {
             FileItem item = (FileItem) iterator.next();
             if (!item.isFormField()) {
                 String fileName = item.getName();
                 String root = getServletContext().getRealPath("/");
                 File path = new File(root + "../../web/Images/uploads");
                 if (!path.exists()) {
                     boolean status = path.mkdirs();
                 }

                 File uploadedFile = new File(path + "/" + fileName);
                 System.out.println(uploadedFile.getAbsolutePath());
                 item.write(uploadedFile);
             }
         }
     } catch (FileUploadException e) {
         e.printStackTrace();
     } catch (Exception e) {
         e.printStackTrace();
     }
 }

언급URL : https://stackoverflow.com/questions/6914152/how-can-i-upload-files-to-a-server-using-jsp-servlet-and-ajax