CODEWITHSUNDEEP
javascriptphphtml
user3386779
user3386779

Reputation: 7185

open the file upload dialogue box onclick the image

I want to open the image upload file dialogue box if I click the button tag. Is it possible? If so how can I do it in PHP?

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

Upvotes: 44

Views: 190710

Answers (11)

Zia Khan
Zia Khan

Reputation: 435

 <!--Hide input field to open it using button-->
        <input type="file" #file11 style="display:none">
        
        and <button type="file" (click)="file11.click()">Open file dialog</button>

Upvotes: 0

Orhan Cengiz K.
Orhan Cengiz K.

Reputation: 61

<input type="file" name="pic1" id="pic1" style="display:none;"/>
<label for="pic1">
    <img src="dist/img/picfilename.png">
</label>

Above code is tested and it works.

Upvotes: 6

AGradePHP
AGradePHP

Reputation: 63

<!-- File input (hidden) -->
<input type="file" id="file1" style="display:none"/>    

<!-- Trigger button -->
<a href="javascript:void(0)" onClick="openSelect('#file1')">

<script type="text/javascript">                            
function openSelect(file)
{
  $(file).trigger('click');
}
</script>

Upvotes: 0

عبدالرحمن شافعى
عبدالرحمن شافعى

Reputation: 29

<button id="OpenImgUpload" onclick="$('#imgupload').trigger('click');">Image Upload</button>
<input type="file" id="imgupload" style="display:none"/>

Upvotes: 1

ALEXANDER LOZANO
ALEXANDER LOZANO

Reputation: 2034

you can show the file selection dialog with a onclick function, and if a file is choosen (onchange event) then send the form to upload the file

 <form id='foto' method='post' action='upload' method="POST"  enctype="multipart/form-data" >
  <div style="height:0px;overflow:hidden"> 
  <input type="file" id="fileInput" name="fileInput" onchange="this.form.submit()"/> 
  </div>

  <i class='fa fa-camera' onclick="fileInput.click();"></i>
</form>

Upvotes: 3

DINESH JAYACHANDRAN
DINESH JAYACHANDRAN

Reputation: 1

HTML Code:

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

}

Upvotes: 0

rajratna maitry
rajratna maitry

Reputation: 508

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

On click of for= attribute will automatically focus on "file input" and upload dialog box will open

Upvotes: 23

Sajeel Anwar
Sajeel Anwar

Reputation: 41

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

Upvotes: 3

Abhay Prince
Abhay Prince

Reputation: 2162

Include input type="file" element on your HTML page and on the click event of your button trigger the click event of input type file element using trigger function of jQuery

The code will look like: 

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

And on the button's click event write the jQuery code like :

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

This will open File Upload Dialog box on your button click event..

Upvotes: 95

ufrutov
ufrutov

Reputation: 69

Also, You can write all inline, direct at html code:

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

return false; - will be useful to decline anchor action after link was clicked.

Upvotes: 7

Ravikumar Sharma
Ravikumar Sharma

Reputation: 3740

you need to add a little hack to achieve this.

You can hide a file upload(input type=file) behind your button.

and onclick of your button you can trigger your file upload click.

It will open a file upload window on click of button

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

and some javascript

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

here is a fiddle for this example: http://jsfiddle.net/ravi441988/QmyHV/1/embedded/result/

Upvotes: 14

Related Questions