CODEWITHSUNDEEP
javascriptphp
Raymart Calinao
Raymart Calinao

Reputation: 161

Div that acts as file upload?

I simply want to make an upload or something like browse on the div itself like act as a file input and trigger its function but my problem was i'm new to java script and quite embarrassed myself for brainstorming for almost an hour and looking for the same problem on the internet.

So i don't have any other choice but to ask question here


my code

 <script type="">
    	
    $('#pic1').click(function (Upload) {
     		$('#fileToUpload').click();
    });
    
    </script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div id="pic1" style="border:1px solid white;width:200px;height:150px;float:left;margin:10px;" onclick="Upload">
    					<input type="file" name="fileToUpload" id="fileToUpload" size="1" style="display:none;">
    					
    
    				</div>


<br> while my file input is hidden inside the div<br>

Upvotes: 6

Views: 12348

Answers (3)

Harish Kommuri
Harish Kommuri

Reputation: 2854

You just need to wrap input inside the label.

Try following piece of code.

input[type=file] {
  display: none;
}

label {
  border: 1px solid white;
  text-align: center;
  color: #FFF;
  border-radius: 4px;
  margin: auto;
  width: 120px;
  padding: 10px;
  display: block;
  background-color: #0095ff;
  cursor: pointer;
}
<form id="test_form" method="GET" action="">
  <label id="pic1">
    Upload Picture
    <input type="file" name="fileToUpload" id="fileToUpload" size="1" />


  </label>
</form>

Upvotes: 6

Gayan
Gayan

Reputation: 2935

<style type="text/css">
#pic1{
    border:1px solid black;
    width:200px;
    height:150px;
}   
</style>

<form action="" method="post" enctype="multipart/form-data">
    <div id="pic1">Upload</div>
    <input type="file" name="fileToUpload" id="fileToUpload" style="display:none;"/>
    <input type="submit" value="submit" name="submit" />
</form>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
$('#pic1').click(function(){ 
    $('#fileToUpload').trigger('click'); 
});
</script>

Upvotes: 1

Keshan Nageswaran
Keshan Nageswaran

Reputation: 8188

$(document).ready(function() {

    
    var readURL = function(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('.profile-pic').attr('src', e.target.result);
            }
    
            reader.readAsDataURL(input.files[0]);
        }
    }
    

    $(".file-upload").on('change', function(){
        readURL(this);
    });
    
    $(".upload-button").on('click', function() {
       $(".file-upload").click();
    });
});
.upload-button {
    padding: 4px;
    border: 1px solid black;
    border-radius: 5px;
    display: block;
    float: left;
}

.profile-pic {
    max-width: 200px;
    max-height: 200px;
    display: block;
}

.file-upload {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="profile-pic" src="http://cdn.cutestpaw.com/wp-content/uploads/2012/07/l-Wittle-puppy-yawning.jpg" />
<div class="upload-button">Upload Image</div>
<input class="file-upload" type="file" accept="image/*"/>

This code snippet is specific for images where its specified like this accept="image/*"/

Upvotes: 11

Related Questions