Ajax 파일 비동기 업로드 실현
1. 비동기 업로드 의 개념
비동기 업로드 란 전통 적 인 폼 제출 을 비교 하여 페이지 부분 새로 고침 기능 을 실현 하 는 것 이다.전통 적 인 폼 제출 은 보통 제출 단 추 를 누 르 고 실제 페이지 는 잠 겨 있 는 상태 입 니 다. 업로드 가 완료 되면 페이지 는 새로운 페이지 로 이동 합 니 다.한편, 한 편의 업 로드 는 전체 업로드 과정 에서 페이지 가 막 히 지 않 았 기 때문에 사용 자 는 다른 상호작용 을 동시에 할 수 있다. 업로드 가 완 료 된 후에 국부 페이지 에서 알림 정 보 를 제공 하고 전체 페이지 를 새로 고치 지 않 는 다.
2. 비동기 업로드 의 실현 방식
1. iframe 위조 비동기 업로드 실현
키 조작:
<iframe name="ifm" style="display: none;">iframe>
<form action="/upload" enctype="multipart/form-data" method="post" target="ifm" onsubmit="loading(true)">
<label for="myfile"> :label>
<input type="file" name="myfile" id="myfile" />
<input type="submit" class="btn btn-primary" value=" " />
<span id="uptxt" style="display: none;"> 。。。span>
form>
<div id="flist" style="border:1px dotted darkgray;">div>
<script>
function uploadFinished(fileName) {
addToList(fileName);
loading(false);
}
function addToFlist(fname) {
var temp = [""
,fname, ""];
$("#flist").append(temp.join(""));
}
function loading(showloading) {
if (showloading) {
$("#uptxt").show();
} else {
$("#uptxt").hide();
}
}
script>
폼 을 제출 할 때 정 보 는 target 이 가리 키 는 숨겨 진 iframe 페이지 에 제출 되 어 현재 홈 페이지 를 새로 고치 지 않 고 일반 파일 업로드 에서 target 은 현재 홈 페이지 이기 때문에 파일 업로드 에 성공 하면 돌아 오 는 정 보 는 현재 페이지 에 표시 되 어 페이지 를 새로 고 칩 니 다.폼 을 제출 하면 iframe 은 현재 페이지 에 정 보 를 피드백 하여 현재 업로드 진 도 를 알려 줍 니 다.
백 엔 드 코드 처리
var express = require('express');
var router = express.Router();
var multipart = require('connect-multiparty'); //
var multipartMiddleWare = multipart(); //
var fs = require('fs');
router.post('/upload',multipartMiddleWare,function(req,res) {
// : url, : , :
var fpath = req.files.myfile.path;
var fileName = fpath.substr(fpath.lastIndexOf('\\') + 1); // ,
setTimeout(function() {
var ret = [",<span class="hljs-string">"window.parent.uploadFinished('"</span> + fileName + <span class="hljs-string">"');"</span>,<span class="hljs-string">" ];
res.send(ret.join(""));
},1000)
});
업로드 가 완료 되면 iframe 은 현재 제출 페이지 업로드 가 완료 되 었 음 을 알 리 고 업로드 한 파일 이름 을 전달 하여 현재 페이지 가 iframe 페이지 를 후속 적 으로 처리 할 때 스 크 립 트 를 직접 실행 하도록 해 야 합 니 다.홈 페이지 면 즉 window. parent 를 찾 아 이 페이지 가 정의 하 는 함 수 를 호출 합 니 다. 매개 변 수 는 현재 업로드 한 파일 이름 입 니 다.
2. xhr level 2 진정한 의미 의 비동기 업로드 실현
관건 적 인 작업: formData 대상 을 만 들 고 업로드 할 파일 을 formData 에 넣 어 xhr 대상 을 만 들 고 요청 을 보 냅 니 다. (formData 는 HTML 5 의 새로운 속성 입 니 다. 전통 적 인 폼 과 유사 합 니 다. formData 에 각 폼 항목 과 값 을 추가 할 수 있 습 니 다.)
<div class="container">
<div class="roe">
<div class="col-md-12">
<div>
<div class="input-group">
"file" id="myfile" />
div>
<div>
"button" class="btn btn-primary" onclick="upload()" value=" " />
id="uptxt" style="display: none;"> ...
id="upprogress">
div>
div>
<div id="fileList" style="border: 1px dotted darkgray">div>
div>
div>
div>
<script>
var formdata = new FormData(); // formData
formdata.append('myfile',$('#myfile')[0].files[0]);
// xhr, ,
var xhr = new XMLHttpRequest();
function upload() {
// formData , formData
var xhr = new XMLHttpRequest();
// ,
xhr.upload.onprogress = function(event) {
if(event.lengthComputable) {
var percent = Math.round(event.loaded * 100 / event.total);
console.log('%d%',percent);
$('#upprogress').text(percent);
}
};
// , xhr send ,
xhr.onloadstart = function(event) {
console.log('load start');
$('#upprogress').text(' ');
$('#stop').one('click',function() { // ‘ ’
xhr.abort(); //
$(this).hide(); //
});
loading(true);
};
//
xhr.onload = function(event) {
console.log('upload success');
$('#upprogress').text(' ');
console.log(xhr.responseText);
var ret = JSON.parse(xhr.responseText); // json
addToList(ret.fname); //
};
//
xhr.onerror = function(event) {
console.log('error');
$('#upprogress').text(' ');
};
//
xhr.onabort = function(event) {
$('#upprogress').text(' ');
};
xhr.onloadend = function(event) {
console.log('load end');
loading(false);
};
xhr.open('POST','/upload3',true);
xhr.send(formdata);
}
function addToList(fname) {
var temp = [""
,fname,""];
$('#fileList').append(temp.join(""));
}
function loading(showloading) {
if(showloading) {
$('#uptxt').show();
$('#stop').show();
}else {
$('#uptxt').hide();
$('#stop').hide();
}
}
script>
router.post('/upload3',multipartMiddleWare,function(req,res) {
console.log(req.files);
var fpath = req.files.myfile.path;
var fname = fpath.substr(fpath.lastIndexOf('\\') + 1);
res.json({fname: fname});
});
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Express.js에서 오류를 처리하는 간단한 방법Express에서 오류를 처리하는 여러 가지 방법이 있습니다. 이를 수행하는 일반적인 방법은 기본 익스프레스 미들웨어를 사용하는 것입니다. 또 다른 방법은 컨트롤러 내부의 오류를 처리하는 것입니다. 이러한 처리 방식...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.