Ways to display the title of the image being viewed

I had an issue while working with the input type="file" in HTML. Every time I tried to browse a new image, the name of the image did not show up beside the button. Can anyone provide some guidance on how to fix this problem?

Here is my fiddle with the code: http://jsfiddle.net/DharkRoses/X3S4a/171/

Here is a snippet of the code:

<form method="POST" action="myurl"> <span class="btn btn-success fileinput-button">
    <span>Select file</span>
       <input type="file" name="file">
    </span>
</form>
javascriptangularjscss

Answer №1

If you're looking to accomplish this task, be sure to visit the following link

HTML:

<form method="POST" action="myurl"> <span class="btn btn-success fileinput-button">
        <span>Select file</span>

    <input type="file" name="file" onchange="setName(this)"><span id="fileName"></span>
        </span>
</form>

JavaScript:

function setName(val){
     var ind = (val.value).lastIndexOf("\\");
     var substr = val.value.substring(ind+1,val.value.length);
     document.getElementById('fileName').innerHTML = substr;
    }

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

Executing multiple ajax calls and retrieving the results: A step-by-step guide

I am looking to run a series of Ajax calls and collect the responses before rendering the results for the user. The current code I am using is not working as expected because the render function is being executed before all the Ajax responses have been ga ...

javascriptjqueryajax

Inheriting Django templates for a unique CSS class markup approach

I want to create a master.html file for inheritance, but I'm facing an issue where the code is repetitive in three different places except for the body class. Here's my current master.html: <html> <head>...</head> <body& ...

cssdjangodjango-templates

Failure in importing a custom CommonJS module

I developed a CommonJS module in project A using the following structure: const { WebElement } = require('selenium-webdriver'); const { By } = require('selenium-webdriver'); class VlElement extends WebElement { constructor(driver, ...

javascriptnode.js

Jade not responding to AngularJS click directive function

This tutorial is inspired by the MEAN Stack demo: Mongo, Express, AngularJS, and NodeJS I am attempting to incorporate a 'delete' method into my controller in the Jade template as shown below: characters.jade script function CharactersCont ...

javascriptnode.jsangularjspug

The dynamic page fails to export with a static export in NextJS, resulting in an output error: "

I'm struggling to export a route in my NextJS 14 project. I've set the output to export and all routes are exporting correctly except for the dynamic ones. The folder for the dynamic route is not showing up in the output folder The version of Ne ...

javascriptreactjsnext.jsbuildexport

Is there a way to determine if a user is actively reading a page using Javascript?

As I work on creating a webpage that utilizes AJAX polling to bring dynamic content into the view, I have come across a challenge. With the page JavaScript constantly downloading updated information and rendering it while users are engaged with other conte ...

javascriptajax

Tips for displaying a sub-menu upon hovering

I am attempting to display the list of sub-menu items when hovering over the main menu item. I have tried using the following CSS code, but it did not work as expected. Any assistance will be greatly appreciated. CSS: summary.header__menu-item.list-menu__ ...

javascripthtmlcss

Another option instead of using ng-repeat when scope is not required

Currently, I am facing a problem where Angular is generating a large number of rows and columns, resulting in poor performance! I suspect that the issue lies with ng-repeat creating a new scope for each element it generates. However, since my function doe ...

angularjsperformanceangularjs-ng-repeat

Although req.user is undefined, the login process is functioning properly

Solution Quest This inquiry has been posed countless times, yet none of the responses have resolved my issue. In all my app's routes, the req.user call consistently returns undefined, regardless of which route I access. Interestingly, my login funct ...

javascriptmysqlnode.jsexpresspassport.js

Track and manage date ranges inclusive of specific times

http://jsfiddle.net/7vzapm49/1/ var startdatearr = [new Date("04 Dec 2014 14:30:00").toUTCString(), new Date("07 Dec 2014 14:30:00").toUTCString()]; var enddatearr = [new Date("05 Dec 2014 14:30:00").toUTCString(), new Date("08 Dec 2014 14:30:00").toUTCSt ...

javascriptdate

Accessing PHP variables within a React componentTo access external

How can I pass the id selected in a menu from a react component to a PHP file, after already knowing how to send data from PHP to the react component? $.ajax({url: '/file.php', type: 'POST', dataType: 'json', ...

javascriptphpmysqlajaxreactjs

Whenever I initiate a React project by running npm start, I encounter specific messages displayed on the terminal

After executing npm start to initialize a react project, I encounter the following error messages in the terminal: npm ERR! code ENOENT npm ERR! syscall open npm ERR! path /Users/eraldomaia/package.json npm ERR! errno -2 npm ERR! enoent ENOENT: no such fil ...

javascriptnode.jsnpm

Error in External JavaScript File and Uncaught Reference Error

Wanting to utilize a separate Javascript file with my HTML code, I encountered an issue. Here is the code for the HTML document: <!DOCTYPE html> <html> <a href="javascript:showAlert()">Show Alert!</a> <script type="text/jav ...

javascripthtml

Can multiple background images be handled by Firefox/Opera when positioned?

Encountering difficulties with certain background images not showing in Firefox and Opera, while all other browsers are working as expected (except IE, which always presents its own challenges). As of now, Opera is refusing to accept multiple background i ...

firefoxcssopera

What is the reason for the malfunctioning of this button upon clicking?

Attempting to customize my personal website by making the sidebar width change when the sidebar button is clicked. I'm puzzled as to why it's not working as intended. I prefer to figure it out independently but any helpful tips would be appreciat ...

javascripthtmlcss

What is the best way to display a placeholder instead of the state's value when a page loads?

I'm having trouble displaying the placeholder of an input instead of its state value. When the page loads, it shows an empty select box because the testType state is null initially. How can I make sure that only the placeholder is shown instead of the ...

javascripthtmlreactjsreact-hooksuse-state

Fetching an attribute from an array using a URL parameter in JavaScript

I am attempting to filter a JSON array based on a value from a URL and extract the vernacularName attribute. While debugging in F12, I can successfully retrieve the correct variable using record[0].vernacularName;, however, the code below still does not wo ...

javascriptjson

Obtaining information to facilitate two-way data binding

How can I access data from a method defined within an onclick function? onclick: function(d, i) { $scope.country = d.name; console.log($scope.country); } I am trying to retrieve the name from the object and display it in an HTML <h1>Clicked: {{ ...

javascriptangularjsc3.js2-way-object-databinding

Designing a flexible and consistent grid system using only CSS to showcase any number of images, ensuring each tile seamlessly adjusts to the dimensions of the largest element

[edit : preamble] Regardless of the nature of your response, please support your arguments with technical references from credible sources. Appreciate your help in advance. [Question] I am seeking to design a CSS grid layout that is responsive for image ...

css

Error Encountered: ModalInstanceProvider Not Found

Just diving into AngularJS and struggling to decipher the meaning behind this error. I noticed others encountering a similar issue, but it doesn't appear to align with my specific problem. Unknown provider: $modalProvider <- $modal error with Angu ...

angularjsangular-uiangular-ui-bootstrap