目前使用 System.Web.UI.WebControls.FileUpload 包裹在我们自己的控件中。
我们有 Telerik 的许可证。我想知道是否有人有这方面的经验或者可以推荐一个更好的?
一些衡量标准
- 验证
- 性能
- 多个文件
- 本地化(浏览困难)
- 安全
目前使用 System.Web.UI.WebControls.FileUpload 包裹在我们自己的控件中。
我们有 Telerik 的许可证。我想知道是否有人有这方面的经验或者可以推荐一个更好的?
一些衡量标准
就个人而言,如果你有 Telerik 控件,我会给他们一个机会。我发现它们非常有帮助,用户体验也很好。他们的上传控制非常好。
我刚刚在另一个问题中发布了这个问题,但是如果您使用此 ActiveX 控件,您将能够快速有效地处理图像。该组件实际上会在发送图像之前调整客户端计算机上的图像大小。这减少了不必要的带宽并一次传输多个图像。
我们扩展了 FileUploadControl 以添加一些验证。我们还编写了自己的控件,允许一次上传多个文件。我们目前正在评估两者。希望我们决定一个,我不想维护 2 个不同的上传控件。
查看 Dean Brettle 的NeatUpload。它基本上是一个自定义的 HttpHandler,可以将文件流式传输到磁盘,并具有大量额外的可配置性。它是开源的,Dean 绝对是支持他的用户的明星。
链接并不总是有效,所以这里又是: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;
}
您可以尝试基于 Flash 的解决方案,该解决方案允许您显示任何文本、文本框、按钮或其他任何内容,作为您自己的文件上传控件的一部分。这些解决方案通常会在页面上放置一个 1x1 的 flash 电影,作为 javascript 和 flash 之间的桥梁,以便 javascript 可以动态调用 flash 的文件上传框。
在最近的一个项目中,我使用FancyUpload来做到这一点。