Zobrazenie ukážky pred nahratím obrázka? - javascript, obrázok, nahrávanie súborov

Existuje spôsob, ako zobraziť ukážku obrázka na stránke html pred odovzdaním na server?

Musím ukázať ukážku obrázka, ktorý somstále je potrebné nahrať, len aby sme dokázali, že došlo k zmenám. Pravdepodobne potrebujem zmeniť zdroj obrázka. Existujú nejaké existujúce techniky / metódy, ktoré by som mohol použiť?

odpovede:

1 pre odpoveď č. 1

Tento problém som vyriešil nedávno takto:

K súboru som pripojil meniča kurzov

<input type="file" name="photofile" id="photofile">



$("#photofile").bind("change", function(){
readUrl(this);
});

a nastavte obrázok vo funkcii readURL na predtým prázdny img element, ako je tento:

readUrl = function(input) {
//if File is there
if(input.files && input.files[0]) {
//create a Filereader
var reader = new FileReader();
//bind a function to the reader which will be executed when file is completely loaded
reader.onload = function(e) {
//Here you render your preview image
$("#bild-vorschau").attr("src", e.target.result);
}

reader.readAsDataURL(input.files[0]);
}
}

Tu to môžete vidieť v a Práca na husle

---

2 pre odpoveď č. 2

Môže sa to dosiahnuť pomocou The HTML5 FileReader API

Používame iba JavaScript a objekt FileReader, môžeme povoliť užívateľovi načítať obrázky do aplikácie.

HTML kód:

<input type="file" id="getimage">
<fieldset>
<legend>Your image here</legend>
<div  id="imgstore"></div>
</fieldset>

Kód JavaScriptu:

<script>
function imageHandler(e2)
{
var store = document.getElementById("imgstore");
store.innerHTML="<img src="/images/" + e2.target.result +"">";
}

function loadimage(e1)
{
var filename = e1.target.files[0];
var fr = new FileReader();
fr.onload = imageHandler;
fr.readAsDataURL(filename);
}

window.onload=function()
{
var x = document.getElementById("filebrowsed");
x.addEventListener("change", readfile, false);
var y = document.getElementById("getimage");
y.addEventListener("change", loadimage, false);
}
</script>

Ako skontrolovať, či prehliadač podporuje rozhranie HTML5 File API:

// Checking all the possible window objects needed for file api
if (window.File && window.FileReader && window.FileList && window.Blob) {
// Browser is fully supportive.
} else {
// Browser not supported. Try normal file upload
}

Užitočné odkazy nižšie:

Demo Tu

Kompletný príklad tu

Tabuľky kompatibility na podporu HTML5, CSS3, SVG a ďalších v stolných a mobilných prehľadávačoch

---

0 pre odpoveď č. 3

Prezrite si tento článok Nahrávanie Ajaxu s lištou Progress a vyskúšajte ukážku, ktorú chcete pri svojej otázke dosiahnuť. DEMO

To je možné pomocou FileReader ktorý pracuje na moderných prehliadačoch.

---