Comment uploaded une video ou un fichier à partir d'une icone
habiba000
Messages postés
3
Statut
Membre
-
habiba000 Messages postés 3 Statut Membre -
habiba000 Messages postés 3 Statut Membre -
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.
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.
1 réponse
-
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.-
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
- 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
-
-
