Uzyskaj dane binarne obrazu z typu wejściowego "plik" przy użyciu JavaScript/jQuery do użytku z podglądem obrazu z AJAX w WebMatrix

Question

Mam problemy podczas badania lub w inny sposób próbuje dowiedzieć się, jak (jeśli to możliwe), aby uzyskać dane obrazu binarnego przy użyciu JavaScript/jQuery z elementu wejściowego html pliku typu.

Używam WebMatrix (C#), ale może nie być konieczne, aby wiedzieć, że jeśli cele tego pytania można odpowiedzieć za pomocą samego JavaScript/jQuery.

Mogę zrobić zdjęcie, zapisać je w bazie danych (jako dane binarne), a następnie pokazać zdjęcie na stronie, z danych binarnych, po wysłaniu. To jednak pozostawia mnie bez podglądu, przed przesłaniem, z czego jestem prawie pewien, że muszę używać AJAX.

To może nie być możliwe, ale tak długo, jak mogę uzyskać dane obrazu binarnego, wierzę, że mogę przesłać go do serwera za pomocą AJAX i przetworzyć obraz w taki sam sposób, w jaki bym to zrobił z bazy danych (pamiętaj, że nie zapisuję samych plików graficznych za pomocą GUID i tak dalej, po prostu zapisuję dane binarne).

Jeśli jest łatwiejszy sposób na pokazanie podglądu z użyciem elementu wejściowego, to też by się dobrze sprawdziło, jako że cały pomysł za mną, próbujący to zrobić, to pokazanie podglądu zdjęcia, zanim uderzą w przesłać przycisk formularza (lub przynajmniej stworzyć to złudzenie).

** * ** * ****UPDATE* ** * ** * ****

zrobić nie uważam tego za duplikat innego pytania, ponieważ moje prawdziwe pytanie brzmi:

Jak mogę uzyskać dane obrazu z typu wejściowego "plik", z JavaScript/jQuery?

Jeśli mogę po prostu uzyskać dane (w odpowiednim formacie) z powrotem do serwera, powinienem być w stanie pracować z nim tam, a następnie zwrócić go z AJAX (choć, jestem absolutnie nie ekspertem AJAX).

Istnieje, według badań, które zrobiłem, NIE MA sposobu na uzyskanie podglądu obrazu we wszystkich wersjach IE przy użyciu tylko javascript (dzieje się tak dlatego, że postrzeganie pełnej ścieżki do pliku jest przez nie postrzegane jako potencjalne zagrożenie bezpieczeństwa) . Mogę poprosić użytkowników o dodanie witryny do zaufanych witryn, ale zwykle nie prosimy użytkowników o manipulowanie tymi ustawieniami (nie mówiąc o najszybszym sposobie, w jaki witryna wydaje się podejrzana dla użytkowników, jest proszenie ich o bezpośredni kontakt; dodaj swoją witrynę do listy zaufanych witryn. To jest jak wysłanie wiadomości e-mail z pytaniem o hasło. "Zaufaj mi, jestem bezpieczny!" :)

Answer 1

Krótka odpowiedź: skorzystaj z jQuery form plugin, która obsługuje technologię AJAX formularz przesyła nawet w przypadku przesyłania plików.

tl; dr

miniaturek podglądu popularnych stron internetowych jest zwykle wykonywane przez szereg etapów, w zasadzie stronie zrobić kroki:

1. przesłać obraz RAW
2. rozmiar i optymalizacji obrazu do przechowywania danych
3. Wygeneruj tymczasowe łącze do tego pliku (zwykle przechowywane w sesji HTTP utrzymywanej przez serwer)
4. Wyślij to z powrotem do użytkownika, aby umożliwić ' podgląd”
5. Właściwie zapisać obraz po użytkownik potwierdza obraz

Kilka złe rozwiązania są:

1. Większość nowoczesnych przeglądarek posiada opcje umożliwiające dostęp do skryptu do plików lokalnych, ale zazwyczaj ci nie pytaj użytkowników, aby majstrowali przy tych ustawieniach niskiego poziomu.
2. Wcześniejszy Internet Explorer (ah ... tak, to wstyd) i starsze wersje nowoczesnych przeglądarek ujawnią pełną ścieżkę pliku, czytając "wartość" pola wprowadzania plików, które można bezpośrednio wygenerować i wykorzystać tę wartość . (Teraz jest zastąpione przez coś c:/fakepath/...)
3. Użyj Adobe Flash do naśladowania panelu wyboru plików, może poprawnie odczytać pliki lokalne. Ale przekazanie go do JavaScript to kolejny temat ...

Mam nadzieję, że to pomoże. ;)

UPDATE

I rzeczywiście przyszedł całej sytuacji wymagającej podgląd przed przesłaniem, chciałbym również umieścić go tutaj. Jak mogłem sobie przypomnieć, nie było przejściowych wersji w nowoczesnych przeglądarkach, które nie implementują FileReader przed maskowaniem prawdziwej ścieżki pliku, ale proszę, popraw mnie jeśli tak. To rozwiązanie powinno obsługiwać większość przeglądarek, o ile są obsługiwane przez jQuery.

// 1. Listen to change event 
$(':file').change(function() { 
    // 2. Check if it has the FileReader class 
    if (!this.files) { 
    // 2.1. Old enough to assume a real path 
    setPreview(this.value); 
    } 
    else { 
    // 2.2. Read the file content. 
    var reader = new FileReader(); 

    reader.onload = function() { 
     setPreview(reader.result); 
    }; 

    reader.readAsDataURL(); 
    } 
}); 

function setPreview(url) { 
    // Do preview things. 
    $('.preview').attr('src', url); 
}