497356711824
Cross-Border Investigator
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 2
1000 XP
In this tutorial we will show you how to create a Simple Image Preview Before Upload. This feature lets the user view the chosen image before they upload it. And you can easily add image preview option on file upload using JavaScript and jQuery. Simple Image Preview Before Upload is a most required feature for file upload functionality. It helps the user to view chosen file and change the image before upload. From the user perspective, it is very helpful to uploading perfect image or file without doing the repetitive upload.
Sample Code
Upload.php - This script is use to upload the file to the respective directory when the user clicked on submit button.
JavaScript File Reader - it will be used to read the content of the file in file preview function. Once the file content is loaded we’ll render the image preview under the file upload form.
Index.html - This is for the GUI of the web page to make it more responsive and attractive.
Hope that you learn in my tutorial. Don't forget to LIKE & SHARE this website. Enjoy Coding.
Download
Sample Code
Upload.php - This script is use to upload the file to the respective directory when the user clicked on submit button.
- <?php
- if
(
isset
(
$_POST
[
'submit'
]
)
&&
!
empty
(
$_FILES
[
'file'
]
[
'name'
]
)
)
{
- if
(
move_uploaded_file
(
$_FILES
[
'file'
]
[
'tmp_name'
]
,
"uploads/"
.
$_FILES
[
'file'
]
[
'name'
]
)
)
{
- echo
'File has uploaded successfully.'
;
- }
else
{
- echo
'Some problem occurred, please try again.'
;
- }
- }
- ?>
JavaScript File Reader - it will be used to read the content of the file in file preview function. Once the file content is loaded we’ll render the image preview under the file upload form.
- function
filePreview(
input)
{
- if
(
input.files
&&
input.files
[
0
]
)
{
- var
reader =
new
FileReader(
)
;
- reader.onload
=
function
(
e)
{
- $(
'#uploadForm + img'
)
.remove
(
)
;
- $(
'#uploadForm'
)
.after
(
'<img src="'
+
e.target
.result
+
'" width="450" height="300"/>'
)
;
- }
- reader.readAsDataURL
(
input.files
[
0
]
)
;
- }
- }
- $(
"#file"
)
.change
(
function
(
)
{
- filePreview(
this
)
;
- }
)
;
Index.html - This is for the GUI of the web page to make it more responsive and attractive.
- <!DOCTYPE html>
- <html
>
- <head
>
- <title
>
Simple Image Preview Before Upload</
title
>
- <link
rel
=
"stylesheet"
type
=
"text/css"
media
=
"screen"
href
=
"css/style.css"
/
>
- <link
rel
=
"stylesheet"
type
=
"text/css"
media
=
"screen"
href
=
"bootstrap/css/bootstrap.min.css"
/
>
- <script
src
=
"js/jquery.min.js"
></
script
>
- </
head
>
- <body
>
- <nav class
=
"navbar navbar-default"
>
- <div
class
=
"container-fluid"
>
- <div
class
=
"navbar-header"
>
- <a
class
=
"navbar-brand"
href
=
"#"
><b
>
Image Preview Before Upload</
b
></
a
>
- </
div
>
- </
nav>
- <div
class
=
"container-fluid"
>
- <form
method
=
"post"
action
=
"upload.php"
enctype
=
"multipart/form-data"
id
=
"uploadForm"
>
- <div
class
=
"button"
>
- <input
type
=
"file"
name
=
"file"
id
=
"file"
/
>
- <input
type
=
"submit"
class
=
"btn btn-default"
name
=
"submit"
value
=
"Upload"
style
=
"margin-left: 385px;margin-top: -25px;"
/
>
- </
div
>
- </
form
>
- </
div
>
- </
body
>
- </
html
>
Hope that you learn in my tutorial. Don't forget to LIKE & SHARE this website. Enjoy Coding.
Download
You must upgrade your account or reply in the thread to view the hidden content.