Newsgroup: it.comp.lang.javascript
Titolo: Aiuto per caricamento immagine tipo ajax

So che con AJAX non si può effettuare l' upload dell' immagine, ma 
usando un iframe posso mimarne la funzionalità, vi scrivo perché ho la 
necessità di far caricare l' immagine appena dopo aver selezionato il 
file, senza che l' utente clicchi su un pulsante, per capirci dovrei 
mimare il comportamento di facebook per il caricamento dell' immagine 
del profilo. Ora ciò che vi chiedo è, potreste indicarmi la strada per 
far si che l' upload parta con l' evento onchange senza che cambi pagina 
dopo il termine dell' upload?
 
Grazie a chi mi aiuterà, Patrick

 del profilo. 
 
forse ricordo male, ma usa flash.


Grazie Cristiano per la risposta, no purtroppo non usa flah, mi sono 
scaricato la loro pagina con tutti gli script, ma l' unica cosa che 
fanno è collegare all' evento onchange dell' iframe una funzione,
in quel caso ProfilePicUploader.submitToIframe; return false;.
Ma non riesco a capire come usarlo.
esempio
<form>
  <fieldset>
   <input type="file" name="img" onchange="submit();"/>
   <div id="result"></div>
   <iframe>
    <!-- destinazione dell' upload asincrono -->
   </iframe>
  </fieldset>
</form>
in questo modo mi carica l' immagine ma mi stampa il risultato dello 
script in php, mentre io avrei la necessita di farmi restituire il 
risultato all' interno del div result, nascondendo il campo file
Grazie Patrick

 del profilo.
 
Purtroppo non avendo un account Facebook non posso verificare il loro
codice, ma basandomi su quel che dici credo che facciano un semplice
submit della form su un iframe nascosto. Riprendendo il codice che hai
scritto nell'altro post:
 
    <form
        action="upload-image.php"
        method="post"
        enctype="multipart/form-data"
        target="upload-frame">
 
        <fieldset>
            <input type="file" name="img" onchange="this.form.submit();"/>
            <div id="result"></div>
            <iframe name="upload-frame"></iframe>
        </fieldset>
    </form>
 
La cosa più sicura poi, per riempire con "result" con qualcosa, è che
che la pagina caricata nell'iframe (upload-image.php) restituisca del
codice JS del tipo:
 
 
    <script>
        parent.document.getElementById("result").innerHTML = "Loaded.";
    </script>
 
Ovviamente puoi anche restituire l'URL dell'immagine e quant'altro. Per
fare le cose a modo, sarebbe bene anche avere un timer in modo che, se
per qualche ragione, la richiesta prende troppo tempo si consideri non
andata a buon fine.
 
Il tutto, assumendo anche ciò che hai detto nell'altro post, ovviamente.



Grazie mille per la risposta, proverò a modificare la pagina con i tuoi 
suggerimenti, e vi farò sapere
 
Saluti Patrick

Il 04/10/2011 22:04, ZER0 ha scritto:



>
 
Grazie per il suggerimento, prima impostavo il target al momento del 
submit tramite javascript, mentre ora avendolo integrato nella 
dichiarazione del form tutto funziona correttamente.
 
Grazie per l' aiuto.
 
Saluti Patrick

 So che con AJAX non si può effettuare l' upload dell' immagine, ma
 
no ? 
http://igstan.ro/posts/2009-01-11-ajax-file-upload-with-pure-javascript.html
 



 
Grazie per la rispsota Gufo, ma come avevo già detto è riferita a dei 
browser in particolare, e dato che io non so a priori su che browser 
verrà usato il prodotto, non posso vincolarmi solo ad alcuni, mentre ho 
letto in questi giorni, dopo aver effettuato questo post che la nuove 
specifiche dell' oggetto XMLHttpRequest supportano il trasferimento di file.
 
Saluti Patrick


Grazie a chiunque si sia interessato a questo post, alla fine sono 
riuscito ad ottenere il risultato che cercavo tramite un esempio trovato 
su 
anyexample.com
 
 

 su 
anyexample.com
Pensavo avessi giï¿œ risolto. :)


Ora si zero tutto funziona come deve, grazie per l' interessamento

Il 04/10/2011 20:54, Patrick ha scritto:

Scusate la mia ignoranza in javascript, ma il return false che funzione 
ha alla fine della chiamata di onclick?
 
Chiedo questo perché nello stato attuale delle cose non lo uso e tutto 
funziona correttamente. Inserisco di seguito il codice dell' esempio 
citato con le mie modifiche
 
<?php
$upload_dir = "upimg";
 
function safehtml($s)
{
  $s = str_replace("&", "&amp;", $s);
  $s = str_replace("<", "&lt;", $s);
  $s = str_replace(">", "&gt;", $s);
  $s = str_replace("'", "&apos;", $s);
  $s = str_replace("\"", "&quot;", $s);
  $s = str_replace("è", "&egrave;", $s);
 
  return $s;
}
 
function getImgDimension($uploadedImg) {
  $fileDimension = getimagesize($uploadedImg);
  if (($fileDimension[0] <= 800) || ($fileDimension[1] <= 600)) {
   return true;
  }
 
  return false;
 
}
 
// FILEFRAME section of the script
if (isset($_POST['fileframe']))
{
  $result = 'ERROR';
  $result_msg = 'No FILE field found';
 
  if (isset($_FILES['file'])) {                         // file was send 
from browser
?>
<html>
  <head></head>
  <body>
   <script type="text/javascript">
    var parDoc = window.parent.document;
<?php
   if ($_FILES['file']['error'] === UPLOAD_ERR_OK) {    // no error
    $fileSize = filesize($_FILES['file']['tmp_name']);
    if ($fileSize <= 512000) {
     if (($fileDimension = getImgDimension($_FILES['file']['tmp_name']))) {
      $filename = $_FILES['file']['name'];               // file name
 
      if (file_exists($filename)) {
       $filePrefix = count(glob($filename));
 
       $filePrefix .= $fileName;
       move_uploaded_file($_FILES['file']['tmp_name'], 
$upload_dir.'/'.$filePrefix);
       $result = 'OK';
      } else {
       move_uploaded_file($_FILES['file']['tmp_name'], 
$upload_dir.'/'.$filename);
                                                         // main action 
-- move uploaded file to $upload_dir
       $result = 'OK';
      }
 
     } else {
      $result_msg = 'The uploaded file exceeds the maximum size ';
     }
    } else {
     $result_msg = 'The uploaded file exceeds the maximum file size';
    }
   } else {
    $result_msg = 'Unknown error';
   }
  }
 
  // outputing trivial html with javascript code
  // (return data to document)
 
  // This is a PHP code outputing Javascript code.
  // Do not be so confused ;)
  // this code is outputted to IFRAME (embedded frame)
  // main page is a 'parent'
  if ($result == 'OK') {
  // Simply updating status of fields and submit button
     ?>
       parDoc.getElementById("upload_status").innerHTML = "<p>file 
successfully uploaded</p>";
       parDoc.getElementById("result").innerHTML = '<p>Il nome dell\' 
immagine <?php echo safehtml("è");?>: <?php echo $filename;?></p>';
<?php
  } else {
   echo 'parDoc.getElementById("upload_status").innerHTML = "<p>ERROR: 
'.$result_msg.'</p>";';
  }
  echo '</script></body></html>';
  exit(); // do not go futher
}
// FILEFRAME section END
?>
<!-- Beginning of main page -->
<html>
  <head>
   <title>IFRAME Async file uploader example</title>
   <script type="text/javascript">
   /* This function is called when user selects file in file dialog */
   function jsUpload(upload_field) {
    /*
     * this is just an example of checking file extensions
     * if you do not need extension checking, remove
     * everything down to line
     * upload_field.form.submit();
     */
 
    var re_text = /\.jpg|\.png|\.gif|\.jpeg/i;
    var filename = upload_field.value;
 
    /* Checking file type */
    if (filename.search(re_text) == -1) {
     alert("File does not have text(txt, xml, zip) extension");
     upload_field.form.reset();
     return false;
    }
 
    document.getElementById('uploadForm').setAttribute('target', 
'upload_iframe');
    document.getElementById('uploadForm').submit();
    document.getElementById('uploadForm').style.visibility = 'hidden';
    document.getElementById('uploadForm').style.display = 'none';
    document.getElementById('upload_status').style.visibility = 'visible';
    document.getElementById('upload_status').style.display = 'block';
    return true;
   }
   </script>
  </head>
  <body>
   <h1>Upload file:</h1>
   <p>
    File will begin to upload just after selection.<br/>
    You may write file description, while you file is being uploaded.
   </p>
   <div id="uploadField">
    <form action="<?=$PHP_SELF?>" method="post" 
enctype="multipart/form-data" id="uploadForm" style="visibility: 
visible; display: block;">
     <input type="hidden" name="fileframe" value="true">
     <label for="file">File upload field:</label><br>
     <!-- JavaScript is called by OnChange attribute -->
     <input type="file" name="file" id="file" onChange="jsUpload(this)">
    </form>
    <div id="upload_status"  style="visibility: hidden; display: none;">
     <p>Uploading file...</p>
    </div>
   </div>
 
   <iframe src="#" name="upload_iframe" style="width: 400px; height: 
100px; display: none;"></iframe>
   <br/>
   <div id="result">
   </div>
   <br/>
  </body>
</html>
 
Funzinante su firefox 7 e chrome 11.06

     <input type="file" name="file" id="file" onChange="jsUpload(this)">
P.S.
La prossima volta non importa mettere tutto lo script (puoi usare siti
come pastebin nel caso), sopratutto se contiene parti server side, che
confondono. Copia, nel caso, unicamente il codice client side (generato
quindi dal sever), altrimenti ï¿œ piï¿œ complicato da rispondere. :)

 quindi dal sever), altrimenti ï¿œ piï¿œ complicato da rispondere. :)
Grazie per la dritta
saluti

 Qui il return false ï¿œ usato solo per evitare il submit della form
Appunto, fa quello che ti ho detto poco sopra: impedisce il normale
comportamento dell'evento. Hai chiesto che funzione ha il "return false"
alla fine di un onclick, e questo ï¿œ quello che fa. Nel tuo codice non
hai onclick, ma onchange, e lo utilizzi nel medesimo modo (impedire il
comportamento di default).

 comportamento di default).
Grazi emille zero per la spiegazione e il tempo dedicatomi. Al prossimo 
inconveniente o intoppo