Jak załadować obrazy z komputera lokalnego do obiektu JS, unikając ładowania do serwera.

Question

Chcę załadować plik obrazu z komputera bezpośrednio do dowolnego obiektu js bez użycia jakiegokolwiek komponentu po stronie serwera. Na przykład chcę wybrać obraz z lokalnego komputera i wyświetlić go na stronie internetowej. Czy istnieje sposób na uniknięcie przesyłania plików na serwer?

Tak naprawdę chcę napisać coś w rodzaju wielokrotnego programu ładującego obrazy, ale przed załadowaniem na serwer chcę obrócić niektóre obrazy, utworzyć plik xml z niektórymi danymi, takimi jak identyfikator użytkownika, lista nazw plików obrazów i zip wszystko obrazy i ten plik xml, a następnie wyślij go na serwer. Jak mogę to zrobić po stronie klienta?

Answer 1

Istnieje droga z HTML5, ale wymaga ona, aby użytkownik upuścił plik do miejsca docelowego upuszczenia lub użył pola <input type="file"/>, ponieważ w przeciwnym razie byłby to problem związany z bezpieczeństwem.

Za pomocą interfejsu API można odczytać pliki, a konkretnie można użyć metody FileReader.readAsDataURL, aby ustawić treść jako adres URL obrazu w postaci adresu URL: .

Oto przykład:

$('#f').on('change', function(ev) { 
    var f = ev.target.files[0]; 
    var fr = new FileReader(); 

    fr.onload = function(ev2) { 
     console.dir(ev2); 
     $('#i').attr('src', ev2.target.result); 
    }; 

    fr.readAsDataURL(f); 
});​ 

http://jsfiddle.net/alnitak/Qszjg/

Answer 2

Używanie new File APIs, możliwe jest dostęp do zawartości dysku lokalnym.

Umieszczasz tradycyjne pole przesyłania na stronie <input type="file"> i obsługujesz zdarzenie onchange.

MDN has a good writeup with all of the details.

Twój obsługi zdarzeń dostaje FileList zawierający Files. Stamtąd możesz zadzwonić pod numer FileReader.readAsDataURL(File), aby pobrać zawartość obrazu, a następnie przekazać ten adres URL danych do <img> lub <canvas>, aby wykonać obrót.

Answer 3

Można użyć createObjectURL metodę obiektu window.URL, to nie ma dużego poparcia przeglądarki chociaż

http://jsfiddle.net/LvAqp/ działa tylko w Chrome i Firefox