Acquisisci dati di immagine binaria dal tipo di input "file" utilizzando JavaScript/jQuery per l'anteprima di immagini con AJAX in WebMatrix

Question

Ho avuto problemi durante la ricerca o altrimenti cercando di capire come (se è anche possibile) ottenere dati di immagine binaria utilizzando JavaScript/jQuery da un elemento di input html di tipo file.

Sto utilizzando WebMatrix (C#), ma potrebbe non essere necessario saperlo, se gli scopi di questa domanda possono essere risolti utilizzando JavaScript/jQuery da solo.

Posso prendere l'immagine, salvarla nel database (come dati binari), quindi mostrare la foto sulla pagina, dai dati binari, dopo la pubblicazione. Questo, tuttavia, mi lascia senza un'anteprima dell'immagine, prima del caricamento, per il quale sono quasi sicuro di dover usare AJAX.

Anche in questo caso, questo potrebbe non essere possibile, ma finché posso ottenere i dati di immagine binaria, credo di poterlo inviare al server con AJAX ed elaborare l'immagine nello stesso modo in cui lo farei se lo stessi prendendo da un database (si noti che non salvare i file di immagine stessi utilizzando GUID e tutto il resto, salvo solo i dati binari).

Se c'è un modo più semplice per mostrare un'anteprima di un pic usando l'elemento di input, ovviamente funzionerebbe bene, poiché l'intera idea dietro di me che provo a farlo è mostrare un'anteprima prima di colpire il invia il pulsante del modulo (o almeno crea quell'illusione).

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

faccio non considerare questo un duplicato di un'altra domanda perché, la mia vera domanda è:

Come posso ottenere dati immagine da un tipo di input "file", con JavaScript/jQuery?

Se riesco solo a recuperare i dati (nel formato corretto) sul server, dovrei essere in grado di lavorarci lì, e poi restituirlo con AJAX (anche se non sono assolutamente un esperto di AJAX).

C'è, secondo la ricerca che ho fatto, NO WAY per ottenere anteprime di immagini in tutte le versioni di IE usando solo javascript (questo perché ottenere il percorso completo del file è visto da loro come un potenziale rischio per la sicurezza) . Potrei chiedere ai miei utenti di aggiungere il sito ai siti attendibili, ma di solito non chiedi agli utenti di manomettere questo tipo di impostazioni (per non parlare del modo più rapido per far apparire il tuo sito sospetto agli utenti è di chiederle direttamente aggiungi il tuo sito all'elenco dei siti attendibili. "Fidati di me! Sono così sicuro!" :)

Answer 1

Risposta breve: Usa lo jQuery form plugin, supporta AJAX-like modulo invia anche per i caricamenti di file.

tl; dr

miniatura di anteprima è popolari siti web di solito è fatto da un certo numero di passi, in fondo il sito procedere come segue:

1. caricare l'immagine RAW
2. Ridimensiona e ottimizzare l'immagine per la memorizzazione dei dati
3. Generare un collegamento temporaneo a tale file (di solito memorizzato in una sessione HTTP mantenuta dal server)
4. Restituirlo all'utente, per abilitare un ' Anteprima'
5. memorizzare In realtà l'immagine dopo che l'utente conferma l'immagine

alcune soluzioni cattivi sono:

1. La maggior parte dei browser moderni ha opzioni per consentire l'accesso allo script ai file locali, ma di solito non chiedere ai tuoi utenti di armeggiare con quelle impostazioni di basso livello.
2. Internet Explorer precedente (ah ... sì è un peccato) e le versioni antiche dei browser moderni espongono il percorso completo del file leggendo il 'valore' della casella di input del file, che è possibile generare direttamente un tag e utilizzare quel valore . (Ora è sostituito da c:/fakepath/... cosa.)
3. Utilizzare Adobe Flash per simulare il pannello di selezione file, può leggere correttamente i file locali. Ma passarlo in JavaScript è un altro argomento ...

Spero che questi aiuti. ;)

UPDATE

Io in realtà sono imbattuto in una situazione che richiede l'anteprima prima di caricare, mi piacerebbe mettere anche qui. Come ricordavo, nei browser moderni non c'erano versioni transitorie che non implementassero FileReader prima di mascherare il percorso reale del file, ma sentitevi liberi di correggermi in caso affermativo. Questa soluzione dovrebbe approvvigionare la maggior parte dei browser, purché supportati da 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); 
}