anteprima immagine da uploadare

**Kahm** · 26-07-2010, 18:13

come da titolo
nella pagina di registrazione come posso far vedere una anteprima dell'immagine all'utente prima ancora di caricarla sul server?

il problema è che per caricare l'immgine mi serve un idcliente, cosa che ottengo solo inserendolo, ma nella pagina funziona tipo facebook, che devo far vedere in anteprima l'immagine.

**pietro09** · 27-07-2010, 07:53

L'argomento è stato molto trattato in javascript :master:

Con una ricerca ho pescato questo, uno tra tanti

http://forum.html.it/forum/showthrea...ight=anteprima

**Kahm** · 27-07-2010, 10:03

Originariamente inviato da pietro09
L'argomento è stato molto trattato in javascript :master:

Con una ricerca ho pescato questo, uno tra tanti

http://forum.html.it/forum/showthrea...ight=anteprima

ops pensavo si potesse fare in asp.net con ajax...cmq grazie

**pietro09** · 27-07-2010, 10:08

Originariamente inviato da Kahm
ops pensavo si potesse fare in asp.net con ajax...cmq grazie

Bah! bisognerebbe che il nostro moderatore lo mettesse bene in evidenza:

1) asp.net produce html.

2) se html e javascript non possono farlo, non può farlo neanche asp.net

**giando877** · 29-07-2010, 15:27

Suddividerei il problema in 3 parti : Upload del file, memorizzazione del file, recupero dell'immagine dal server per la visualizzazione sul client

Upload del file
Questa è la parte più semplice, l'unico requisito è che se il tuo utente ha già compilato metà del form di registrazione non perda i dati. Gli approcci sono 2 : a) usi il classico controllo, che però porterà ad un postback sincrono. Per ovviare la perdita del data entry puoi far effettuare l'upload da un Popup oppure ripopolare tu i controlli dopo l'upload ( lì dove il view state non ci pensa già lui ); oppure usi l'AsyncFileUpload come si vede qui
http://www.asp.net/ajax/ajaxcontrolt...ileUpload.aspx

Memorizzazione del file
Secondo me questa va messa in cache all'IIS, questo perché la cache, a differenza della sessione, resta comune a tutte le applicazioni ed a tutte le chiamate. Agli elementi di cache puoi dare una vita massima, quindi se l'utente non completa la registrazione non ti resterà memoria occupata in eterno.
Recuperato il Binario ti basterà fare una

Dim img() As Byte = CType(Cache.Item(SessionID), Byte())
Cache.Insert(SessionID, img, Nothing, DateTime.UtcNow.AddMinutes(15), TimeSpan.Zero)

per avere l'immagine in cache per 15 minuti

Recupero per la visualizzazione sul cliente
Devi creare una pagina aspx ( ho un Handler, se hai dimestichezza )
Questa pagina dovrà semplicemente recuperare il binario dalla cache ed esporlo, ovvero una cosa simile a questa pagina GetImage.aspx

<script runat="server">
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)

Dim SessionID As String = Session.SessionID
Dim img() As Byte = CType(Cache.Item(SessionID), Byte())
Response.Clear()
Response.ContentType = "image/jpeg"
Response.AddHeader("Accept-encoding", "")
Response.BinaryWrite(img)
Response.Flush()
End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>

Nella tua pagina di registrazione dovrà trovarsi un img avente src="GetImage.aspx".
Nel caso di postback sincrono per il caricamento dell'immagine dopo aver ricaricato la pagina il browser tenterà il recupero dell'immagine dal server, quindil l'img rimasta vuota sarà ora popolata con quanto caricato sul server.
Se l'upload è stato asincrono dubito che l'immagine si aggiorni automaticamente. Per ovviare basta intervenire via JS.
A valle del caricamento dovrebbe bastare

var i = $get('miaImg')
i.src = i.src

FINITO!!!!
Ammetto che non è cosa semplice, ma qualcuno di voi pensava di aver scelto un mestiere semplice?!?!!?

**Kahm** · 29-07-2010, 15:36

Originariamente inviato da giando877
Suddividerei il problema in 3 parti : Upload del file, memorizzazione del file, recupero dell'immagine dal server per la visualizzazione sul client

Upload del file
Questa è la parte più semplice, l'unico requisito è che se il tuo utente ha già compilato metà del form di registrazione non perda i dati. Gli approcci sono 2 : a) usi il classico controllo, che però porterà ad un postback sincrono. Per ovviare la perdita del data entry puoi far effettuare l'upload da un Popup oppure ripopolare tu i controlli dopo l'upload ( lì dove il view state non ci pensa già lui ); oppure usi l'AsyncFileUpload come si vede qui
http://www.asp.net/ajax/ajaxcontrolt...ileUpload.aspx

Memorizzazione del file
Secondo me questa va messa in cache all'IIS, questo perché la cache, a differenza della sessione, resta comune a tutte le applicazioni ed a tutte le chiamate. Agli elementi di cache puoi dare una vita massima, quindi se l'utente non completa la registrazione non ti resterà memoria occupata in eterno.
Recuperato il Binario ti basterà fare una

Dim img() As Byte = CType(Cache.Item(SessionID), Byte())
Cache.Insert(SessionID, img, Nothing, DateTime.UtcNow.AddMinutes(15), TimeSpan.Zero)

per avere l'immagine in cache per 15 minuti

Recupero per la visualizzazione sul cliente
Devi creare una pagina aspx ( ho un Handler, se hai dimestichezza )
Questa pagina dovrà semplicemente recuperare il binario dalla cache ed esporlo, ovvero una cosa simile a questa pagina GetImage.aspx

<script runat="server">
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)

Dim SessionID As String = Session.SessionID
Dim img() As Byte = CType(Cache.Item(SessionID), Byte())
Response.Clear()
Response.ContentType = "image/jpeg"
Response.AddHeader("Accept-encoding", "")
Response.BinaryWrite(img)
Response.Flush()
End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>

Nella tua pagina di registrazione dovrà trovarsi un img avente src="GetImage.aspx".
Nel caso di postback sincrono per il caricamento dell'immagine dopo aver ricaricato la pagina il browser tenterà il recupero dell'immagine dal server, quindil l'img rimasta vuota sarà ora popolata con quanto caricato sul server.
Se l'upload è stato asincrono dubito che l'immagine si aggiorni automaticamente. Per ovviare basta intervenire via JS.
A valle del caricamento dovrebbe bastare

var i = $get('miaImg')
i.src = i.src

FINITO!!!!
Ammetto che non è cosa semplice, ma qualcuno di voi pensava di aver scelto un mestiere semplice?!?!!?

interessante, in effetti il problema principale era mmeorizzare sul server l'immagine prima ancora di avere un IDutente con il quale si sia registrato
ma non ho capito ancora come fai a fare il caricamento...hai poco codice..ma...BOH

**giando877** · 29-07-2010, 15:55

Consideriamo i 2 casi
1) Upload con Popup
Crei una Popup.aspx fatta più o meno come segue

codice:

<script runat="server">
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    If FileUpload1.HasFile Then
      Cache.Insert(Session.SessionID, FileUpload1.FileBytes)
    End If
  End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>Untitled Page</title>
</head>
<body>
  <form id="form1" runat="server">
  <div>
   Inserisci l'immagine <asp:FileUpload ID="FileUpload1" runat="server" />
    <asp:Button ID="Button1" runat="server" Text="Carica" OnClick="Button1_Click" />
  </div>
  </form>
</body>
</html>

Apri il popup col pulsante Carica immagine presente nella tua pagina, fai l'upload nel popup. Come scrivevo non so se in automatico l'img della tua pagina si aggiornerà, ma se crei una funzione JS AggiornaImmagine ( che aggiorna la src come indicato sotto ) e nel popup , dopo l'upload, fai opener.AggiornaImmagine() dovresti ottenere l'effetto cercato.

Il secondo modo è usare il controllo che ti ho indicato, dell'AjaxControlToolkit, che non ho mai usato direttamente ( uso la Suite Telerik per ste cose ) ma per il quale trovi sicuramente un sacco di documentazione ed esempi ( primo fra tutti il link ufficiale come ti ho indicato sotto )

Spero di esser stato più esauriente

**Kahm** · 29-07-2010, 16:01

si grazie

**djciko** · 30-07-2010, 11:53

Originariamente inviato da pietro09

Bah! bisognerebbe che il nostro moderatore lo mettesse bene in evidenza:

1) asp.net produce html.

2) se html e javascript non possono farlo, non può farlo neanche asp.net

- dove dovrei evidenziarlo ?

- ajax nativo è abbastanza complesso e c'e' anche il toolkit che semplifica, magari qualcosa che non si fa facilmente in javascript puro si riesce a farlo in ajax (parlo di difficoltà di coding)

**djciko** · 30-07-2010, 12:01

Comunque, un secolo fa, ed ora non funzionera' sicuramente:

codice:

<script language="javascript">
function seleziona()
{
document.getElementById("imgAnteprima").src=document.getElementById("fileupload_foto").value;
}
</script>


Anteprima:
[img]nophoto.jpg[/img]



<input 
 type="file" 
 runat="server" 
 id="fileupload_foto" 
 size="40" 
 onchange="javascript:seleziona();">

(piu' o meno)

Discussione: anteprima immagine da uploadare

Strumenti discussione

Ricerca discussione

Visualizza

anteprima immagine da uploadare

Permessi di invio