How can i download jpg file in php?
 Show Hello reader, Today in this blog, you’ll learn how to Upload, Preview & Download Images using JavaScript & PHP. Earlier, I’ve shared many blogs related to PHP [Custom Simple PHP Chatbot, Send Email from Localhost, Login & Signup Form with Email Verification] and many more. Now time to create another program (Easily Download Image through URL) using PHP. In this program [Image Download using PHP], on the webpage, there is an image preview box with an image gallery icon, one input field to paste the image URL, and a button to download the image. This input field is fully validation that means the user can’t upload any other URL except images. When you paste a valid image URL that has like .png or .jpeg extension then there is shown a preview of that image, and the download button also active to download the image, by default the download button is disabled at first. When you click on the download button, it immediately downloads the image. If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program [Download Image using JavaScript & PHP]. Video Tutorial of Download Image in JavaScript & PHP
In the video, you have seen how we can download any images on one click using PHP. I hope you’ve understood the basic codes behind creating this program. In this video, I’ve only created the design part of the Image Download Program. In the second part of this video, I have completed the JavaScript and PHP codes of this program. If you haven’t still watched this video, please watch because I’ve explained each line of JavaScript and PHP code with the comments. This design is fully based on HTML & CSS but to validate image extension and show preview of the image I used JavaScript and to download images I used cUrl in PHP. cURL is a tool for transferring files and data with URL syntax, supporting multiple protocols – HTTP, FTP, TELNET, and more. You might like this:
Download Image in JavaScript & PHP [Source Codes]To create this program [Image Download using PHP]. First, you need to create two Files one PHP File and another one is CSS File. After creating these files just paste the following codes in your file. First, create a PHP file with the name of index.php and paste the given codes in your PHP file. Remember, you’ve to create a file with .php extension.
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension. @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
place-items: center;
}
::selection{
color: #fff;
background: #4158d0;
}
.wrapper{
height: 450px;
width: 500px;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
}
.wrapper .preview-box{
position: relative;
width: 100%;
height: 320px;
display: flex;
text-align: center;
align-items: center;
justify-content: center;
border-radius: 5px;
border: 2px dashed #c2cdda;
}
.preview-box.imgActive{
border: 2px solid transparent;
}
.preview-box .cancel-icon{
position: absolute;
right: 20px;
top: 10px;
z-index: 999;
color: #4158d0;
font-size: 20px;
cursor: pointer;
display: none;
}
.preview-box.imgActive:hover .cancel-icon{
display: block;
}
.preview-box .cancel-icon:hover{
color: #ff0000;
}
.preview-box .img-preview{
height: 100%;
width: 100%;
position: absolute;
}
.preview-box .img-preview img{
height: 100%;
width: 100%;
border-radius: 5px;
}
.wrapper .preview-box .img-icon{
font-size: 100px;
background: linear-gradient(-135deg, #c850c0, #4158d0);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.wrapper .preview-box .text{
font-size: 18px;
font-weight: 500;
color: #5B5B7B;
}
.wrapper .input-data{
height: 130px;
width: 100%;;
display: flex;
align-items: center;
justify-content: space-evenly;
flex-direction: column;
}
.wrapper .input-data #field{
width: 100%;
height: 50px;
outline: none;
font-size: 17px;
padding: 0 15px;
user-select: auto;
border-radius: 5px;
border: 2px solid lightgrey;
transition: all 0.3s ease;
}
.input-data #field.disabled{
color: #b3b3b3;
pointer-events: none;
}
.wrapper .input-data #field:focus{
border-color: #4158d0;
}
.input-data #field::placeholder{
color: #b3b3b3;
}
.wrapper .input-data #button{
height: 50px;
width: 100%;
border: none;
outline: none;
color: #fff;
font-weight: 500;
font-size: 18px;
cursor: pointer;
border-radius: 5px;
opacity: 0.5;
pointer-events: none;
background: linear-gradient(-135deg, #c850c0, #4158d0);
transition: all 0.3s ease;
}
.input-data #button.active{
opacity: 1;
pointer-events: auto;
}
.input-data #button:active{
transform: scale(0.99);
}
That’s all, now you’ve successfully created a How to Upload, Preview & Download Image using JavaScript & PHP. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it. How can I download image from PHP?a-z]$/i', $file)){ $filepath = "images/" . $file; // Process download if(file_exists($filepath)) { header('Content-Description: File Transfer'); header('Content-Type: application/octet-stream'); header('Content-Disposition: attachment; filename="'.
How can I download file from PHP?PHP enables you to download file easily using built-in readfile() function. The readfile() function reads a file and writes it to the output buffer.. header('Content-Type: application/octet-stream');. header("Content-Transfer-Encoding: utf-8");. How can I download URL from PHP?Steps to download the file:. Initialize a file URL to the variable.. Create cURL session.. Declare a variable and store the directory name where the downloaded file will save.. Use the basename() function to return the file basename if the file path is provided as a parameter.. Save the file to the given location.. How can I use image in PHP?Create The HTML Form. . . . . . . . |
