asp.net-mvc에 대한 대체 FileUpload 컨트롤을 추천할 수 있습니까?
-
05-07-2019 - |
문제
현재 자체 컨트롤에 래핑된 System.Web.UI.WebControls.FileUpload를 사용하고 있습니다.
우리는 Telerik에 대한 라이센스를 보유하고 있습니다.누구든지 해당 경험이 있거나 더 나은 것을 제안할 수 있는지 알고 싶었습니다.
측정할 몇 가지 기준
- 확인
- 성능
- 여러 파일
- 현지화(검색 어렵다)
- 보안
해결책
개인적으로 Telerik 컨트롤이 있다면 나는 그들에게 샷을 줄 것입니다. 나는 그들이 매우 도움이되고 사용자 경험이 좋습니다. 그들의 업로드 제어는 꽤 좋습니다.
다른 팁
방금 이것에 대해 포스팅했어요 다른 질문에, 그러나 이 ActiveX 컨트롤을 사용하면 이미지를 빠르고 효율적으로 처리할 수 있습니다.구성 요소는 실제로 이미지를 보내기 전에 클라이언트 컴퓨터의 이미지 크기를 조정합니다.이는 불필요한 대역폭을 줄이고 한 번에 여러 이미지를 전송합니다.
유효성 검사를 추가하기 위해 FileUploadControl을 확장했습니다. 또한 여러 파일을 한 번에 업로드 할 수있는 자체 컨트롤을 작성했습니다. 우리는 현재 두 가지를 모두 평가하고 있습니다. 바라건대 우리는 하나를 결정하기로 결정합니다. 유지해야 할 두 가지 다른 업로드 컨트롤이있는 것을 싫어합니다.
Dean Brettle 's를 확인하십시오 Neatupload. 기본적으로 추가 구성 가능성이 많은로드로 파일을 디스크로 스트리밍하는 사용자 정의 httphandler입니다. 오픈 소스이고 Dean은 사용자를 지원하는 절대 스타입니다.
이것을 확인하십시오.
HTML-5-uploader웹 페이지에서 여러 파일을 드래그 앤 드롭!
링크가 항상 작동하지 않으므로 여기에 다시 다음과 같습니다. http://www.igloolab.com/jquery-html5-uploader/
.
컨트롤러 : (원래 코드에서 수정되었습니다. 뭔가 잊지 않기를 바랍니다.
<HttpPost()> _
Public Function Upload(uploadedFile As System.Web.HttpPostedFileBase) As ActionResult
If uploadedFile IsNot Nothing Then
If uploadedFile.ContentLength > 0 Then
Dim mimeType As String = Nothing
'Upload
Dim PathFileName As String = System.IO.Path.GetFileName(uploadedFile.FileName)
Dim path = System.IO.Path.Combine(Server.MapPath("~/App_Data/Uploads"), PathFileName)
If Not System.IO.Directory.Exists(Path) Then
System.IO.Directory.CreateDirectory(Path)
End If
Dim firstLoop As Boolean = True
uploadedFile.SaveAs(path)
Next
End If
Return Nothing
End Function
이것은보기입니다 (CSS 및 JS에 대한 링크를 잊지 마십시오;)).
<h1>
@SharedStrings.Upload</h1>
<h2>
@SharedStrings.UploadInformation</h2>
<div id="dropbox">
</div>
<div id="upload">
</div>
<script type="text/javascript">
$(function () {
var fileTemplate = "<div id=\"{{id}}\">"; fileTemplate += "<div class=\"progressbar\"></div>"; fileTemplate += "<div class=\"preview\"></div>"; fileTemplate += "<div class=\"filename\">{{filename}}</div>"; fileTemplate += "</div>"; function slugify(text) { text = text.replace(/[^-a-zA-Z0-9,&\s]+/ig, ''); text = text.replace(/-/gi, "_"); text = text.replace(/\s/gi, "-"); return text; }
$("#dropbox").html5Uploader({ onClientLoadStart: function (e, file) {
var upload = $("#upload"); if (upload.is(":hidden")) { upload.show(); }
upload.append(fileTemplate.replace(/{{id}}/g, slugify(file.name)).replace(/{{filename}}/g, file.name));
}, onClientLoad: function (e, file) { /*$("#" + slugify(file.name)).find(".preview").append("<img src=\"" + e.target.result + "\" alt=\"\">");*/ }, onServerLoadStart: function (e, file) { $("#" + slugify(file.name)).find(".progressbar").progressbar({ value: 0 }); }, onServerProgress: function (e, file) { if (e.lengthComputable) { var percentComplete = (e.loaded / e.total) * 100; $("#" + slugify(file.name)).find(".progressbar").progressbar({ value: percentComplete }); } }, onServerLoad: function (e, file) { $("#" + slugify(file.name)).find(".progressbar").progressbar({ value: 100 }); }
});
});
</script>
그리고 내 CSS
/*html 5 uploader*/
#dropbox
{
/*picture where people would drag-drop their files to*/
background-image:url(../Images/UploadToMedia.png);
height:128px;
margin-bottom:40px;
margin-left:auto;
margin-right:auto;
background-repeat:no-repeat;
margin-top:0;
width:128px;
}
자신의 파일 업로드 컨트롤의 일부로 텍스트, 텍스트 상자, 버튼 또는 기타 항목을 표시 할 수있는 플래시 기반 솔루션을 시도 할 수 있습니다. 이 솔루션은 일반적으로 JavaScript와 Flash 사이의 브리지 역할을하는 페이지에 1x1 플래시 영화를 페이지에 배치하여 JavaScript가 Flash의 파일 업로드 상자를 동적으로 호출 할 수 있도록합니다.
최근 프로젝트에서 나는 사용했습니다 FancyUpload 정확히 그렇게합니다.