JS HTML5 Multi-picture upload and preview case resolution (without front-end file segmentation) _javascript Tips

This example for you to share the JS HTML5 more pictures upload and preview examples for your reference, the specific content as follows

mainly used
1, HTML5 files can select multiple documents, as well as access to multiple file information
2, XMLHttpRequest object, send HTTP transmission request
3, each file in the Formdata, for transmission
4, the use of Readasdataurl will be the image content directly into the URL, placed in the IMG tag of SRC, to generate a preview of the picture

Html+css+js Code

<! DOCTYPE html>  

PHP receives the file code (here only gets the file name, type, size, no other action)

<?php
 $name = $_files[' filedata ' [' name '];
 $type = $_files[' filedata '] [' type '];
 $size = $_files[' filedata '] [' size '];
 
 $return = Array (
 "name" => $name,
 "type" => $type,
 "size" => $size,
 "status" => 1
 ); 
    $return = Json_encode ($return);
 
 echo $return;
? >

The problems that exist
1, in order to generate thumbnails, Readasdataurl read the contents of the file will occupy memory, so large images will cause browser jammed or crash
2, the upload does not carry out the subsection processing

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.