Guide on updating directory images by uploading a new one directly onto the site

As someone who is new to HTML, I have a question about updating images on my website through an "admin" page. Currently, I have two websites set up - the main site displays an image from the "images" folder, and the second site serves as an admin page. My goal is to create a way for users to easily change the picture on the main site without having to access the "images" folder directly. I envision adding an upload button on the admin page that will replace the existing image.jpeg with a new one. How can I go about implementing this feature?

htmlcss

Answer №1

move_uploaded_file($_FILES['fileToUpload']['name'], $file_location

If you need to upload an image in PHP with the same name (e.g. image.jpeg) to the same directory, you can easily accomplish this using the provided function. This will replace the previous image, and upon refreshing the page, the new image will be displayed on your website. In case of browser caching issues where the old picture is still shown, you can append a random number at the end of the image source like so:

src=path_and_name_of_file.extension?randomNumber

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

Tips for implementing custom styles on React components that have been imported locally

I'm currently struggling with applying CSS successfully to components imported from an npm library. My main challenge seems to be my use of css-loader in the react starter kit (https://github.com/kriasoft/react-starter-kit) without a full understandin ...

cssreactjsnpmcss-loader

Conceal a different CSS class if a certain CSS class is present on the page

I am currently working on organizing my page to distinguish between purchased and unsold products. For the items that have been bought, I am using the CSS class "winning_bid" within a div element. My goal is to hide another div with the class "price" if th ...

javascriptcsswordpress

Toggle checkbox feature in Bootstrap not functioning properly when placed within ng-view

When attempting to embed a bootstrap toggle checkbox within <ng-view></ng-view>, an issue arises where a regular HTML checkbox is displayed instead of the expected bootstrap toggle. Strangely, the same checkbox functions as a bootstrap toggle w ...

javascripthtmlcssangularjstwitter-bootstrap

Deactivate the connection button for accessing the database

I'm currently developing a PHP script to establish a connection with a MySQL database. My goal is to deactivate a button and display a spinner image when I click on a submit button to initiate the database connection. Below is the code snippet I have ...

phpcssbootstrap-4

Can a CSS hover effect transition modify the color scheme?

I have multiple buttons on a single page, and I want the hover effect to be applied to all of them with just one code using jQuery. Please review my code below. $(document).ready(function(){ $('.button').hover(function(){ var bc=$(this ...

javascriptjqueryhtmlcsshover

What are the steps for encoding a value using jquery serialize?

I attempted to encode all values using the following code: encodeURIComponent($("#customer_details").serialize()); Unfortunately, it did not produce the desired results. Is there a method to retrieve all elements on a form and individually encode each v ...

javascriptjqueryhtml

What is the process for linking functionality to buttons in Embedded Elixir?

When it comes to rendering templates, I follow this method: <%= for country <- @countries do %> <div> <div>A compilation of countries you have visited</div> <a href="/countries/<%= String.downcase(country) %& ...

htmlelixirphoenix-framework

Utilize Angular to initiate the transmission of attribute values upon a click event

My question may be simple, but I've been struggling to find an answer. How can I send attributes or item property bindings of an item through a click event in the best way? For example: <item class="item" [attr.data-itemid]="item.id ...

htmlangulartypescriptevent-handling

Horizontal alignment of Bootstrap columns is not working as expected

While attempting to integrate Bootstrap elements into my portfolio, I encountered issues with aligning columns. Currently, the only columns I have added are in the "welcome-section" (Lines 40-52), but they refuse to align horizontally. I've tried tro ...

htmlcsstwitter-bootstrapbootstrap-4

Adjust the arrangement of divs when resizing the window

I have utilized flexbox to rearrange the boxes. Here is a link to the demo code My issue arises when resizing for smaller screens; I need to place B between A and C. https://i.stack.imgur.com/M0dpZ.png Any suggestions on achieving this goal? Thank you i ...

htmlcsssassflexbox

Ways to dynamically adjust the color of the text font?

Below is the XML content: span style="background-color: rgb(255, 255, 0); The background color mentioned here is linked to my Java code. Since this color changes dynamically, it varies in each report. My inquiry is about how to incorporate this color in ...

htmlcolorsjasper-reportsireport

When it comes to @font-face, Chrome has no trouble detecting the font, but an issue

<style> @font-face { font-family : 'Avenir'; src : url("/fonts/Avenir999.otf"); } p.price a span { /*font-family : 'Avenir';*/ font-size : 45px; color: #889900; ...

htmlcssfont-facemarginpadding

Chart displaying an errant scrollbar at the bottom of the screen

Having trouble with a table that displays a scrollbar when a specific row is added. The first and second rows in the code below display correctly. However, adding the third row within the foreach loop causes a scrollbar to appear at the bottom. This issu ...

htmlcss

Using jQuery and Ajax to fade in content after all images and other assets have finished loading

I've encountered an issue with loading pages via ajax for users with custom URLs. For example, a profile is usually found at http://example.com/users/Dan, but if a user has a custom URL like http://example.com/DansCustomURL, I need to fetch their desi ...

javascriptjqueryhtmlajax

How to extract text from outside a tag using Selenium in Python3 with Chrome?

I am having trouble extracting text from outside of a tag. Currently, I am working with Python3.7 and I have experimented with both Selenium and BeautifulSoup4. Below is the HTML snippet I am dealing with: <br> <span class="label">Max. Allo ...

htmlpython-3.xselenium

Manipulate and scale with jQuery

I am currently utilizing the jQueryUI library with its Draggable and Resizable functionalities to resize and drag a div element. However, I am encountering some unexpected behavior where the div jumps outside of its container upon resizing. How can I resol ...

javascriptjqueryhtmlcssjquery-ui

Ways to create a clickable red button

I'm working with bootstrap, CSS, and particle.js for this project. I have also linked a custom CSS file here. However, when I apply bootstrap and particle.js, the red color generate password button becomes unclickable. After checking in Chrome dev too ...

htmlcsstwitter-bootstrapbootstrap-4particles.js

Guide on displaying ajax data using PHP

I'm attempting to display the user-entered data by using AJAX to transfer it and then trying to print or echo it with PHP, but I'm having trouble getting it to work. enter code here Here is my code: <html> <head> <title> ...

javascriptphphtmlajaxecho

Using a timer to make Ajax calls twice on a single webpage

Can multiple ajax calls be made simultaneously on the same page to different receiving div tags? I am struggling to find a solution to this issue. I have a total of 3 pages: a home page, and two PHP pages named status and alert which echo the results. Wi ...

javascriptphphtmlajax

phperror message is included and echoed

I am facing an issue while trying to utilize the php include tag for my header and footer sections. Even though my index file and header.php file seem to be error-free, the included file is not showing up when I preview it in a browser. Is there an easy fi ...

phphtmlinclude