Shulou(Shulou.com)05/31 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.