Não vou explicar em detalhes sobre a API de arquivo aqui. Vamos cuidar de si mesmo. Quando viemos, temos que usar o identificador de arquivo para ler o conteúdo do arquivo. Isso é conseguido através do FilEreader. Através da interface FileReader, podemos carregar o conteúdo do arquivo de forma assíncrona na memória e atribuir uma determinada variável JS.
A cópia do código é a seguinte:
função getImgsrc (alvo, retorno de chamada) {
if (window.fileReader) {
var opreViewImg = null, ofReader = new Window.FileReader ();
Ofreader.onload = function (ofrevent) {
OpreViewImg = new Image ();
var tipo = Target.Files [0] .Type.split ("/") [1];
var src = ofrevent.target.result;
opreViewimg.src = src;
if (typeof de retorno de chamada == "function") {
Retorno de chamada (OPREViewImg, Target, Type, SRC);
}
retornar opreviewimg.src;
};
return (function () {
var Afiles = Target.Files;
if (afiles.length === 0) {
retornar;
}
if (! isimgtype (afiles [0] .Type)) {
alerta ("Você deve selecionar um arquivo de imagem válido!");
retornar;
}
if (afiles [0] .Size> 1024 * 1024) {
Target.value = "";
alerta ('Por favor, carregue o tamanho do arquivo de imagem menor que 1m.');
retornar;
}
Ofreader.readasDataurl (Afiles [0]);
}) ();
}
if (Navigator.appname === "Microsoft Internet Explorer") {
return (function () {
document.getElementById ("imagePreview"). filters.item ("dximageTransform.microsoft.alphaimageloader"). src = Target.value;
}) ();
}
}
O exposto acima é o código -chave para fazer upload de imagens com JavaScript combinado com o FileReader. Você gosta disso?