Dobrý den, v aplikaci potřebuji docílit toho, že uživatel načte pomoci
komponenty input typu file obrázek a dále bude s obrázkem v canvasu pracovat.
Od IE10 má input vlastnost files pomoci ni tohoto lze dosáhnout, ale IE9 tuto
vlastnos nemá. Proto by se rád zeptal jest-li je nějaký způsob jak toho
dosáhnout?
Zkoušel jsem tento způsob ale nelze načíst PNG obrázek.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<input type="file" name="input" id="input" accept="image/png, image/jpeg">
<script type="text/javascript">
var input = document.getElementById("input");
function pictureLoadHandle(event)
{
console.log("pictureLoadHandle()");
// vlozi obrazek do bodydocument.body.appendChild(event.target);
}
function addPicture(item)
{
console.log("addPicture()");
var picture = document.createElement("img");
picture.name = item.fileName;
picture.addEventListener("load", pictureLoadHandle);
console.log("item:",item);
var src = item.result || item.src;
console.log("src:",src);
picture.src = src;
}
function fileLoad(event)
{
addPicture({fileName: event.target.fileName, result: event.target.result});
}
function fileUploadChange(event)
{
if (event.target.files)
{
//pro IE10+
console.log("IE10+");
if (event.target.files[0])
{
var reader = new FileReader();
reader.addEventListener("load", fileLoad);
reader.fileName = event.target.files[0].name;
reader.readAsDataURL(event.target.files[0]);
}
}
else
{
// pro IE9
console.log("IE9");
var array = this.value.split("\\");
var fileName = array[array.length - 1];
addPicture({fileName: fileName, src: this.value});
}
}
input.addEventListener("change", fileUploadChange, false);
</script>
</body>
</html>
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.
