Engenho &amp; Engenhocas

Para ler

Engenhocas Vídeo

Zenbo, o robô babysitter

Para ler

Impressão 3D Vídeo

"impressão 4D"

Para ler

CSS Desenvolvimento Web

Aplicar CSS a botão para carregamento de ficheiros

Para ler

index.html

<!DOCTYPE html>
<html>
  <head>
 <link rel="stylesheet" type="text/css" href="http://geniuscarrier.com/assets/css/bootstrap.css?v=dac2c3f9e0" />
    <style>
 .file-upload {
position: relative;  
overflow: hidden;  
margin: 10px;  
}
.file-upload input.upload {
position: absolute;  
top: 0;  
right: 0;  
margin: 0;  
padding: 0;  
font-size: 20px;  
cursor: pointer;  
opacity: 0;  
filter: alpha(opacity=0);  
}
    </style>
  </head>
<body>
<br/>
<div style="display:inline; line-height: 0.7;">
<input id="uploadFile" type="text" disabled="disabled" placeholder="Seleccionar ficheiro" style="width: 250px" />
<div class="file-upload btn btn-warning" style="line-height: 0.68;">
<span>Carregar</span>
<input class="upload" id="uploadBtn" type="file" />
</div>
</div>  

<script type="text/javascript">  
document.getElementById("uploadBtn").onchange = function () {  
    document.getElementById("uploadFile").value = this.value;
};
</script>  
  </body>
</html>

O estilo aplicado ao botão é Bootstrap para simplificação conforme disponibilizado por Yang Zhao no artigo original.

O segredo está na aplicada em conjunto com o JavaScript.

vide HMTL5, AJAX e ASP.NET e o carregamento de ficheiros

fonte: How to Style a HTML file upload button in Pure CSS

AJAX ASP.NET Desenvolvimento Imagem Web

HMTL5, AJAX e ASP.NET e o carregamento de ficheiros

Para ler

index.html


<html>
<body>

<form action="FileUploader.ashx" enctype="multipart/form-data" id="upload" method="POST">

<fieldset>

<input id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" type="hidden" value="300000" />

<div>
    <label for="fileselect">Ficheiros para carregar:</label>
    <input id="fileselect" multiple="multiple" name="fileselect[]" type="file" />
</div>

<div id="submitbutton">
 <button type="submit">>Carrega os meus ficheiros</button>
</div>

</fieldset>

</form>

<div id="progress">
</div>

<div id="messages">
Mensagens de estado</div>

<script src="filedrag.js"></script>

</body>
</html>

FileUploader.ashx


public class FileUploader : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{
   if (context.Request.Files.Count > 0)
   {
       HttpFileCollection files = context.Request.Files;
       for (int i = 0; i < files.Count; i++)
       {
           HttpPostedFile file = files[i];
           ////// Aqui o código necessário
       }
   }

   context.Response.ContentType = "text/plain";
   context.Response.Write("Ficheiros carregados com sucesso.");
}

public bool IsReusable
{
   get
   {
       return false;
   }
}

}

O JavaScript responsável pelo tratamento assíncrono do carregamento dos ficheiros foi desenvolvido através do objecto XMLHttpRequest.
No exemplo acima pode ver-se o markup e o código servidor que processa o carregamento de vários ficheiros num único pedido.

O JavaScript filedrag.js que trata da parte cliente e submete os ficheiros para o servidor foi desenvolvido por Craig Buckler (@craigbuckler) da OptimalWorks.net. O artigo original está aqui.
Este JavaScript também está preparado para drag & drop de ficheiros, abertura de ficheiros com HTML5 e JavasScript e carregamento de ficheiros com barra de progresso.

Estoutro artigo também detalha o uso de AJAX para carregamento de ficheiros.

Ambos usam e não o ASP.NET como este artigo.

fonte:
How to Asynchronously Upload Files Using HTML5 and Ajax
Uploading Files with Ajax