웹 프론트엔드 JS 튜토리얼 Ajax 비동기 파일 업로드 예제 코드 공유

Ajax 비동기 파일 업로드 예제 코드 공유

Jan 09, 2018 am 09:54 AM
ajax 문서

이 글에서는 주로 Ajax 비동기 업로드 파일 예제 코드를 소개합니다. Ajax에 관심이 있는 친구들이 참고할 수 있을 만큼 매우 훌륭하고 참고할 가치가 있습니다. 실용적인 정보, 작성된 내용이 좋지 않다면 양해 부탁드립니다.


구체적인 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<title>Index</title>
<script>
$(function() {
$(':button').click(function () {
var formData = new FormData();
var file = $("input[type='file']")[0].files[0];
formData.append("files", file);
$.ajax({
url: '/Upload/Upload', //server script to process data
type: 'POST',
//Ajax事件
//beforeSend: beforeSendHandler,
//success: completeHandler,
//error: errorHandler,
// Form数据
data: formData,
//Options to tell JQuery not to process data or worry about content-type
cache: false,
contentType: false,
processData: false
});
});
});
</script>
</head>
<body>
<form enctype="multipart/form-data">
<input name="file" type="file" multiple="multiple" />
<input type="button" value="Upload" />
<input type="text" name="userName" value="ice" />
</form>
</body>
</html>
로그인 후 복사


위 코드는 에디터가 공유한 Ajax 비동기 파일 업로드 예시 코드입니다. 많은 분들께 도움이 되었으면 좋겠습니다! !

관련 권장 사항:

시뮬레이션된 키워드 지능형 일치 검색 효과를 구현하는 Ajax 예제 튜토리얼

Ajax 도메인 간 완벽한 솔루션 예제 공유

로딩 진행률 표시줄을 구현하는 Ajax 메서드

위 내용은 Ajax 비동기 파일 업로드 예제 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Quark Cloud Disk에서 Baidu Cloud Disk로 파일을 전송하는 방법은 무엇입니까? Quark Cloud Disk에서 Baidu Cloud Disk로 파일을 전송하는 방법은 무엇입니까? Mar 14, 2024 pm 02:07 PM

Quark Cloud Disk에서 Baidu Cloud Disk로 파일을 전송하는 방법은 무엇입니까?

0x80004005 오류 코드가 나타나는 경우 수행할 작업 편집기에서 0x80004005 오류 코드를 해결하는 방법을 알려줍니다. 0x80004005 오류 코드가 나타나는 경우 수행할 작업 편집기에서 0x80004005 오류 코드를 해결하는 방법을 알려줍니다. Mar 21, 2024 pm 09:17 PM

0x80004005 오류 코드가 나타나는 경우 수행할 작업 편집기에서 0x80004005 오류 코드를 해결하는 방법을 알려줍니다.

hiberfil.sys 파일이란 무엇입니까? hiberfil.sys를 삭제할 수 있나요? hiberfil.sys 파일이란 무엇입니까? hiberfil.sys를 삭제할 수 있나요? Mar 15, 2024 am 09:49 AM

hiberfil.sys 파일이란 무엇입니까? hiberfil.sys를 삭제할 수 있나요?

파일 경로에서 슬래시와 백슬래시의 다양한 용도 파일 경로에서 슬래시와 백슬래시의 다양한 용도 Feb 26, 2024 pm 04:36 PM

파일 경로에서 슬래시와 백슬래시의 다양한 용도

Linux 시스템의 로그 보기 명령어에 대한 자세한 설명! Linux 시스템의 로그 보기 명령어에 대한 자세한 설명! Mar 06, 2024 pm 03:55 PM

Linux 시스템의 로그 보기 명령어에 대한 자세한 설명!

Ajax를 사용하여 PHP 메소드에서 변수를 얻는 방법은 무엇입니까? Ajax를 사용하여 PHP 메소드에서 변수를 얻는 방법은 무엇입니까? Mar 09, 2024 pm 05:36 PM

Ajax를 사용하여 PHP 메소드에서 변수를 얻는 방법은 무엇입니까?

MySQL에서 .ibd 파일의 역할과 관련 주의사항에 대한 자세한 설명 MySQL에서 .ibd 파일의 역할과 관련 주의사항에 대한 자세한 설명 Mar 15, 2024 am 08:00 AM

MySQL에서 .ibd 파일의 역할과 관련 주의사항에 대한 자세한 설명

Golang의 파일 닫기 모범 사례 Golang의 파일 닫기 모범 사례 Feb 28, 2024 pm 09:09 PM

Golang의 파일 닫기 모범 사례

See all articles