你能为asp.net-mvc推荐替代的FileUpload控件吗?

时间:2008-10-31 14:11:33

标签: c# asp.net-mvc file-upload web-controls

目前正在使用我们自己控件中包装的System.Web.UI.WebControls.FileUpload。

我们拥有Telerik的许可证。我想知道是否有人有过这方面的经验或者可以提出更好的建议?

要衡量的一些标准
  • 验证
  • peformance
  • 多个文件
  • 本地化(browse很难)
  • 安全

6 个答案:

答案 0 :(得分:3)

就个人而言,如果你有Telerik控件,我会给他们一个机会。我发现他们非常有帮助,用户体验很好。他们的上传控制非常好。

答案 1 :(得分:2)

我刚发布了这个in another question,但是如果你使用这个ActiveX控件,你将能够快速有效地处理图像。该组件实际上会在发送之前调整客户端计算机上的图像大小。这样可以减少不必要的带宽并一次传输多个图像。

答案 2 :(得分:1)

我们扩展了FileUploadControl以添加一些验证。我们还编写了自己的控件,允许一次上传多个文件。我们目前正在评估两者。希望我们决定一个,我不想有2个不同的上传控件来维护。

答案 3 :(得分:1)

查看Dean Brettle的NeatUpload。它基本上是一个自定义的HttpHandler,它通过额外的可配置性将文件流式传输到磁盘。它是开源的,Dean是支持其用户的绝对明星。

答案 4 :(得分:1)

检查一下:

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;
}

答案 5 :(得分:0)

您可以尝试基于Flash的解决方案,该解决方案允许您显示任何文本,文本框,按钮或其他任何内容,作为您自己的文件上传控件的一部分。这些解决方案通常在页面上放置1x1 flash影片,充当javascript和flash之间的桥梁,以便javascript可以动态调用flash的文件上传框。

在最近的一个项目中,我使用FancyUpload来做到这一点。