11528 sujets

JavaScript, DOM et API Web HTML5

AJAX et <input type="file">

Pages :
(reprise du message précédent)

Bonjour,

C'est mon premier post aussi sur ce forum, même si je consulte les pages et tutoriaux depuis un bon moment sur cet excellent site !

@ Just> J'ai vu un site qui permettait l'envoi "automatique" d'une image via un champ INPUT TYPE="FILE", il s'agit de Ringo (http://www.ringo.com/photos/upload.html)
A plancher...

// Edit
Voici le script qu'ils utilisent... photo_upload.js
Il faut bien entendu utiliser aussi le fichier prototype.js (bien connu dans le monde AJAX)
C'est ce sur quoi je pars pour faire une action analogue à la tienne, tout est brut.


  <script type="text/javascript" src="http://www.ringo.com/20060629175729/script/prototype.js"></script>

  <script type="text/javascript" src="http://www.ringo.com/20060629175729/script/photoUpload.js"></script>
<body class="" id="photoUploadView" onload="photoUploadEnableInputsOnload()">


<li class="photoItem" id="photoItem_1" >
  <form method="POST" enctype="multipart/form-data"
        action="/photos/upload/frame.html" target="photoFrame_1">
    
    <input type="hidden" name="albumId" value=""/> 
    <input type="hidden" name="public" id="public_1" 
       value="true"/> 
    
    <img id="photoThumb_1" class="photo tiny" style="display:none;"/>
    <iframe id="photoFrame_1" name="photoFrame_1" src="" 
            class="hidden"></iframe>
    <input type="file" id="photo_1" name="photo"
           
           onchange="handleEvent(event, photoUploadHandleFile);"/> 
  </form>
  <p id="photoStatus_uploading_1" class="photoStatus" 
     style="display:none;">
    <span id="photoStatus_uploading_1_icon">
      
    </span>
    &nbsp;
    <span style="vertical-align:top;">
      En chargement. Tu peux continuer à choisir des photos.
    </span>
  </p>
  <p id="photoStatus_finished_1" class="photoStatus" 
     style="display:none;">
    <span id="photoStatus_finished_1_icon">
      
    </span>
    &nbsp;
    Terminé
  </p>
  <p id="photoStatus_unknown_1" class="photoStatus error" 
     style="display:none;">
    Il y a eu une erreur dans le téléchargement de cette photo. S'il te plaît, essaie encore une fois. 
  </p>
  <p id="photoStatus_tooLarge_1" class="photoStatus error" 
     style="display:none;">
    Cette photo est trop grande. Chaque photo peut faire jusqu'à 4 MB.
  </p>
  <p id="photoStatus_invalid_1" class="photoStatus error" 
     style="display:none;">
    Nous n'avons pas pu ouvrir ce fichier. Es-tu sûr que c'est une photo que l'on peut afficher ?
  </p>
  <p id="photoStatus_duplicate_1" class="photoStatus error" 
     style="display:none;">
    Il semble que tu aies déjà reçu celle-ci.
  </p>
  <p id="photoStatus_photoLimitExceeded_1" class="photoStatus error" 
     style="display:none;">
    Tu es une machine de téléchargement. Tu as excédé notre limite de 2.000 photos pour 30 jours. S'il te plaît, fais une petite pause, surfe quelques balises et reviens bientôt pour en télécharger plus.
  </p>
</li>



// Edit -- 14h45
J'abandonne ce chemin pour en utiliser un autre, beaucoup plus efficace.
J'ai un formulaire (contenant mon INPUT FILE) qui envoie dans un iframe câché, qui lui, en fin de traitement, recall mon Ajax... Comme çà, ma page n'est pas entièrement rechargée, et mon image uploadée est bien affichée.
Smiley langue
Modifié par Mc2 (04 Jul 2006 - 14:57)
Si vous faite un peu de flash il y a des outils tres interessant pour l'upload de fichier dans le dernier player de flash. Cela peut eviter d'avoir a recharger ta page.
Pages :
Sujet clos
Aller à