sersha
Codebase Quality Auditor
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
300 XP
This tutorial will teach you how to preview multiple images before uploading using jQuery.
Note: jQuery used in this tutorial is hosted, so, you might need internet connection for it to work.
index.html
This contains our input file that we have customize and our preview area.
custom.js
This contains our jQuery for the input file custom and image preview.
Download
Note: jQuery used in this tutorial is hosted, so, you might need internet connection for it to work.
index.html
This contains our input file that we have customize and our preview area.
- <!DOCTYPE html>
- <html
>
- <head
>
- <title
>
Multiple Image Preview using jQuery</
title
>
- <script
src
=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"
></
script
>
- <link
href
=
"https://fonts.googleapis.com/css?family=Open+Sans"
rel
=
"stylesheet"
>
- <link
href
=
"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel
=
"stylesheet"
>
- <style
>
- body{
- font-family: 'Open Sans', sans-serif;
- }
- .button {
- background-color: #4CAF50;
- border: none;
- color: white;
- padding: 16px 32px;
- text-align: center;
- text-decoration: none;
- font-size: 16px;
- margin: 4px 2px;
- cursor:pointer;
- font-family: 'Open Sans', sans-serif;
- }
- .main{
- margin-top:50px;
- }
- .hidden{
- display:none;
- }
- .h10{
- height:10px;
- }
- #filetext{
- margin-left:10px;
- }
- .title{
- font-size:25px;
- }
- .container {
- margin : 50px auto 0 auto;
- width:50%;
- }
- #filebutton{
- margin : 50px auto 0 auto;
- }
- #preview{
- margin-top:50px;
- }
- </
style
>
- </
head
>
- <body
>
- <div
id
=
"container"
>
- <div
class
=
"main"
>
- <span
class
=
"title"
><strong
><center
>
Multiple Image Preview using jQuery</
center
></
strong
></
span
>
- <span
><center
>
by <a
href
=
"https://www.sourcecodester.com/user/224918/track"
>
nurhodelta_17</
a
></
center
></
span
>
- <div
class
=
"h10"
></
div
>
- <input
type
=
"file"
name
=
"file"
id
=
"file"
class
=
"hidden"
multiple>
- <center
><button
type
=
"button"
class
=
"button"
id
=
"filebutton"
><i
class
=
"fa fa-upload"
></
i
><span
id
=
"filetext"
>
Select File</
span
></
button
></
center
>
- <div
id
=
"preview"
></
div
>
- </
div
>
- </
div
>
- <script
src
=
"custom.js"
></
script
>
- </
body
>
- </
html
>
custom.js
This contains our jQuery for the input file custom and image preview.
- $(
document)
.ready
(
function
(
)
{
- $(
'#filebutton'
)
.click
(
function
(
)
{
- $(
'#file'
)
.click
(
)
;
- }
)
;
- $(
'#file'
)
.change
(
function
(
)
{
- var
name =
$(
this
)
.val
(
)
.split
(
'\\
'
)
.pop
(
)
;
- var
file =
$(
this
)
[
0
]
.files
;
- if
(
name !=
''
)
{
- if
(
file.length
>=
2
)
{
- $(
'#filetext'
)
.html
(
file.length
+
' files ready to upload'
)
;
- }
- else
{
- $(
'#filetext'
)
.html
(
name)
;
- }
- }
- }
)
;
- $(
'#file'
)
.on
(
"change"
,
previewImages)
;
- }
)
;
- function
previewImages(
)
{
- var
$preview =
$(
'#preview'
)
.empty
(
)
;
- if
(
this
.files
)
$.each
(
this
.files
,
readAndPreview)
;
- function
readAndPreview(
i,
file)
{
- if
(
!/
\.(
jpe?
g|
png|
gif)
$/
i.test
(
file.name
)
)
{
- return
alert(
file.name
+
" is not an image"
)
;
- }
// else...
- var
reader =
new
FileReader(
)
;
- $(
reader)
.on
(
"load"
,
function
(
)
{
- $preview.append
(
$(
"<img>"
,
{
src:
this
.result
,
height:
200
}
)
)
;
- }
)
;
- reader.readAsDataURL
(
file)
;
- }
- }
Download
You must upgrade your account or reply in the thread to view hidden text.