I've tried several different ways to upload image to database, using Bootstrap. My IDE is Visual Studio. What I need is to let the uploaded image appear in a preview. Although I've seen a working demo before, when I run my code, the photo file appears on screen without a preview image. Because of this, I'm not sure if the image is stored in database successfully or not. Any advice would be very appreciated! I've included all of the current code:
HTML:
<div>
<form>
<div>
<div class="form-group hirehide is-empty is-fileinput width100">
<div class=socialmediaside2>
<input class=fileUpload accept="image/jpeg, image/jpg" name=profilepic[] type=file value="Choose a file">
<div class=input-group>
<input class=form-control id=uploadre placeholder="Please select your profile picture" readonly>
<span class="input-group-btn input-group-sm">
<button class="btn btn-fab btn-fab-mini"type=button><i class=material-icons>attach_file</i></button>
</span>
</div>
</div>
</div>
<div class=upload-demo>
<div class=upload-demo-wrap><img alt="your image" class=portimg src=#></div>
</div>
</div>
</form>
</div>
JavaScript:
function readURL() {
var $input = $(this);
var $newinput = $(this).parent().parent().parent().find('.portimg');
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
reset($newinput.next('.delbtn'), true);
$newinput.attr('src', e.target.result).show();
$newinput.after('<input type="button" class="delbtn removebtn" value="remove">');
}
reader.readAsDataURL(this.files[0]);
}
}
$(".fileUpload").change(readURL);
$("form").on('click', '.delbtn', function (e) {
reset($(this));
});
function reset(elm, prserveFileName) {
if (elm && elm.length > 0) {
var $input = elm;
$input.prev('.portimg').attr('src', '').hide();
if (!prserveFileName) {
$($input).parent().parent().parent().find('input.fileUpload').val("");
//input.fileUpload and input#uploadre both need to empty values for particular div
}
elm.remove();
}
}
CSS:
body {
img.portimg {
display: none;
max-width: 200px;
max-height: 200px;
}
}
Related
So am building this meme website with JavaScript. The website will take an image from the user and bind it with an image overlay and text from the user to be able to download. The problem I am having now is I can not get the Download button to work. If the user clicks on the download button, the meme is not downloaded.
HTML
<div class="meme-generator">
<div class="meme-generator-wrapper" id="memeGeneratorWrapper">
<div id="memeGeneratorImg">
<h2>Welcome</h2>
</div>
<div id="memeOverlay" class="meme-hidden meme-generator-overlay"></div>
</div>
<div class="meme-generator-controls">
<a class="button button-primary meme-upload" href="#">
<label>
<input id="memeAddPhoto" type="file">
</label>
Add Photo
</a>
<a class="button button-primary" id="memeClearPhoto" href="#">Clear Photo</a>
<a class="button button-primary" id="memeDownloadPhoto" href="#">Download</a>
</div>
</div>
JS
<script>
(function ($) {
var $memeAddPhoto = $('#memeAddPhoto')
, $memeClearPhoto = $('#memeClearPhoto')
, $memeDownloadPhoto = $('#memeDownloadPhoto')
, $memeGeneratorImg = $('#memeGeneratorImg')
, $memeOverlay = $('#memeOverlay');
var cropper = null;
var overlay = null;
function addPhoto(e) {
clearPhoto(e);
var src = URL.createObjectURL(e.target.files[0]);
cropper = true;
$memeGeneratorImg.croppie({
url: src,
viewport: {
width: 600,
height: 600
},
boundary: {
width: 600,
height: 600
}
});
overlay = $memeOverlay.clone().removeClass('meme-hidden');
$memeGeneratorImg.find('.cr-overlay').before(overlay);
}
function clearPhoto(e) {
e.preventDefault();
if (cropper) {
$memeOverlay.addClass('meme-hidden');
$memeGeneratorImg.croppie('destroy');
cropper = null;
}
if (overlay) {
overlay.remove();
}
}
function downloadPhoto(e) {
e.preventDefault();
}
$memeAddPhoto.on('change', addPhoto);
$memeClearPhoto.on('click', clearPhoto);
$memeDownloadPhoto.on('click', downloadPhoto);
}(window['jQuery']));
I want to get width and height of the displayed image inside an image wrapper to do stuff with it. The Image ist displayed when selected, so the size of the wrapper changes. Since I need the size of the wrapper to do other stuff I use it as parameters. So after updating the image I get the height and width of the OLD image wrapper. So how can I modify my code to get the new dimensions of the wrapper after displaying the new image?
(I don't need information about submitting or anything. This is a reduced version of the code.)
<div style="width:300px">
<div id="image-wrapper" style="border:2px dashed blue">
<img src="text.jpeg" id="image" style="width:100%">
</div>
<p>width: <span id="x"></span></p>
<p>height: <span id="y"></span></p>
</div>
<form method="POST" enctype="multipart/form-data">
<input type="file" id="user-file" accept="image/jpeg, image/jpg, image/png, image/gif" onchange="Image.display(this, document.getElementById('image'));Image.ready(document.getElementById('image-wrapper'),document.getElementById('x'),document.getElementById('y'))">
<button type="submit">Submit
</button>
</form>
<script>
class Image {
static display ( event, target ) {
if ( event.files[0] ) {
let fileReader = new FileReader();
fileReader.onload = function (event) {
target.setAttribute( 'src', event.target.result );
}
fileReader.readAsDataURL(event.files[0]);
}
}
static ready (wrapper, x, y) {
x.innerHTML = wrapper.clientWidth;
y.innerHTML = wrapper.clientHeight;
}
}
</script>
EDITED: You have to wait for the image to load and THEN call your ready method!
<div style="width:300px">
<div id="image-wrapper" style="border:2px dashed blue">
<img src="text.jpeg" id="image" style="width:100%" onload="Image.ready(document.getElementById('image-wrapper'),document.getElementById('x'),document.getElementById('y'))">
</div>
<p>width: <span id="x"></span></p>
<p>height: <span id="y"></span></p>
</div>
<form method="POST" enctype="multipart/form-data">
<input type="file" id="user-file" accept="image/jpeg, image/jpg, image/png, image/gif" onchange="Image.display(this, document.getElementById('image'));">
<button type="submit">Submit
</button>
</form>
<script>
class Image {
static display ( event, target ) {
if ( event.files[0] ) {
let fileReader = new FileReader();
fileReader.onload = function (event) {
target.setAttribute( 'src', event.target.result );
}
fileReader.readAsDataURL(event.files[0]);
}
}
static ready (wrapper, x, y) {
x.innerHTML = wrapper.clientWidth;
y.innerHTML = wrapper.clientHeight;
}
}
</script>
Try accessing the image itself's width, clientWidth, or offsetWidth property instead of the wrapper.
You can find the working file at Jsfiddle
/* JavaScript */
function readURL() {
var $input = $(this);
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$input.next('.blah').attr('src', e.target.result).show();
$input.after('<input type="button" class="delbtn" value="remove">');
}
reader.readAsDataURL(this.files[0]);
}
}
$(".imgInp").change(readURL);
$("form").on('click', '.delbtn', function(e) {
var $input = $(this);
$input.next('.blah').attr('src', e.target.result).hide();
$input.prev('.imgInp').val("");
$(this).closest(".delbtn").remove();
});
<form name="" action="" method="post">
<div class="div">
<input type='file' class="imgInp blah" />
<img class="blah" src="#" alt="your image"/></div>
<br>
<br>
<div class="div">
<input type='file' class="imgInp" />
<img class="blah" src="#" alt="your image"/></div>
</form>
Display and remove image is working fine.
But if the image already selected and again select another new image then preview function is not working. Also remove button keep adding. Please check the error image below.
Click to view the error
I have updated your fiddle at following link,
https://jsfiddle.net/balasuar/97dzkf70/20/
When first time you select the image, the next element of the button is the image. But once the image selected, you added theRemove button element next to the file control. So the next time, it breaks as the image is no longer next to the file control.
I fixed it below by having a reset method to clear this.
function readURL() {
var $input = $(this);
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
reset($input.next('.delbtn'), true);
$input.next('.blah').attr('src', e.target.result).show();
$input.after('<input type="button" class="delbtn" value="remove">');
}
reader.readAsDataURL(this.files[0]);
}
}
$(".imgInp").change(readURL);
$("form").on('click', '.delbtn', function(e) {
reset($(this));
});
function reset(elm, prserveFileName){
if(elm && elm.length > 0) {
var $input = elm;
$input.next('.blah').attr('src', '').hide();
if(!prserveFileName){
$input.prev('.imgInp').val("");
}
elm.remove();
}
}
I'm using droparea js. I have 4 upload. The problem is if I want to upload image in one of the upload menu, it changes all of the 4 upload menu.
<div class="col-md-12">
<div class="droparea" >
<img src="http://placehold.it/200" class="file_preview" >
</div>
<input type="file" name="file" id="file" accept="image/*" style="display: none;" >
<div class="col-md-12">
<div class="droparea" >
<img src="http://placehold.it/200" class="file_preview" >
</div>
<input type="file" name="file" id="file" accept="image/*" style="display: none;" >
<div class="col-md-12">
<div class="droparea" >
<img src="http://placehold.it/200" class="file_preview" >
</div>
<input type="file" name="file" id="file" accept="image/*" style="display: none;" >
<div class="col-md-12">
<div class="droparea" >
<img src="http://placehold.it/200" class="file_preview" >
</div>
<input type="file" name="file" id="file" accept="image/*" style="display: none;" >
<script src="js/droparea.js"></script>
<script>
$(document).ready(function(){
$('.droparea').droparea({
url: 'server.php',
success: function( server_return, name, uploaded_file )
{
$('.droparea').after( $('<p />').html( 'File sent: <b>' + name + '</b>' ) );
var oFReader = new FileReader();
oFReader.readAsDataURL( uploaded_file );
oFReader.onload = function (oFREvent)
{
$( '.file_preview' ).animate({opacity: 0}, 'slow', function(){
// change the image source
$(this)
.attr('src', oFREvent.target.result).animate({opacity: 1}, 'fast')
.on('load', function()
{
$('.statusbar').css({
width: $('.droparea').outerWidth(),
height: $('.droparea').outerHeight()
});
});
// remove the alert block whenever it exists.
$('.droparea').find('.statusbar.alert-block').fadeOut('slow', function(){ $(this).remove(); });
});
};
}
});
});
</script>
I want to put it on jsfiddle but I cant file the online js and css of the droparea plugin.
For the first time if I upload in second menu or anyone except the first menu, the result will be show up in first menu. So I change from id="file-preview" to class="file-preview"it show to all of them. Would you teach me how to make it can upload different image between 1 to another?
I'm not familiar with droparea, but you probably need to create a separate instance for each, rather than a single .droparea() instance, so something like;
$('.droparea').each(function(){
$(this).droparea()
});
You might need this:
$('.droparea').each(function(){
$(this).droparea({
url: 'server.php',
success: function( server_return, name, uploaded_file )
{
$('.droparea').after( $('<p />').html( 'File sent: <b>' + name + '</b>' ) );
var oFReader = new FileReader();
oFReader.readAsDataURL( uploaded_file );
oFReader.onload = function (oFREvent)
{
$( '.file_preview' ).animate({opacity: 0}, 'slow', function(){
// change the image source
$(this)
.attr('src', oFREvent.target.result).animate({opacity: 1}, 'fast')
.on('load', function()
{
$('.statusbar').css({
width: $('.droparea').outerWidth(),
height: $('.droparea').outerHeight()
});
});
// remove the alert block whenever it exists.
$('.droparea').find('.statusbar.alert-block').fadeOut('slow', function(){ $(this).remove(); });
});
};
}
})
})
I can't seem to find out why this won't work.
photoVal always equals nothing. So the background I have never disappears. When I select a file shouldn't the value change?
Jquery
$(document).ready(function() {
$('.browsebutton').bind("click" , function () {
$('#uploadphoto').click();
});
var photoVal = $('#uploadphoto').val();
$('#uploadphoto').change(function(){
alert(photoVal);
});
if (photoVal !== ''){
$('#photo').css('background', 'none');
}
});
HTML
<div id="photo">
<img id="preview" src="#" alt="Image Preview" />
</div>
<br>
<div id="browse">
<button type="button" class="browsebutton">Add Photo</button>
</div>
<input type="file" id="uploadphoto" name="uploadphoto" style="display: none;"/>
This question seems like a duplicate.
Try this :
$(function() {
$("#uploadphoto").change(function (){
var file_name = $(this).val();
});
});