반응형
Ajax와 함께 MVC 4를 사용한 파일 업로드
저는 MVC 4 + VS 2012 + Framework 4.5를 사용하여 웹 애플리케이션을 개발하고 있습니다.
사용자 작업에 따라 인덱스 페이지에 동적으로 렌더링되는 세 개의 부분 보기가 있습니다.
세 개의 부분 뷰 중 하나의 부분 뷰는Upload File텍스트 상자와 같은 일부 입력 필드를 포함하는 기능.
문제:
사용자가 저장 버튼(부분 보기 자체에 있음)을 클릭할 때.입력란을 데이터베이스에 저장하고 업로드한 파일을 공유 폴더에 저장합니다.
나는 Ajax를 사용하여 이것을 구현하고 싶습니다. (파일 업로드 및 데이터 저장 후 사용자는 동일한 뷰에 있어야 합니다.)
어떻게 하면 동일한 것을 구현할 수 있습니까?JQuery 솔루션이면 됩니다.
와 해본 적이 있습니다.@Ajax.BeginForm파일 업로드 후 전체 포스트백이 발생합니다.
여기 여러 파일을 업로드하고 '정크'라는 폴더에 업로드하는 작은 작업 샘플이 있습니다.
클라이언트 측...
<html>
<head>
<title>Upload Example</title>
<script src="~/Scripts/jquery-2.1.0.intellisense.js"></script>
<script src="~/Scripts/jquery-2.1.0.js"></script>
<script src="~/Scripts/jquery-2.1.0.min.js"></script>
<script>
$(document).ready(function () {
$("#Upload").click(function () {
var formData = new FormData();
var totalFiles = document.getElementById("FileUpload").files.length;
for (var i = 0; i < totalFiles; i++)
{
var file = document.getElementById("FileUpload").files[i];
formData.append("FileUpload", file);
}
$.ajax({
type: "POST",
url: '/Home/Upload',
data: formData,
dataType: 'json',
contentType: false,
processData: false,
success: function (response) {
alert('succes!!');
},
error: function (error) {
alert("errror");
}
});
});
});
</script>
</head>
<body>
<input type="file" id="FileUpload" multiple />
<input type="button" id="Upload" value="Upload" />
</body>
</html>
서버측...
public class HomeController : Controller
{
[HttpPost]
public void Upload( )
{
for( int i = 0 ; i < Request.Files.Count ; i++ )
{
var file = Request.Files[i];
var fileName = Path.GetFileName( file.FileName );
var path = Path.Combine( Server.MapPath( "~/Junk/" ) , fileName );
file.SaveAs( path );
}
}
}
이 기사는 저에게 도움이 되었습니다: http://www.matlus.com/html5-file-upload-with-progress/ 액션 결과는 여전히입니다.ActionResult Upload(HttpPostedFileBase file) {...}
[HttpPost]
public void Upload( )
{
for( int i = 0 ; i < Request.Files.Count ; i++ )
{
var file = Request.Files[i];
var fileName = Path.GetFileName( file.FileName );
var path = Path.Combine( Server.MapPath( "~/Junk/" ) , fileName );
file.SaveAs( path );
}
}
언급URL : https://stackoverflow.com/questions/20420828/file-upload-using-mvc-4-with-ajax
반응형
'programing' 카테고리의 다른 글
| NSLocale currentLocale은 항상 사용자의 현재 언어가 아닌 "en_US"를 반환합니다. (0) | 2023.08.29 |
|---|---|
| MySQL에서 테이블 별칭을 만드는 방법 (0) | 2023.08.29 |
| 창 위치 변경 Jquery (0) | 2023.08.29 |
| 노드를 만드는 방법오류가 발생해도 JS는 계속됩니까? (0) | 2023.08.29 |
| PowerShell에서 오류의 줄 번호를 가져오는 방법 (0) | 2023.08.29 |