current position：Home>How to upload pictures without refresh with HTML5 + PHP

How to upload pictures without refresh with HTML5 + PHP

2022-04-29 17:25:52【Billion cloud speed】

html5+PHP How to upload pictures without refresh

This article mainly introduces html5+PHP How to achieve no refresh picture upload related knowledge , The content is detailed and easy to understand , The operation is simple and fast , It has certain reference value , I believe that after reading this article html5+PHP How to achieve no refresh image upload articles will be fruitful , Let's have a look .

front end html Code upload,html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title> Upload </title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style>
.upload{
   width:300px;
   height:200px;
   position:relative;
}
.upload 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;
}
</style>
</head>
<body>
<div class='upload'>
   <input type="file" name="file" />
   <input type="button" name="selbutton" class="selbutton" value=" Select File " />
   <input type="button" name="upbutton" class="upbutton" value=" Upload " />
</div>
<div class='previews'>
   <img src="#" class="image_thumb" alt=" Preview picture "/>
</div>
</body>
</html>

The pattern is as follows

html5+PHP How to upload pictures without refresh

Next is js Code

<script type="text/javascript">
   $(".upbutton").click(function(){
       // Define the image format allowed to upload You can judge directly 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 a picture If it is not a picture, return false
            var fname = fi.name.split('.');
            if(filetype.indexOf(fname[1].toLowerCase()) == -1){
                alert(' File format does not support ');
                return ;
            }
            // Instantiation h5 Of fileReader
            var fr = new FileReader();
            fr.readAsDataURL(fi); // With base64 Read picture file in encoding format
            fr.onload = function(frev){
                pic = frev.target.result; // Get the result data
            // Before you start uploading , The preview image
 $('.image_thumb').attr('src',pic);
// Use ajax utilize post How to submit data
                $.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 ')
                        }
                    }
                );
            }
        }
   })
</script>

Next is PHP Processing code   handle.php

$imgtype = array(
    'gif'=>'gif',
    'png'=>'png',
    'jpg'=>'jpeg',
    'jpeg'=>'jpeg'
); // In the process of transmitting information corresponding to the type of picture
$message = $_POST['message']; // Receive to base64 Encoded image data
$filename = $_POST['filename']; // Receiving file name
$ftype = $_POST['filetype'];  // Receiving file type
// First, remove the header information , Then decode the rest 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,'con'=>'failed'));
    exit;
}
echo json_encode(array('code'=>0,'con'=>$filename));

Select a file and click upload. The effect is shown in the figure below

html5+PHP How to upload pictures without refresh

About “html5+PHP How to upload pictures without refresh ” That's all for this article , Thank you for reading ！ I'm sure you're right “html5+PHP How to upload pictures without refresh ” Knowledge has a certain understanding , If you want to learn more , Welcome to the Yisu cloud industry information channel .

copyright notice
author[Billion cloud speed],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204291539467726.html

The sidebar is recommended

guess what you like

Random recommended