Comentário: Abaixo, usamos a nova API de arquivo de recurso do HTML 5 para fazer upload de arquivos e exibir a porcentagem do progresso dos arquivos de upload. A intenção é assim: quando um arquivo é selecionado, as informações atuais do arquivo são exibidas.
Aqui, combinamos asp.net MVC como o servidor e você também pode usar outras linguagens do servidor. Vejamos o HTML deste trecho:@Using (html.beginform ("upload", "home", formmethod.post, new {Enctype = "multipart/form-data",}))
{
<div>
<Label para = "arquivo">
Carregar imagem: </belt>
<input type = "arquivo" múltiplo = "múltiplo" onchange = "filesElected ();" />
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
<input type = "button" value = "upload imagem" />
</div>
<div>
</div>
}
O javascript relacionado é o seguinte:
FUNÇÕES FIONSELECTELECT () {
var arquivo = document.getElementById ('fileTouPload'). Arquivos [0];
if (arquivo) {
var fileSize = 0;
if (file.size> 1024 * 1024)
filesize = (math.round (file.size * 100 / (1024 * 1024)) / 100) .toString () + 'mb';
outro
filesize = (math.round (file.size * 100/1024) / 100) .toString () + 'kb';
Document.getElementById ('FileName'). Innerhtml = 'Nome:' + file.name;
document.getElementById ('fileSize'). innerhtml = 'tamanho:' + fileSize;
document.getElementById ('FileType'). Innerhtml = 'Tipo:' + file.type;
}
}
function uploadfile () {
var fd = new FormData ();
fd.append ("fileTouPload", document.getElementById ('fileTouPload'). arquivos [0]);
var xhr = novo xmlHttPrequest ();
xhr.upload.addeventListener ("Progress", UploadProgress, false);
xhr.addeventListener ("load", uploadcomplete, false);
xhr.addeventListener ("Erro", carregamento, false);
xhr.addeventListener ("aborto", carregado, falso);
xhr.open ("post", "home/upload");
xhr.send (fd);
}
função uploadprogress (EVT) {
if (evt.lengthcomputable) {
var %Complete = Math.Round (evt.loaded * 100 /evt.total);
Document.getElementById ('ProgressNumber'). Innerhtml = %Complete.toString () + '%';
}
outro {
document.getElementById ('ProgressNumber'). Innerhtml = 'Incapaz de calcular';
}
}
função uploadcomplete (EVT) {
/ * Este evento é aumentado quando o servidor envia de volta uma resposta */
ALERT (EVT.TARGET.RESPONSETEXT);
}
função uploadfailed (EVT) {
alerta ("houve um erro tentando fazer upload do arquivo.");
}
função uploadCanceled (EVT) {
alerta ("o upload foi cancelado pelo usuário ou pelo navegador retirou a conexão.");
}
O exposto acima é o JavaScript nativo, que executa a função Seleciona os arquivos no evento OnChange, e executa a função UploadFile no botão Click. Aqui, use o xmlHttPrequest para implementar o arquivo de upload do AJAX. Observe que o código pode funcionar no Firefox 14. O IE 9 atualmente não suporta a API do arquivo, para que você possa participar aqui. O código do lado do servidor é muito simples:
Public Class HomeController: Controller
{
Public ActionResult Index ()
{
return view ();
}
/// <summary>
/// carrega os arquivos especificados.
/// </summary>
/// <amam> Os arquivos. </amon>
/// <Trackns> ActionResult </lackns>
[Httppost]
upload de ação pública (httppotedfilebase [] filetouPload)
{
foreach (arquivo httppotedfilebase no FileTouPload)
{
String Path = System.io.path.combine (server.mappath ("~/app_data"), System.io.path.getFilename (file.fileName));
file.saveas (caminho);
}
ViewBag.Message = "Arquivo (s) enviado com sucesso";
retornar redirectToAction ("índice");
}
}
Autor: Petter Liu