c# - mvc - tag helpers asp net core

¿Puede recomendar el control alternativo FileUpload para asp.net-mvc?

Question

Actualmente, el uso de System.Web.UI.WebControls.FileUpload está envuelto en nuestro propio control.

Tenemos licencias para Telerik. Quería saber si alguien tenía experiencia con eso o podría sugerir uno mejor.

Algunos criterios para ser medidos por

• validación
• Peformance
• archivos múltiples
• localización ( navegar es difícil)
• seguridad

Answer 1

Extendimos el FileUploadControl para agregar algo de validación. También escribimos nuestro propio control que permite cargar múltiples archivos a la vez. Actualmente estamos evaluando ambos. Esperemos que decidamos uno, odiaría tener 2 controles de carga diferentes para mantener.

Answer 2

Personalmente, si tienes los controles de Telerik, les daría una oportunidad. Descubrí que son muy útiles y que la experiencia del usuario es buena. Su control de carga es bastante bueno.

Answer 3

Puede probar una solución basada en flash que le permite mostrar cualquier texto, cuadro de texto, botones o cualquier otra cosa como parte de su propio control de carga de archivos. Estas soluciones suelen poner una película flash de 1x1 en la página que actúa como un puente entre javascript y flash, de modo que javascript puede llamar al cuadro de carga de archivos de flash de forma dinámica.

En un proyecto reciente, utilicé FancyUpload para hacer exactamente eso.

Answer 4

Echa un vistazo a Dean Brettle''s NeatUpload . Básicamente es un HttpHandler personalizado que transmite los archivos al disco con mucha capacidad de configuración extra. Es de código abierto y Dean es una estrella absoluta para apoyar a sus usuarios.

Answer 5

Mira esto:

Html-5-Uploader

¡Arrastra y suelta múltiples archivos en tu página web!

El enlace no siempre funciona, así que aquí está de nuevo: http://www.igloolab.com/jquery-html5-uploader/

.

Controlador: (modificado desde mi código original, espero no haber olvidado algo, pero está bastante claro)

 <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

Esta es la Vista (no olvide enlaces a css y 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>

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

Answer 6

Acabo de publicar esto en otra pregunta , pero si usa este control ActiveX, podrá procesar imágenes de manera rápida y eficiente. El componente cambiará el tamaño de las imágenes en la máquina del cliente antes de enviarlas. Esto reduce el ancho de banda innecesario y transfiere varias imágenes a la vez.