откройте окно диалога загрузки файла onclick этого изображения

Я хочу открыть диалоговое окно загрузки файла изображения, если я нажму тег кнопки.возможно ли это?если да, то как я могу это сделать в PHP

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

5 ответов


включить вход type="file" элемент на Вашей странице HTML и на событии щелчка вашей кнопки вызывает событие щелчка элемента файла типа входного сигнала используя функцию триггера jQuery

код будет выглядеть как:

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

и на событие click кнопки написать jQuery код :

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

откроется диалоговое окно "загрузка файла"на событии нажатия кнопки..


вам нужно добавить немного взломать, чтобы достичь этого.

вы можете скрыть загрузку файла (input type=file) за свой button.

и onclick вашей кнопки вы можете вызвать ваш файл загрузить нажмите.

Он откроет окно загрузки файла по щелчку кнопки

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

и некоторые javascript

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

вот скрипка для этого примера:http://jsfiddle.net/ravi441988/QmyHV/1/embedded/result/


кроме того, вы можете написать все встроенные, прямые в html-код:

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

return false; - будет полезно отклонить действие якоря после нажатия ссылки.


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

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

на for= атрибут автоматически сфокусируется на "вводе файла" и откроется диалоговое окно загрузки