Téléchargement du fichier dans un formulaire sans rafraîchir la page

J'ai ce bout de code:

<form name="myUploadForm" method="post" action="/scripts/upload.do" enctype="multipart/form-data" id="fileUpload">
   <table width="100%" border="0"> 
      <tr>
         <td>
            <input type="file" name="xlsFile" size="60" value="test.xls"> 
            <input type="button" value="Upload File" name="upload_xls">
         </td>
      </tr>
   </table>
</form>

Droit maintenant je peux télécharger le fichier avec Struts mais il actualise la page. Comment puis-je le faire sans la page rafraîchissant?

InformationsquelleAutor Mark | 2011-04-12
  1. 6

    Ce qui a fonctionné pour moi:

    Sur la balise form, j'ai target="hidden-iframe"

    cachés i-cadre sur la page ressemble à ceci:

    <iframe name="hidden-iframe" style="display: none;"></iframe>

    La chose importante à souligner ici est que la forme fait référence à la nom attribut de l'image et non le id.

    InformationsquelleAutor Ilia Koulikov
  2. 2

    Vous pouvez poster le formulaire avec jQuery et obtenir le résultat en retour.

    JS:

    $('#formId' ).submit(
    function( e ) {
        $.ajax( {
            url: '/upload',
            type: 'POST',
            data: new FormData( this ),
            processData: false,
            contentType: false,
            success: function(result){
                console.log(result);
                //$("#div1").html(str);
            }
        } );
        e.preventDefault();
    } 
);

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formId" action="/upload" enctype="multipart/form-data" method="post">
        <input type="text" name="title"><br>
        <input type="file" name="upload" multiple="multiple"><br>
        <input type="submit" value="Upload">
</form>
<div id="div1">
</div>

    InformationsquelleAutor Ramazan Polat
  3. 1

    Si vous pouvez utiliser jQuery, vous pouvez utiliser quelque chose comme jQuery File Upload.

    InformationsquelleAutor Town
  4. 1

    Il y a deux méthodes:

    1. HTML5 prend en charge le Fichier API.
    2. Créer une iframe masqué, le point de la propriété "cible" de la forme de l'iframe id.
    InformationsquelleAutor HaleDeng