자바스크립트 및 양식 양식 고급 학습
서문
이전 글에서는 폼을 이용하여 앞, 뒤 데이터의 상호작용에 대해 이야기한 적이 있는데, 폼에서 브라우저와 서버 간의 연결에 대해 몇 가지 설명한 것 같습니다. 형식을 마스터했지만 현실은 잔혹합니다. 최근 프로젝트에서 이전 기사에서 방금 클릭한 형식에 대한 많은 지식이 있음을 발견했습니다. 이 컨텐츠는 파일업로드 등 꽤 많은 곳에서 사용됩니다.
1. FormData
이전 글에서 폼을 정리하는 방법은 jquery의 serializeArray 함수를 사용하는 것이라고 언급했는데, 이 방법은 input[type="file"]에는 유효하지 않습니다. 파일의 내용을 양식에 통합할 수 없다고 합니다. 관련 문제는 jquery 공식 이슈(https://bugs.jquery.com/ticket/2656)를 참조하세요. 설명은 다음과 같습니다.
직렬화 메소드는 파일의 내용을 가져올 수 없으므로 파일 양식 필드를 직렬화해야 하는 이유를 이해할 수 없습니다. Ajax 파일 중 하나를 사용해야 합니다. 플러그인을 업로드하면 AJAX를 통해 콘텐츠를 얻을 수 있습니다.
그럼 플러그인을 사용하지 않고도 제출된 양식을 얻을 수 있을까요? 당연하죠!
1.1. FormData의 역할
저희가 소개하고 싶은 FormData입니다. FormData의 MDN 설명에 따르면:
FormData 인터페이스는 필드와 값을 나타내는 키-값 쌍을 작성하는 간단한 방법을 제공하며 `XMLHttpRequest.send를 통해 쉽게 전달될 수 있습니다. ()`가 서버로 전송되었습니다. 양식의 인코딩 유형이 `multipart/form-data`로 설정된 것과 동일한 형식을 사용합니다.
`entries()` 대신 `for...of`를 사용하여 FormData 객체를 탐색할 수 있습니다. `for (var p of myFormData)`는 ` for (var p of myFormData.entries() )`
이 설명을 통해 최소한 두 가지 사항을 이해할 수 있었습니다.
FormData는 multipart/form을 처리하는 데 사용할 수 있습니다. -데이터 인코딩 유형 양식 일반적으로 input[type="file"];
FormData의 필드는...in을 통해 확인할 수 있습니다. (이 개체는 브라우저에서 console.log를 사용하여 인쇄할 수 없습니다.)
그러면 일부 어린이는 분명히 다음과 같이 묻습니다.
사용하지 않습니까? FormData를 사용하여 input[type="file"] 없이 양식을 제출할 수 있습니까?
FormData를 사용하여 input[type="file"] 없이 x-www-form-urlencoded 인코딩 유형으로 양식을 제출하는 경우 어떻게 되나요?
FormData를 사용하지 않는 경우 input[type="file"]로 양식을 제출할 수 없나요?
그런 다음 데모를 사용하여 이 두 가지 문제를 설명합니다.
네, 현재 인코딩 유형은 양식 제출 방법인 multipart/form-data입니다. 대략 다음과 같습니다.
이 인코딩 유형 형식이 다르다는 것을 알 수 있습니다. 서버 측에서 express4 이상을 사용하는 경우 이러한 유형의 요청을 처리하기 위해 추가 미들웨어를 설치해야 합니다. 그렇지 않으면 req.body, req.param 및 req.query에서 양식 데이터를 찾을 수 없습니다. 이에 대해서는 나중에 논의하겠습니다. 그렇다면 우리는 여전히 이 방법을 사용하여 간단한 양식을 제출하는 것을 옹호하지 않는 이유가 있습니다(대부분의 웹사이트가 이에 해당합니다).
우리가 제출한 양식이 단 몇 글자에 불과하다는 사실을 발견하셨을 것입니다. 이러한 경계로 인해 양식 데이터가 더 커집니다. 즉, 가장 효율적인 바이너리 인코딩이라도 양식 데이터를 MIME 헤더에 직접 쓰는 데 걸리는 시간보다 더 오래 걸립니다.
팁: 그러나 x-www-form-urlencoded는 영숫자가 아닌 문자를 처리하는 데 어려움을 겪습니다. 왜냐하면 브라우저가 영숫자가 아닌 문자를 %HH로 변환하기 때문입니다. 즉, 영숫자가 아닌 모든 문자는 %HH로 변환됩니다. 영숫자 문자는 3바이트로 대체됩니다. 이는 양식이 매우 길면 매우 불리하므로 multipart/form-data가 나타납니다.
두 번째 질문에 대답하려면 서버(express4)에서 req.body를 볼 수 있습니다.
{ '------ -WebKitFormBoundary5Kj2oSfHZKrZjYjsrnContent -처리: 양식-데이터; 이름': '"사용자"rnrnddrn------WebKitFormBoundary5Kj2oSfHZKrZjYjsrnContent-처리: 양식-데이터; 이름="email"rnrndddrn------WebKitFormBoundary5Kj2oSfHZKrZjYjs- -rn' }
코드 복사
보세요, 서버에 어떻게 파싱을 요청하나요? ? ? 이것은 나 자신에게 문제를 일으키고 있습니다.
FormData의 유령을 사용하지 않는 경우 순수 AJAX를 사용하여 제출할 수도 있습니다. 자세한 내용은 https://developer.mozilla.org/en-US/를 참조하세요. docs/Web/API/XMLHttpRequest/ XMLHttpRequest 사용#양식 제출 및 파일 업로드
1.2 결론
요약하면, input[type="file"]을 포함하거나 여러 개를 포함하는 양식을 사용할 때 영숫자가 아닌 문자 양식을 제출하려면 FormData를 사용해야 하며 인코딩 유형은 multipart/form-data여야 합니다. 그러면 대략적으로 사용되는 예는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>testing form group</title>
<script type="text/JavaScript" src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script type="text/JavaScript">
function onSubmit(){
var myForm = document.getElementById('form');
var formData = new FormData(myForm);
for (var p of formData){
console.log(p);
}
$.ajax({
type: 'POST',
url: '/get',
data: formData,
dataType: 'json',
processData: false,
contentType: false,
success: function(data){console.log(data)},
error: function(jqXHR){console.log(jqXHR)},
})
}
</script>
</head>
<body>
<form action="" method="post" name='info' id='form'>
<input type="text" name="user" />
<input type="text" name="email" />
<input type="file" name="file" />
<input type="file" name="file1" />
</form>
<button type="button" name='submit' onclick="onSubmit()">提交</button>
</body>
</html>참고
$.ajax는 jquery가 데이터를 추가로 처리하지 못하도록 processData: false 및 contentType: false로 구성됩니다.
processData( 기본값: true)
유형: 부울
기본적으로 data 옵션을 통해 전달된 데이터가 객체인 경우(기술적으로 말하면 문자열이 아닌 한) 처리되어 기본 콘텐츠 유형 "application/x-www-form-urlencoded"와 일치하도록 쿼리 문자열로 변환됩니다. 변환하고 싶지 않은 DOM 트리 정보나 기타 정보를 보내려면 false로 설정하세요.
1.3, FormData API
FormData.append(): 기존 키에 새 값을 추가하거나 새 키를 추가합니다.
FormData.delete(): 키-값 쌍 삭제
FormData.entries(): 개체
FormData에서 키-값 쌍을 순회할 수 있도록 반복자를 반환합니다. (): 주어진 키의 첫 번째 값을 반환
FormData.getAll(): 주어진 키의 모든 값의 배열을 반환
FormData.has(): FormData 객체는 지정된 키-값 쌍을 사용합니다.
FormData.keys(): 모든 키-값 쌍의 키 반복을 허용하는 반복자를 반환합니다.
FormData.set(): 수정합니다. 기존 키 또는 새 키-값 쌍 추가
FormData.values(): 모든 키-값 쌍의 값을 순회할 수 있도록 반복자를 반환합니다
2. input[type="file"]
이러한 유형의 입력에 대해 언급해야 할 몇 가지 사항이 있습니다. 그렇지 않으면 다음에 잊어버릴 것입니다:
여러 속성 사용은 한 번에 여러 파일을 선택할 수 있으며, 수락 속성을 사용하여 해당 MIME 유형을 실행합니다.
$(element).files는 업로드된 파일의 이름과 업로드된 파일 수(.name 및 길이)를 가져올 수 있습니다.
파일을 업로드할 때 파일 이름이나 접미사를 확인해야 하는 경우가 있는데 이때 xxx - 형식을 확인하면 정규식이 유용합니다. vx.x.{json|yaml}(예: bower-v0.1.json) 파일에서 사용되는 정규식은 다음과 같습니다.
var reg = /^\w+\-v\d+\.{1}\d+\.(json|yaml)$/i;
/*Check if the user has not selected uploaded file*/
if ($(Element).val() === ''){
finalRes.delete('file');
} else {
var fileCount = $(Element)[0].files.length;
for (var i = 0; i < fileCount; i++) {
if (reg.test($(Element)[0].files[i].name )){
console.log('match');
}else{
alert('上传的文件名格式不正确');
return;
}
}
} 그런 다음 접미사를 제거하면 바꾸기를 사용할 수 있습니다. (/.(json|yaml)$/, '') 접미사를 제거합니다. 4. 양식을 지우는 좋은 기능은 다음과 같습니다.
function clearAllFields(){
$(':input','#project-info')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
}
$(element)는 업로드한 파일의 입력 태그를 나타냅니다.
finalRes는 새 FormData 이후의 양식 값입니다.
3. Express 서버 측 처리
Express4.x 이후 이동 미들웨어가 많기 때문에 multipart/form-data 인코딩 유형이 있는 양식을 처리하려면 직접 설치해야 합니다. 그러한 패키지가 많이 있으며 저는 다자간 미들웨어를 사용하기로 결정했습니다. 구체적인 사용 방법은 공식 홈페이지(https://github.com/expressjs/node-multiparty)를 참고하세요.
이 미들웨어를 사용하는 방법에는 두 가지가 있습니다.
이벤트 청취 양식 사용
콜백 양식 사용
프로젝트에서는 콜백 형식을 사용합니다.
router.post('/get', function(req, res, next) {
var form = new multiparty.Form();
form.parse(req, function(err, fields, files) {
if (fields === undefined || files === undefined){
console.log('client send empty data in posting new project');
return res.status(200).json({err:"请求数据为空，请重新提交", status:'failure'});
}
console.log(fields, files);
console.log('Upload completed!');
});
});
파일의 필드와 필드는 양식에 제공한 이름에 따라 구성됩니다. 첫 번째 섹션의 end 코드를 입력하면 이때 결과는 다음과 같습니다.
{ user: [ 'test' ], email: [ 'test1' ] }
{ file:
[ { fieldName: 'file',
originalFilename: 'test.html',
path: '/home/private/test/QForTTWBipWSPSTpKsUGlRHE.html',
headers: [Object],
size: 876 } ],
file1:
[ { fieldName: 'file1',
originalFilename: 'test1.html',
path: '/home/private/test/aT5T2B_pkkxEVv5OUzjjCxIB.html',
headers: [Object],
size: 558 } ] }이때 공식 홈페이지 설명에 따르면 기본 파일이 기본 폴더에 업로드되어 있습니다. 초기화 중에 uploadDir이 구성되지 않은 경우 시스템의 os.tmpdir()에 업로드됩니다.
이벤트 유형 구현도 유사하며, 공식 홈페이지에서 제공되는 데모를 참고하시면 됩니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7549
15
1382
52
83
11
58
19
22
90
WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법
Dec 17, 2023 pm 02:54 PM
WebSocket 및 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 소개: 지속적인 기술 개발로 음성 인식 기술은 인공 지능 분야의 중요한 부분이 되었습니다. WebSocket과 JavaScript를 기반으로 한 온라인 음성 인식 시스템은 낮은 대기 시간, 실시간, 크로스 플랫폼이라는 특징을 갖고 있으며 널리 사용되는 솔루션이 되었습니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법을 소개합니다.
WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술
Dec 17, 2023 pm 05:30 PM
WebSocket과 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 서론: 인터넷 기술의 급속한 발전과 함께 실시간 모니터링 시스템이 다양한 분야에서 널리 활용되고 있다. 실시간 모니터링을 구현하는 핵심 기술 중 하나는 WebSocket과 JavaScript의 조합입니다. 이 기사에서는 실시간 모니터링 시스템에서 WebSocket 및 JavaScript의 적용을 소개하고 코드 예제를 제공하며 구현 원칙을 자세히 설명합니다. 1. 웹소켓 기술
JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법
Dec 17, 2023 pm 12:09 PM
JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 소개: 인터넷의 대중화와 기술의 발전으로 점점 더 많은 레스토랑에서 온라인 주문 서비스를 제공하기 시작했습니다. 실시간 온라인 주문 시스템을 구현하기 위해 JavaScript 및 WebSocket 기술을 사용할 수 있습니다. WebSocket은 TCP 프로토콜을 기반으로 하는 전이중 통신 프로토콜로 클라이언트와 서버 간의 실시간 양방향 통신을 실현할 수 있습니다. 실시간 온라인 주문 시스템에서는 사용자가 요리를 선택하고 주문을 하면
WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법
Dec 17, 2023 am 09:39 AM
WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법 오늘날의 디지털 시대에는 점점 더 많은 기업과 서비스에서 온라인 예약 기능을 제공해야 합니다. 효율적인 실시간 온라인 예약 시스템을 구현하는 것이 중요합니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. WebSocket이란 무엇입니까? WebSocket은 단일 TCP 연결의 전이중 방식입니다.
JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축
Dec 17, 2023 pm 05:13 PM
JavaScript 및 WebSocket: 효율적인 실시간 일기 예보 시스템 구축 소개: 오늘날 일기 예보의 정확성은 일상 생활과 의사 결정에 매우 중요합니다. 기술이 발전함에 따라 우리는 날씨 데이터를 실시간으로 획득함으로써 보다 정확하고 신뢰할 수 있는 일기예보를 제공할 수 있습니다. 이 기사에서는 JavaScript 및 WebSocket 기술을 사용하여 효율적인 실시간 일기 예보 시스템을 구축하는 방법을 알아봅니다. 이 문서에서는 특정 코드 예제를 통해 구현 프로세스를 보여줍니다. 우리
간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법
Jan 05, 2024 pm 06:08 PM
JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용
자바스크립트에서 insertBefore를 사용하는 방법
Nov 24, 2023 am 11:56 AM
사용법: JavaScript에서 insertBefore() 메서드는 DOM 트리에 새 노드를 삽입하는 데 사용됩니다. 이 방법에는 삽입할 새 노드와 참조 노드(즉, 새 노드가 삽입될 노드)라는 두 가지 매개 변수가 필요합니다.
JavaScript 및 WebSocket: 효율적인 실시간 이미지 처리 시스템 구축
Dec 17, 2023 am 08:41 AM
JavaScript는 웹 개발에 널리 사용되는 프로그래밍 언어인 반면 WebSocket은 실시간 통신에 사용되는 네트워크 프로토콜입니다. 두 가지의 강력한 기능을 결합하면 효율적인 실시간 영상 처리 시스템을 만들 수 있습니다. 이 기사에서는 JavaScript와 WebSocket을 사용하여 이 시스템을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 첫째, 실시간 영상처리 시스템의 요구사항과 목표를 명확히 할 필요가 있다. 실시간 이미지 데이터를 수집할 수 있는 카메라 장치가 있다고 가정해 보겠습니다.
