Div, das als Datei-Upload fungiert?

Question

Ich möchte einfach einen Upload oder etwas wie auf dem div selbst wie Akt als Datei-Eingang zu machen und seine Funktion auslösen, aber mein Problem war, ich bin neu zu Java-Skript und ziemlich peinlich mich für Brainstorming für fast eine Stunde und suchen für das gleiche Problem im Internet.

Also ich habe keine andere Wahl, als Frage stellen hier

meinen Code

<script type=""> 
 
    \t 
 
    $('#pic1').click(function (Upload) { 
 
     \t \t $('#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"> 
 
    \t \t \t \t \t <input type="file" name="fileToUpload" id="fileToUpload" size="1" style="display:none;"> 
 
    \t \t \t \t \t 
 
    
 
    \t \t \t \t </div> 
 

 

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

Answer 1

$(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/*"/>

Dieser Code-Schnipsel für Bilder ist spezifisch, wo wie diese Angabe seiner accept="image/*"/

Answer 2

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

Answer 3

Alles, was Sie tun müssen, ist, Sie müssen nur Eingang setzen in label.

Versuchen Sie folgendes Snippet.

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

<form id="test_form" method="GET" action=""> 
 
    <label id="pic1"> 
 
    Upload Picture 
 
    <input type="file" name="fileToUpload" id="fileToUpload" size="1" /> 
 

 

 
    </label> 
 
</form>