This article shares examples of js HTML5 multi-picture upload and preview examples for your reference. The specific content is as follows
Main application
1. HTML5 files can select multiple files and obtain multiple file information
2. XMLHTTPRequest object, send HTTP transmission request
3. Place each file in FormData for transmission
4. Use readAsDataURL to directly turn the image content into a url, place it in the src of the img tag, and generate previewable pictures.
html+css+js code
<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html" charset="utf-8" /><title>test html FileReader</title><style type="text/css">html,body,header,footer,div,ul,li,h1,h2,h3,h4,h5,h6,label,input,textarea,p,span,a{ padding: 0; margin: 0;}img { border: 0;}em,strong{ font-weight: normal; font-style: normal;}ul { list-style: none;}h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 100%;}a,a:after{ text-decoration:none;}.photo_wrap{ clear:both;}.photo_wrap li{ margin:10px; width:150px; float:left;}.photo_box { height:150px; width:150px; overflow:hidden; position:relative;}.photo_box .img1{ height:150px;}.photo_box .img2{ width:150px;}.upload_result{ height:50px;}.btn{ position:relative; height:40px; width:100px; float:left;}.btn{ height:40px; line-height:40px; color:#FFF; display:block; border-radius:3px; text-align:center; background-color: #FF5581; /* Old browsers */ background-image: -moz-linear-gradient(top,#FA7B9C 0%, #FF5581 100%); /* FF3.6+ */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FA7B9C), color-stop(100%,#FF5581)); /* Chrome,Safari4+ */ background-image: -webkit-linear-gradient(top,#FA7B9C 0%, #FF5581 100%); /* Chrome10+,Safari5.1+ */ background-image: -o-linear-gradient(top,#FA7B9C 0%, #FF5581 100%); /* Opera 11.10+ */ background-image: -ms-linear-gradient(top,#FA7B9C 0%, #FF5581 100%); /* IE10+ */ background-image: linear-gradient(to bottom,#FA7B9C 0%, #FF5581 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FA7B9C', endColorstr='#FF5581',GradientType=0 ); /* IE6-8 */ box-shadow:0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 2px rgba(0, 0, 0, 0.3);}.btn_add_pic{ width:100px; position:absolute; top:0; left:0;}.btn_upload{ width:100px; margin:0 10px 10px; float:left;}.btn:hover,.btn_cur{ background-color: #FB99B1; /* Old browsers */ background-image: -moz-linear-gradient(top,#FB99B1 0%, #FF5581 100%); /* FF3.6+ */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FB99B1), color-stop(100%,##FF5581)); /* Chrome,Safari4+ */ background-image: -webkit-linear-gradient(top,#FB99B1 0%, #FF5581 100%); /* Chrome10+,Safari5.1+ */ background-image: -o-linear-gradient(top,#FB99B1 0%, #FF5581 100%); /* Opera 11.10+ */ background-image: -ms-linear-gradient(top,#FB99B1 0%, #FF5581 100%); /* IE10+ */ background-image: linear-gradient(to bottom,#FB99B1 0%, #FF5581 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FB99B1', endColorstr='#FF5581',GradientType=0 ); /* IE6-8 */}.file_input_wrap{ position:absolute; top:0; left:0; width:100px; height:40px;}.file_input_wrap label{ width:100%; height:100%; display:block; opacity:0; cursor:pointer;}.file_input_wrap input{ opacity:0; filter:alpha(opacity=0);/*ie8 and below*/ position:absolute; top:7px; right:173px; cursor:pointer; width:95px;}.photo_box .icon_pos{ height:20px; width:20px; display:block; position:absolute; right:0; bottom:0;}.photo_box .loading{ height:10px; display:block; position:absolute; left:0; bottom:0; background-image:url(loading.gif);}.sucess_icon{ background-image:url(icons_01.png); background-position:0 0;}.error_icon{ background-image:url(icons_01.png); background-position:-20px 0;}</style></head><body><div> <a id="J_add_pic" href="javascript:;">Add image</a> <div> <input type="file" id="file" name="file" accept="image/*" multiple onChange="fileInfo(this)" /> <label id="J_add_area"></label> </div></div><a id="J_upload" href="javascript:;">Start upload</a><div id="J_photo_wrap"> <ul> </ul></div></body><script type="text/javascript" src="jquery-1.7.2.min.js"></script><script type="text/javascript"> var img_index = new Array(); function upload_img(){ var j=0; img(); function img(){ //1. Create XMLHTTPRequest object if (img_index.length > 0){ var singleImg = img_index[j]; var xmlhttp; if (window.XMLHttpRequest) { //IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest; //Fix if for certain specific versions of mozillar browser bugs (xmlhttp.overrideMimeType) { xmlhttp.overrideMimeType('text/xml'); }; } else if (window.ActiveXObject){ //IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }; if(xmlhttp.upload){ //Progress bar xmlhttp.upload.addEventListener("progress", function(e) { if (e.lengthComputable) { var load_percent = (e.loaded / e.total) * 100; $('#J_photo_wrap ul li').eq(j).find('.loading').css('width',load_percent+'%'); } }, false); //2. Callback function //onreadystatechange is the event handle function called every time the readyState property changes xmlhttp.onreadystatechange = function(e){ if(xmlhttp.readyState==4){ if(xmlhttp.status==200){ var json = eval('(' + xmlhttp.responseText + ')'); if(json.status == 1){ $('#J_photo_wrap ul li').eq(j).find('.upload_result').text(singleImg.name+'upload completed'); $('#J_photo_wrap ul li').eq(j).find('.loading').hide(); $('#J_photo_wrap ul li').eq(j).find('.icon_pos').addClass('sucess_icon'); }else{ $('#J_photo_wrap ul li').eq(j).find('.upload_result').text(singleImg.name+'upload failed'); $('#J_photo_wrap ul li').eq(j).find('.loading').hide(); $('#J_photo_wrap ul li').eq(j).find('.icon_pos').addClass('error_icon'); } }else{ $('#J_photo_wrap ul li').eq(j).find('.upload_result').text(singleImg.name+'Upload failed'); $('#J_photo_wrap ul li').eq(j).find('.loading').hide(); $('#J_photo_wrap ul li').eq(j).find('.loading').hide(); $('#J_photo_wrap ul li').eq(j).find('.icon_pos').addClass('error_icon'); } if (j < img_index.length - 1) { j++; img(); } } } }; //3. Set connection information//Initialize HTTP request parameters, but do not send requests. //The first parameter connection method is, the second is the url address, and the third true is an asynchronous connection, which is asynchronous by default //Send data using post method xmlhttp.open("POST","upload.php",true); //4. Send data, start interacting with the server //Send HTTP requests, use the parameters passed to the open() method, and the optional request passed to the method. If true, the sentence send will be executed immediately //If it is false (synchronous), send will be executed only after the server data comes back //Get method does not require content in send var formdata = new FormData(); formdata.append("FileData", singleImg); xmlhttp.send(formdata); } //} } } }; $('#J_upload').click(function(){ upload_img(); }); $('#J_add_area').hover( function(){ $('#J_add_pic').addClass('btn_cur'); }, function(){ $('#J_add_pic').removeClass('btn_cur'); } ); $('#J_add_area').click(function(){ $('#file').click(); }); function resize(img){ if(img.offsetHeight>img.offsetWidth){ $(img).removeClass('img1').addClass('img2'); }else{ $(img).removeClass('img2').addClass('img1'); } } function fileInfo(source){ var ireg = /image//.*/i; var files = source.files; var name,size,type; for(var i = 0, f; f = files[i]; i++) { name = f.name; size = f.size; type = f.type; if(!type.match(ireg)) { $('#J_photo_wrap ul').append('<li><div>'+name+' is not an image<span></span><span></span></div><div></div></li>'); }else{ img_index.push(f); if(size>1048576){ $('#J_photo_wrap ul').append('<li><div>'+name+' is too big to generate a preview<span></span><span></span></div><div></div></li>'); }else{ if(window.FileReader) { var fr = new FileReader(); fr.onload = (function(f) { return function(e){ $('#J_photo_wrap ul').append('<li><div><img onload="resize(this);" src="'+this.result+'"/><span></span><span></span><div></div></li>'); }; })(f); fr.readAsDataURL(f); } } } } } } };</script> </html>PHP received the file code (here only gets the file name, type, and size, and no other operations are performed)
<?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;?>
Existing problems
1. In order to generate thumbnails, readAsDataURL will take up memory when reading the file content, so large images will cause the browser to get stuck or crash.
2. Uploading is not processed in segmentation
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.