How to upload pictures without refresh by html5+PHP
This article mainly introduces html5+PHP how to achieve non-refresh picture upload related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that after reading this html5+PHP how to achieve non-refresh picture upload articles will have a harvest, let's take a look.
Front-end html code upload,html
Upload
.upload {
Width:300px
Height:200px
Position:relative
}
.input [type = 'file'] {
Position:absolute
Width:70px
Top:0
Left:0
Z-index:10
Opacity:0
Filter:alpha (opacity=0)
}
.upload input.selbutton {
Width:70px
Height:30px
Background:#cf001b
Color:#FFF
Font-size:14px
Position:absolute
Top:0;left:0
Z-index:9
Border:none
Cursor:pointer
}
.upload input.upbutton {
Width:70px
Height:30px
Background:#cf001b
Color:#FFF
Font-size:14px
Position:absolute
Top:50px;left:0
Z-index:10
Border:none
Cursor:pointer
}
The style is as follows
Next up is the js code.
$(".upbutton") .click (function () {
/ / define the image format that is allowed to be uploaded, which can be directly judged at the front desk. Illegal formats will not be uploaded.
Var filetype = ['jpg','jpeg','png','gif']
If ($('.image') .get (0) .files) {
Fi = $('.image') .get (0) .files [0]; / / get file information
/ / determine whether the file format is an image. If not, return false.
Var fname = fi.name.split ('.')
If (filetype.indexOf (fname [1] .toLowerCase ()) =-1) {
Alert ('file format is not supported')
Return
}
/ / instantiate the fileReader of h5
Var fr = new FileReader ()
Fr.readAsDataURL (fi); / / read the picture file in base64 encoding format
Fr.onload = function (frev) {
Pic = frev.target.result; / / get the result data
/ / Preview the image before starting the upload
$('.image _ thumb') .attr (' src',pic)
/ / use ajax to submit data using post
$.post
'handle.php'
{
Message:pic
Filename:fname [0]
Filetype:fname [1]
Filesize:fi.size
}
Function (data) {
Data = eval ('('+ data+')')
If (data.code = = 1 | | data.code = = 2) {
Console.log ('upload failed')
} else if (data.code = = 0) {
Console.log ('upload successful')
}
}
);
}
}
})
Next is the PHP processing code handle.php
$imgtype = array (
'gif'= >' gif'
'png'= >' png'
'jpg'= >' jpeg'
'jpeg'= >' jpeg'
); / / header information corresponding to the picture type during transmission
$message = $_ POST ['message']; / / receive picture data encoded in base64
$filename = $_ POST ['filename']; / / receive file name
$ftype = $_ POST ['filetype']; / / receive file type
/ / first remove the header information, and then decode the remaining base64-encoded data
$message = base64_decode (substr ($message,strlen (_ 'data:image/'.$imgtype [strtolower ($ftype)].'; base64,')
$filename = $filename. ". $ftype
$furl = "D:/now/"
/ / start writing files
$file = fopen ($furl.$filename, "w")
If (fwrite ($file,$message) = false) {
Echo json_encode (array ('code'= > 1' failed'))
Exit
}
Echo json_encode (array ('code'= > 0pm contexts = > $filename))
The effect of selecting a file and clicking upload is as follows
This is the end of the article on "how to upload pictures without refresh in html5+PHP". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to upload pictures without refresh in html5+PHP". If you want to learn more, you are welcome to follow the industry information channel.
