html_HTML/Xhtml_Web 페이지 제작 시 비동기 파일 업로드 예

코드 복사

코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

이것은 HTML에서 가장 일반적이고 간단한 양식 제출 방법이지만 이 방법은 페이지를 전환해야 할 수도 있습니다. 때로는 같은 페이지에서 서버와 상호 작용하고 싶지만 다른 페이지로 전환하고 싶지 않을 수도 있습니다. 양식을 제출한 후 어떻게 해야 합니까? 다음은 양식을 제출하는 방법입니다.
먼저 곡선을 통해 나라를 구하는 솔루션을 소개합니다. 위 코드 조각은 변경할 필요가 없습니다.

코드 복사코드는 다음과 같습니다.

target=uploadFrame 형식으로 대상 속성을 추가합니다. 대상 속성은 iframe의 id 값(또는 name 속성의 값)과 일치해야 합니다. 시도한 후).

간단한 설명을 드리자면, 사실 여기의 양식은 제출 후 새로 고쳐지는데 왜 페이지로 이동되지 않나요? 사실 우리가 iframe에서 새로 고친 이유는 무엇입니까? iframe은 비어있는 것, 즉 비동기적인 느낌을 주는 것과 같습니다. 이것은 정통적인 방법은 아니지만, 나라를 구하는 방법이기도 합니다. 물론 이 방법은 많은 경우에 적용되지 않습니다. 예를 들어, 완성된 양식을 서버에서 검색한 후에는 이 방법이 작동하지 않을 것입니다. 여기서도 테이블을 실제로 비동기적으로 제출해야 합니다.

(2) jquery 비동기 양식 제출

jquery용 양식 제출 플러그인인 ajaxupload를 소개하며 사용법이 비교적 간단합니다.

코드 복사코드는 다음과 같습니다.

🎜>< ;!---->

🎜>( function(){
new AjaxUpload("#upload", {
action: '/hehe',
type: "post",
data: {},
name : 'textfield',
onSubmit: function(file, ext) {
alert("업로드 성공")
},
onComplete: function(file, response) {
}
} );
})();



여기에 주요 코드가 게시됩니다. 완료되었으므로 자체 실행 함수를 사용하여 업로드 ID가 있는 버튼에 비동기 업로드 이벤트를 추가합니다. new AjaxUpload(id, object)의 id는 바인딩된 객체의 ID에 해당합니다. data는 추가 데이터입니다. 이름은 임의로 지정할 수 있습니다. onSubmit 함수는 파일을 업로드하기 전의 콜백 함수이며, ext는 파일 확장자입니다. 서버를 처리할 수 있습니다. 위는 두 개의 간단한 파일 업로드 클라이언트의 구현입니다.