JavaScript를 사용하여 양식 없이 파일을 업로드하는 방법은 무엇입니까?

때때로 개발자는 JavaScript 양식을 사용하지 않고 파일을 업로드해야 할 수도 있습니다. 일반적으로 사용자로부터 데이터와 파일을 가져오기 위해 양식을 생성하지만, 이번 튜토리얼에서는 양식 없이 사용자로부터 파일을 가져와서 백엔드로 보내는 방법을 알아봅니다.

FormData() 객체 및 Ajax 요청 사용

FormData 개체를 사용하면 양식 데이터를 키-값 쌍으로 저장할 수 있습니다. 변수를 초기화하려면 생성자를 사용해야 합니다. 사용자가 HTML 입력을 사용하여 파일을 업로드하고 해당 파일을 양식 데이터에 저장할 수 있습니다. 그런 다음 양식 데이터를 백엔드로 보낼 수 있습니다.

문법

사용자는 양식을 사용하지 않고 FormData() 객체와 Ajax 요청을 사용하여 파일을 업로드하려면 아래 구문을 따르면 됩니다.

으아아아

위 구문에서는 Append() 메서드를 사용하여 양식 데이터 개체에 파일을 추가합니다. 또한 ajax()를 사용하여 API에 데이터를 보냅니다.

예

아래 예에서는태그를 사용하여 HTML로 파일 입력을 만들었습니다. JavaScript에서는 사용자가 파일을 업로드할 때마다 해당 파일에 액세스하여 form_data 개체에 추가합니다.

이후에는 ajax를 사용하여 POST 요청을 통해 파일을 API로 보냅니다.

으아아아

jQuery를 사용한 간단한 업로드 플러그인

jQuery에는 파일을 API로 보내는 데 사용할 수 있는 간단한 업로드 플러그인이 포함되어 있습니다. 이를 사용하려면 간편 업로드 플러그인의 CDN을

섹션에 추가해야 합니다. 개발자가 애플리케이션을 사용하는 경우 NPM 명령을 사용하여 패키지를 설치할 수 있습니다.

문법

사용자는 jQuery Simple Upload 플러그인을 사용하여 JavaScript를 사용하여 형식 없는 파일을 업로드하려면 다음 구문을 따라야 합니다.

으아아아

위 구문에서는 단순 업로드 플러그인의 simpleUpload() 함수를 호출하여 파일을 업로드합니다.

예

아래 예에서는

섹션에 simpleUpload.min.js 파일에 대한 경로를 추가했습니다. 파일 입력에 "변경" 이벤트를 추가했습니다. 콜백 함수에서는 파일 입력을 참조로 사용하여 simpleUpload() 함수를 호출합니다. 이 객체를 키와 콜백 함수를 값으로 사용하여 simpleUpload() 함수의 두 번째 매개변수로 전달합니다. 으아아아

사용자는 JavaScript에서 양식을 사용하지 않고 파일을 업로드하는 두 가지 방법을 배웠습니다. 첫 번째 메소드에서는 FormData 객체와 ajax() 메소드를 사용했습니다. 두 번째 방법에서는 Jquery의 간단한 업로드 플러그인을 사용했습니다.

위 내용은 JavaScript를 사용하여 양식 없이 파일을 업로드하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!