springMVC+ajax 파일 업로드 및 진행률 표시 실례
<form id= "uploadForm">
<p > : <input type="text" name="filename" value= ""/></p >
<p > : <input type="file" name="file"/></ p>
<input type="button" value=" " onclick="doUpload()" />
</form>
function doUpload() {
var formData = new FormData($( "#uploadForm" )[0]);
$.ajax({
url: 'http://localhost:8080/xiaochangwei/file/upload' ,
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (returndata) {
alert(returndata);
},
error: function (returndata) {
alert(returndata);
}
});
}
백엔드:
@RequestMapping(value = "/upload", method = RequestMethod.POST)
public String upload(HttpServletRequest request, @RequestParam("file") MultipartFile file, ModelMap model) {
System.out.println(" ");
String path = request.getSession().getServletContext().getRealPath("upload");
String fileName = file.getOriginalFilename();
// String fileName = new Date().getTime()+".jpg";
System.out.println(path);
File targetFile = new File(path, fileName);
if (!targetFile.exists()) {
targetFile.mkdirs();
}
//
try {
file.transferTo(targetFile);
} catch (Exception e) {
e.printStackTrace();
}
model.addAttribute("fileUrl", request.getContextPath() + "/upload/" + fileName);
return "result";
}
만약 프런트엔드에 많은 실체류 데이터가 파일과 함께 제출된다면백엔드 방법을 다음과 같이 수정할 수 있습니다.
upload(HttpServletRequest request, @RequestParam("file") MultipartFile file, ModelMap model,User user)
다음 코드를 이용하여 진도표가 있는 파일 업로드를 더욱 실현할 수 있습니다
<script type="text/javascript">
function UpladFile() {
var fileObj = document.getElementById("file").files[0]; // js
var FileController = "http://localhost:8080/xiaochangwei/file/upload"; //
// FormData
var form = new FormData($( "#uploadForm" )[0]);
// XMLHttpRequest
var xhr = new XMLHttpRequest();
xhr.open("post", FileController, true);
xhr.onload = function () {
// alert(" !");
};
xhr.upload.addEventListener("progress", progressFunction, false);
xhr.send(form);
}
function progressFunction(evt) {
var progressBar = document.getElementById("progressBar");
var percentageDiv = document.getElementById("percentage");
if (evt.lengthComputable) {
progressBar.max = evt.total;
progressBar.value = evt.loaded;
percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
if(evt.loaded==evt.total){
alert(" 100%");
}
}
}
</script>
<progress id="progressBar" value="0" max="100"></progress>
<form id= "uploadForm">
<input type="file" id="file" name="myfile" />
<input type="button" onclick="UpladFile()" value=" " />
</form>
이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
springmvc application/octet-stream problemmistake: Source code: Solution: Summarize: application/octet-stream is the original binary stream method. If the convers...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.