Display a preview window once the image has been chosen

I have created an image preview div to show the selected image's thumbnail. Everything was working fine so far. But now, I want this div to be hidden when the page initially loads and only become visible when a user selects an image to upload. Here is how I have set it up:

 <div class="fileinput fileinput-new" data-provides="fileinput">
 <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px; display:none"></div>  #This is the div for previewing images
 <div>
 <span class="btn btn-info btn-file">
 <span class="fileinput-new">Select image</span>
 <span class="fileinput-exists">Change</span>
 <input type="file" name=""></span>

Here is my jquery code (I am new to jquery):

<script type="text/javascript>
$(document).ready(function(){
    $(".btn btn-info btn-file").click(function(){
        $(".fileinput-preview thumbnail").show();
       });
});
</script>

jsFiddle http://jsfiddle.net/3717h5mg/1/

Unfortunately, this setup is not functioning as expected.

javascriptjqueryhtmlcss

Answer №1

experience

$(document).ready(function(){
    $(".btn.btn-info.btn-file").change(function(){
         $(".fileinput-preview.thumbnail").display();
    });
});

IMPORTANT : Remember to include the dot(.) selector in the click event for $(".btn btn-info btn-file"), and also the thumbnail class

SEE DEMO

Answer №2

Display the thumbnail when a file is selected

$(document).ready(function(){
 $('input[type="file"]').change(function () {
     $(".fileinput-preview.thumbnail").show();
 });
});

Answer №3

It was mentioned by Bala and anspsmn that the solution lies in handling the 'onchange' event, addressing your question directly. However, for a simpler approach, you may consider using a Jquery plugin to achieve the same task more efficiently. I have personally created a Jquery plugin that can be easily tailored to suit your specific requirements. This plugin allows you to select images (or any file type), preview them, crop if necessary, and seamlessly upload them. Additionally, it offers features such as setting maximum file size in KB, drag and drop functionality, customizable buttons, and more.

For example:

$('#your-input-file').customFile({
   type : 'image',
   maxKBperFile : 500,
   maxFiles : 1
});

For further information and to download the plugin, please visit: Jquery Custom Input File

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Solving the issue of IE7 div overflow-y: scroll causing content to be obscured by the scrollbar

I am facing an issue with a table inside a div (#body) that scrolls along the y-axis. Specifically, in Internet Explorer, the scrollbar is hiding part of the last table cell behind it, causing a shift in the layout of the table columns. This problem does n ...

cssinternet-explorergoogle-chromevertical-scrolling

What steps should I take to resolve this issue? ERROR TypeError: Unable to access property 'user' of null object

Is there a way to resolve the error I'm encountering in my project? The error message is: ERROR TypeError: null is not an object (evaluating 'userdata.user'). Using React Native Expo, I am facing this issue after logging into my app and navi ...

javascriptnode.jsreactjsreact-native

Implementing CSS Media Print, tables elegantly transition to a fresh page

I am encountering a challenge when it comes to printing my dynamic table along with some preceding text. It seems that sometimes the table begins on a new page, resulting in the header test being isolated on the first page and only displaying the table on ...

htmlcssprinting

Vue 3: Leveraging Functions Within Mutations.js in Vuex Store to Enhance Functionality

In my mutations.js file, I have encountered a situation where one function is calling another function within the same file. Here's an example of my code: export default { async addQuestionAnswer(state, payload) { alert(payload); this.update ...

javascriptvue.jsvuejs3vuex

"multer's single file upload functionality is not functioning properly, but the array upload

Currently, I am facing an issue while using react js to upload a single file. Interestingly, the multer.single() method seems to fail, whereas the multer.array() method works perfectly fine. What could be causing this problem? //Node.js const upload = mult ...

javascriptnode.jsreactjsmulter

JSON: Automatically choose the radio button based on the provided response

Is there a way to automatically select the checked state of radio buttons based on data retrieved from a database? I need to populate this form's radio button with data <div class="col-md-4"> <label> <input type="radio" name="m ...

phpjqueryjsonajaxcodeigniter

Utilizing either Maps or Objects in Typescript

I'm in the process of developing a simple Pizza Ordering App. The concept is, you select a pizza from a list and it's added to a summary that groups all the selections together. Here's how I want it to appear: Pizza Margarita 2x Pizza Sala ...

javascripthtmlangulartypescript

Is it normal that my website isn't scrollable on an iPhone?

I have a hunch that the issue is related to the CSS, or perhaps it could be due to including the parallax JavaScript library. You can view the site at Below is the SASS code snippet: @import "compass/css3"; /* Sticky footer styles ---------------------- ...

ioscsscoffeescriptsassparallax

What is the best way to emphasize a link to the current page in vue.js?

I am working on a sidebar feature that displays several dynamically generated links (similar to creating notes and then linking to them): https://i.stack.imgur.com/1lxcy.png Users can add a new note by clicking the 'Add stage' button. The list ...

javascriptvue.jsroutesvue-componentvuetify.js

Verify that all checkboxes have been ticked

Is there a way to verify if all the checkboxes labeled with class="abc" are chosen? I have to perform this verification whenever any of them is either checked or unchecked. Should I do it upon clicking or changing? ...

jquery

What steps do I need to take to successfully integrate Font Awesome 5 with React?

Here is an interesting scenario: the initial icon is displayed, but it fails to update when the class changes. const Circle = ({ filled, onClick }) => { const className = filled ? 'fas fa-circle' : 'far fa-circle'; return ( ...

javascriptreactjsfont-awesomefont-awesome-5

Prevent the loading of multiple jQuery versions

Currently on Yii 2.0.9, I am encountering an issue with conflicting jquery versions. The framework loads jquery 2.2.4 without any issues, but the krajee extensions are introducing jquery 1.7.2 which I do not prefer. Is there a way to modify my AppAssets ...

jqueryyii2

Manipulating the size of one div automatically adjusts the size of the other, as they are

I have encountered an issue while trying to manage two resizable divs. I am looking for a solution where changing the size of one div will automatically adjust the size of the other div along the grid, and vice versa. Currently, I am only able to achieve ...

htmlcss

"Vue Filepond: Enhancing Your Images with Cropping

Currently, I am integrating filepond with VueJS to facilitate image uploads. To enable image cropping during upload, a specific configuration is required. The filepond plugin has been globally registered, as shown below: import Vue from 'vue'; i ...

javascriptimagevue.jsfile-uploadfilepond

Modify jQuery to update the background image of a data attribute when hovering over it

Something seems to be off with this topic. I am attempting to hover over a link and change the background image of a div element. The goal is to always display a different picture based on what is set in the data-rhomboid-img attribute. <div id="img- ...

javascriptjqueryhtmlcssmouseover

How to retrieve the path, route, or namespace of the current or parent component/view in a Vue.js application

I have been working on enhancing a sub-menu system for vue.js that dynamically populates based on the children routes of the current route. I recently asked a question about this and received a helpful answer. Currently, I am trying to further improve the ...

javascriptvue.jsvue-router

Tips for ensuring all my onclick event are clickable in iOS browser

Currently, I am developing a web page using HTML5 and JQuery Mobile. I have encountered an issue where the onclick function does not work on iOS device browsers. Is there a way to change all onclick events to be accessible through tapping instead? This wou ...

javascripthtmljquery-mobile

Differences between Next.js Image and regular img tag regarding image quality

I am currently using Next.js and have noticed that my images appear slightly blurry when utilizing Next/Image. Below is a snippet of my code: <img src={url} width={articleWidth} /> <Image className="text-center" src={url} ...

htmlcssimagenext.js

Refuse to alter the status of the checkbox

Is there a way to prevent any checkbox state from being changed? window.blockCheckboxChange = function(event) { e = event || window.event; if (e) { e.stopPropagation(); e.preventDefault(); var t = $(e.target); t.prop({checked: typeof ...

javascriptjquerycheckbox

Redux does not have the capability to insert an object into an array

I'm currently learning about redux and I've encountered an issue trying to add multiple objects into the initialState array. I attempted using the push() method, but it isn't working as expected. The submitter value is being passed to my act ...

javascriptreactjsarraysreduxpush