PHP+HTML5 implement no Refresh picture upload tutorial, _php tutorial

PHP+HTML5 implement no Refresh image upload tutorial,

This article introduces a brand-new way of uploading images, using HTML5 's filereader to read image files, and then transfer the data to the server and then use PHP for processing. The implementation process is as follows (with picture preview function)
Front-end HTML code upload,html

  
 
  Upload        

Styles such as

Next is the JS code

Next is the PHP processing code handle.php

$imgtype = Array (  ' gif ' = = ' gif ',  ' png ' = = ' png ', ' jpg ' = ' jpeg ', ' jpeg ' = ' jpeg '  ); Image type the corresponding header information in the transmission process $message = $_post[' message '; Receive Base64 encoded image data $filename = $_post[' filename ']; Receive file name $ftype = $_post[' filetype ']; Receive file type//first remove the header information, 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 file $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 the file and click Upload Effect as

The above is the entire image upload code. Of course, there are many parts of the PHP can be optimized, such as the file name part, can be renamed to ensure that the same file name is uploaded after the file name is different, and so on. This upload method I was just beginning to use, was by node. js to upload the inspiration, and then try to apply to PHP, did not expect to really upload success.

I hope you can also follow this method to achieve image upload.

Articles you may be interested in:

• PHP picture upload class with picture display
• Simple PHP Image upload Program
• PHP ajax No Refresh upload image instance code
• PHP Image upload Class Code
• thinkphp Image upload function sharing
• Use PHP and HTML5 formdata for no-refresh file upload Tutorial
• Thinkphp combining Ajaxfileuploader to realize the method of no-refresh file uploading
• PHP multiple file and image upload examples of detailed

http://www.bkjia.com/PHPjc/1094753.html www.bkjia.com true http://www.bkjia.com/PHPjc/1094753.html techarticle PHP+HTML5 Implementation of the No-refresh image upload Tutorial, this article introduces a brand-new way to upload images, using HTML5 filereader to read image files, and then transfer data to the server ...

