wake-up-neo.net

öffnen Sie das Dialogfeld zum Hochladen der Datei, und klicken Sie auf das Bild

Ich möchte das Dialogfeld zum Hochladen der Bilddatei öffnen, wenn ich auf die Schaltfläche tag.is klicke. Es ist möglich. Wenn ja, wie kann ich es in PHP tun?

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

Fügen Sie das input type="file" -Element in Ihre HTML-Seite ein und lösen Sie beim Klickereignis Ihrer Schaltfläche das Klickereignis des Eingabetyp-Dateielements mit der Triggerfunktion von jQuery aus

Der Code wird wie folgt aussehen: 

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

Und auf das Klickereignis der Schaltfläche schreibe den jQuery - Code wie folgt:

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

Daraufhin wird das Dialogfeld zum Hochladen von Dateien in Ihrem Schaltflächenklick-Ereignis geöffnet.

35
Abhay Prince

sie müssen einen kleinen Hack hinzufügen, um dies zu erreichen.

Sie können einen Dateiupload (input type=file) hinter Ihrer button ausblenden.

wenn Sie auf die Schaltfläche klicken, können Sie den Klick zum Hochladen der Datei auslösen.

Es öffnet sich ein Fenster zum Hochladen von Dateien, wenn Sie auf die Schaltfläche klicken

<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>

und etwas Javascript

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

hier ist eine Geige für dieses Beispiel: http://jsfiddle.net/ravi441988/QmyHV/1/embedded/result/

10
Ravi

Sie können auch alle Inline-Codes direkt unter HTML-Code schreiben:

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

falsch zurückgeben; - ist nützlich, um die Ankeraktion abzulehnen, nachdem auf den Link geklickt wurde.

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

Durch Klicken auf for = wird das Attribut automatisch auf "Dateieingabe" gesetzt und das Dialogfeld "Upload" wird geöffnet 

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

HTML Quelltext:

 <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