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

Fermé

habiba000 Messages postés 3 Date d'inscription samedi 30 avril 2016 Statut Membre Dernière intervention 1 mai 2016 - 30 avril 2016 à 02:57
habiba000 Messages postés 3 Date d'inscription samedi 30 avril 2016 Statut Membre Dernière intervention 1 mai 2016 - 1 mai 2016 à 05:05

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:

Comment uploaded une video ou un fichier à partir d'une icone
Comment télécharger une vidéo youtube - Guide
Fichier rar - Guide
Comment réduire la taille d'un fichier - Guide
Comment ouvrir un fichier epub ? - Guide
Fichier host - Guide

1 réponse

Réponse 1 / 1

codeurh24 Messages postés 761 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018 123
30 avril 2016 à 16:55

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.

habiba000 Messages postés 3 Date d'inscription samedi 30 avril 2016 Statut Membre Dernière intervention 1 mai 2016
30 avril 2016 à 18:24

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

codeurh24 Messages postés 761 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018 123 > habiba000 Messages postés 3 Date d'inscription samedi 30 avril 2016 Statut Membre Dernière intervention 1 mai 2016
Modifié par codeurh24 le 1/05/2016 à 02:29

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

habiba000 Messages postés 3 Date d'inscription samedi 30 avril 2016 Statut Membre Dernière intervention 1 mai 2016
1 mai 2016 à 05:05

merci bcp. sa passe correct!!

Discussions similaires

Annuaire portable gratuit à partir d'un nom

Chemin Logo du site de la Cité de l'espace

comment donner les droits sur fichier partage

Discussions similaires

Newsletters