Comment uploaded une video ou un fichier à partir d'une icone

habiba000 Messages postés 3 Date d'inscription   Statut Membre Dernière intervention   -  
habiba000 Messages postés 3 Date d'inscription   Statut Membre Dernière intervention   -
bonjour,
j'aimerai que quant on click sur ces icone que le chargement ce lance du pc au site voilà mon code:
<td><label style="border: none">
<i class="material-icons24" onclick="addVideo()"></i>
<i class="material-icons24" onclick="addFile()"></i>
</label></td>
en utilisant les deux fonction addVideo() et addFile(),quels est la fonction ou méthode de résolution java_script me perméttant de charger des fichier.merci d'avance et pour la bonne compréhension.
A voir également:

1 réponse

Réponse 1 / 1
codeurh24 Messages postés 760 Date d'inscription   Statut Membre Dernière intervention   123
 
Bonjour.

De quelle maniéré ton navigateur connait-il la vidéo ou le fichier ?
Quand je parle de navigateur je fait référence a ta page html.
0
habiba000 Messages postés 3 Date d'inscription   Statut Membre Dernière intervention  
 
en tanque video ou fichier comme tout autre fichier.ofaite là j'utilise une base de donnee qui vas stocké ces fichier et par la suite les affiché.mais ici j'aimerais pas utilisé un input de type file je veu que sa soit avec les icones.merci d'avance
0
codeurh24 Messages postés 760 Date d'inscription   Statut Membre Dernière intervention   123 > habiba000 Messages postés 3 Date d'inscription   Statut Membre Dernière intervention  
 
tu clique sur l'image qui représente un champignon et ça demande de choisir un fichier sur ton pc.
Pour éviter de faire apparaître le file input traditionnel j'ai ajouté du css.

Le javascript en bas de page c'est pour l'upload.

Je pense que tu peux modifier le input file avec son css pour l'adapter a tes besoins.


page HTML 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="IE=Edge,chrome=1" http-equiv="X-UA-Compatible">
    <title>titre</title>
    <style>
    #file_browse_wrapper {
    width: 96px;
    height: 96px;
    background: url('champi_vert.png') 0 0 no-repeat;
    border:none;
    overflow:hidden;
    }
    #file_browse_wrapper:hover {
    background: url('champi_vert.png') 0 0 no-repeat;
    }
    #file_browse_wrapper:active {
    background: url('champi_vert.png') 0 0 no-repeat;
    }
    #afile{

    width: 96px;
    height: 96px;
    opacity:0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    }


    </style>
</head>
<body>
    <div id='file_browse_wrapper'>
        <input id="afile" name="afile" onclick="addFile(this)" type="file">
    </div>
    <script>
    var addFile = function(img)
    {

    document.querySelector('#'+img.id).addEventListener('change', function(e) {
      var file = this.files[0];
      var fd = new FormData();
      fd.append("afile", file);
      var xhr = new XMLHttpRequest();
      xhr.open('POST', 'upload.php', true);
      
      xhr.upload.onprogress = function(e) {
        if (e.lengthComputable) {
          var percentageComplete = (e.loaded / e.total) * 100;
          console.log(percentageComplete + '% uploaded');
        }
      };
      xhr.onload = function() {
        if (this.status == 200) {
          var statut = JSON.parse(this.response);
          console.log('Response:', statut);
        };
      };
      xhr.send(fd);
    }, false);
    }
    </script> <!--[if IE]>
<script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<script>CFInstall.check({mode: 'overlay'});</script>
<![endif]-->
</body>
</html>



page PHP qui s'appelle upload.php 
<?php
$fileContent = file_get_contents($_FILES['afile']['tmp_name']);

$fp = fopen(basename($_FILES['afile']['name']), 'a+');
 fwrite($fp, $fileContent);
fclose($fp);

?>


https://jsfiddle.net/gyyvvh92/
http://img15.hostingpics.net/pics/545280champivert.png
0
habiba000 Messages postés 3 Date d'inscription   Statut Membre Dernière intervention  
 
merci bcp. sa passe correct!!
0