jQuery 가 여러 장의 그림 을 업로드 할 때 진행 막대 스타일(DEMO)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>xhr2</title>
</head>
<body>
<div style="text-align: center; margin: 100px">
<input type="file" id="file" name="file" multiple="multiple">
<progress id="uploadprogress" min="0" max="100" value="0">0</progress>
<button onclick="xhr2()">OK</button>
</div>
<script>
function xhr2() {
var xhr = new XMLHttpRequest();//
//
var file = document.getElementById('file').files;
//console.log(file.length);
// FormData
var formData = new FormData(); //++++++++++
formData.append("enctype","multipart/form-data");
//
for (i = 0; i < file.length; i++) {
formData.append("file[" + i + "]", file[i]); //++++++++++
}
//formData.append("file", file[0]); //++++++++++
//post
xhr.open('POST', '/common/doUpload'); //
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
var complete = (event.loaded / event.total * 100 | 0);
var progress = document.getElementById('uploadprogress');
progress.value = progress.innerHTML = complete;
}
};
//
xhr.send(formData); //
//ajax
xhr.onreadystatechange = function() { //
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
//
xhr.timeout = 100000;
xhr.ontimeout = function(event) {
alert(' ！');
}
}
</script>
</body>
</html>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
ghq + peco로 GitHub 리포지토리를 선택하면서 curl + jq에서 GitHub API 실행이전에 작성한 기사에서 curl + jq를 사용하여 Github API에서 Pull Request에 대한 base/head branch를 얻을 수있는 것을 시도했습니다. 이번에는 ghq + peco의 리포지토리 선택...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
