web-dev-qa-db-fra.com

ouvrez la boîte de dialogue de téléchargement de fichier en cliquant sur l'image

Je veux ouvrir la boîte de dialogue du fichier de téléchargement d'image si je clique sur le bouton tag.is it it possible.if alors comment puis-je le faire en php

while{
    echo "<td><button><img src='".$cfet['productimage']."' width='50' height='40'></button></td>";
}
javascriptphphtml
12
user3386779

Inclure l'élément type="file" sur votre page HTML et sur l'événement click de votre bouton déclenche l'événement click de l'élément de fichier de type d'entrée à l'aide de la fonction trigger de jQuery

Le code ressemblera à ceci: 

<input type="file" id="imgupload" style="display:none"/> 
<button id="OpenImgUpload">Image Upload</button>

Et sur l'événement de clic du bouton, écrivez le code jQuery comme:

$('#OpenImgUpload').click(function(){ $('#imgupload').trigger('click'); });

Cela ouvrira la boîte de dialogue de téléchargement de fichier sur votre événement de clic sur un bouton.

35
Abhay Prince

vous devez ajouter un peu de bidouillage pour y parvenir.

Vous pouvez masquer un téléchargement de fichier (input type=file) derrière votre button.

et en cliquant sur votre bouton, vous pouvez déclencher le téléchargement de votre fichier, cliquez dessus.

Il ouvrira une fenêtre de téléchargement de fichier en cliquant sur le bouton

<button id="btnfile"> 
 <img src='".$cfet['productimage']."' width='50' height='40'>
</button> 
<div class="wrapper"> //set wrapper `display:hidden`
     <input type="file" id="uploadfile" /> 
</div>

et du javascript

$("#btnfile").click(function () {
    $("#uploadfile").click();
});

voici un violon pour cet exemple: http://jsfiddle.net/ravi441988/QmyHV/1/embedded/result/

10
Ravi

En outre, vous pouvez écrire tout en ligne, directement au code HTML:

<input type="file" id="imgupload">
<a href="#" onclick="$('#imgupload').trigger('click'); return false;">Upload file</a>

retourne faux; - sera utile pour refuser l'action d'ancre après avoir cliqué sur le lien.

5
ufrutov
<input type="file" id="imgupload" style="display:none"/>
<label for='imgupload'> <button id="OpenImgUpload">Image Upload</button></label>

En cliquant sur pour = attribut se concentrera automatiquement sur "entrée de fichier" et la boîte de dialogue de téléchargement s'ouvrira 

1
rajratna maitry
  <label for="profileImage"> 
  <a style="cursor: pointer;"><em class="fa fa-upload"></em> Change Profile 
  Image</a></label> 
  <input type="file" name="profileImage" id="profileImage" style="display: none;">
1
Sajeel Anwar

Code HTML:

 <form method="post" action="#" id="#">
<div class="form-group files color">
    <input type="file" class="form-control" multiple="">
</div>

CSS:

.files input {
outline: 2px dashed #92b0b3;
outline-offset: -10px;
-webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
transition: outline-offset .15s ease-in-out, background-color .15s linear;
padding: 120px 0px 85px 35%;
text-align: center !important;
margin: 0;
width: 100% !important;
height: 400px;

}

.files input:focus{    
    outline: 2px dashed #92b0b3; 
    outline-offset: -10px;
   -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
    transition: outline-offset .15s ease-in-out, background-color .15s linear;
  border:1px solid #92b0b3;

}

.files{ position:relative}
   .files:after {  pointer-events: none;
     position: absolute;
     top: 60px;
     left: 0;
    width: 50px;
   right: 0;
   height: 400px;
  content: "";
  background-image: url('../../images/');
  display: block;
  margin: 0 auto;
  background-size: 100%;
  background-repeat: no-repeat;

}

.color input{ background-color:#f1f1f1;}
.files:before {
  position: absolute;
  bottom: 10px;
   left: 0;  pointer-events: none;
  width: 100%;
  right: 0;
  height: 400px;
  display: block;
  margin: 0 auto;
  color: #2ea591;
  font-weight: 600;
  text-transform: capitalize;
  text-align: center;

}

0
DINESH JAYACHANDRAN