[javascript] Dropzone.js를 사용하여 파일 업로드 시 서버로 추가 데이터를 전송하는 방법은 무엇인가요?

18 Dec 2023

javascript

아래는 Dropzone.js를 사용하여 추가 데이터를 전송하는 예제 코드입니다.

<!DOCTYPE html>
<html>
<head>
  <title>Dropzone.js 예제</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.css" />
</head>
<body>

<form action="/file-upload" id="my-awesome-dropzone" class="dropzone">
  <div class="fallback">
    <input name="file" type="file" multiple />
  </div>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.js"></script>
<script>
  Dropzone.options.myAwesomeDropzone = {
    init: function() {
      this.on("sending", function(file, xhr, formData) {
        // 추가 데이터를 formData에 추가
        formData.append("additionalData", "some value");
      });
    }
  };
</script>

</body>
</html>

위 코드에서는 Dropzone.js의 sending 이벤트를 사용하여 파일이 서버로 전송될 때 additionalData라는 키와 값을 추가하여 formData에 전송하는 방법을 보여줍니다. 이렇게 하면 파일이 업로드될 때 추가 데이터도 함께 전송됩니다.

더 자세한 내용은 Dropzone.js의 공식 문서를 참고하시기 바랍니다. Dropzone.js 공식 문서