"Multiple file upload with preview"
Bootstrap 3.3.0 Snippet by calvin52019

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <script type="text/javascript" src="http://www.expertphp.in/js/jquery.form.js"></script> <script> function preview_images() { var total_file=document.getElementById("images").files.length; for(var i=0;i<total_file;i++) { $('#image_preview').append("<div class='col-md-3'><img class='img-responsive img-thumbnail' src='"+URL.createObjectURL(event.target.files[i])+"'></div>"); } } </script> </head> <body> <div class="container"> <div class="row"> <form action="multiupload.php" method="get" enctype="multipart/form-data"> <div class="col-md-10"> <input type="file" accept="image/png, image/bmp, image/jpg, image/jpeg, image/gif" class="form-control" id="images" name="images[]" onchange="preview_images();" multiple /> </div> <div class="col-md-2"> <input type="submit" class="btn btn-primary" name='submit_image' value="上傳檔案"/> </div> </form> </div> <p><br></p> <div class="row"> <div class="col-md-12"> <div class="well"> <div id="image_preview"></div> <div class="clearfix"></div> </div> </div> </div> </div> </body> </html>
#formdiv { text-align: center; } #file { color: green; padding: 5px; border: 1px dashed #123456; background-color: #f9ffe5; } #img { width: 17px; border: none; height: 17px; margin-left: -20px; margin-bottom: 191px; } .upload { width: 100%; height: 30px; } .previewBox { text-align: center; position: relative; width: 150px; height: 150px; margin-right: 10px; margin-bottom: 20px; float: left; } .previewBox img { height: 150px; width: 150px; padding: 5px; border: 1px solid rgb(232, 222, 189); } .delete { color: red; font-weight: bold; position: absolute; top: 0; cursor: pointer; width: 20px; height: 20px; border-radius: 50%; background: #ccc; }
$('#add_more').click(function() { "use strict"; $(this).before($("<div/>", { id: 'filediv' }).fadeIn('slow').append( $("<input/>", { name: 'file[]', type: 'file', id: 'file', multiple: 'multiple', accept: 'image/*' }) )); }); $('#upload').click(function(e) { "use strict"; e.preventDefault(); if (window.filesToUpload.length === 0 || typeof window.filesToUpload === "undefined") { alert("No files are selected."); return false; } // Now, upload the files below... // https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Handling_the_upload_process_for_a_file.2C_asynchronously }); deletePreview = function (ele, i) { "use strict"; try { $(ele).parent().remove(); window.filesToUpload.splice(i, 1); } catch (e) { console.log(e.message); } } $("#file").on('change', function() { "use strict"; // create an empty array for the files to reside. window.filesToUpload = []; if (this.files.length >= 1) { $("[id^=previewImg]").remove(); $.each(this.files, function(i, img) { var reader = new FileReader(), newElement = $("<div id='previewImg" + i + "' class='previewBox'><img /></div>"), deleteBtn = $("<button class='btn btn-default delete' onClick='deletePreview(this, " + i + ")'>&time</button>").prependTo(newElement), preview = newElement.find("img"); reader.onloadend = function() { preview.attr("src", reader.result); preview.attr("alt", img.name); }; try { window.filesToUpload.push(document.getElementById("file").files[i]); } catch (e) { console.log(e.message); } if (img) { reader.readAsDataURL(img); } else { preview.src = ""; } newElement.appendTo("#filediv"); }); } });

Related: See More


Questions / Comments: