Created
February 17, 2020 07:37
-
-
Save Johnykaushik/0947df223cfce11c5da0da8a51cec1ba to your computer and use it in GitHub Desktop.
multi image select with delete funcationlity
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Multiple images</title> | |
| <!-- Latest compiled and minified CSS --> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> | |
| <!-- Optional theme --> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> | |
| <!-- Latest compiled and minified JavaScript --> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script> | |
| </head> | |
| <body> | |
| <style type="text/css"> | |
| .placeholder_img,.preview_video,.preview_image { | |
| max-height: 150px; | |
| height: 150px; | |
| width: 180px; | |
| max-width: 180px; | |
| cursor: pointer; | |
| } | |
| .images_container { | |
| padding:20px; | |
| } | |
| .remove-img { | |
| position: absolute; | |
| right: 18px; | |
| height: 20px; | |
| width: :20px; | |
| width: 21px; | |
| font-size: 17px; | |
| top: -5px; | |
| cursor: pointer; | |
| } | |
| .upload_image { | |
| display: none !important; | |
| } | |
| .img_url_cont { | |
| height:300px; | |
| width: 500px; | |
| position: absolute; | |
| } | |
| .img_view{ | |
| height: 100%; | |
| width: 100% | |
| } | |
| .img_url_cont { | |
| display: none; | |
| } | |
| .slide-container { | |
| width:900px; | |
| float: none; | |
| margin:auto; | |
| padding: 10px 30px; | |
| height: 300px; | |
| overflow: hidden; | |
| } | |
| </style> | |
| <form method="post" action="" enctype="multipart/form-data"> | |
| <div class="container-fluild images_container"></div> | |
| <div class="col-sm-2 choose_container"> | |
| <img src="placeholder.png" class="placeholder_img" data-recursion="-1"> | |
| </div> | |
| <input type="hidden" name="non-acceptable-images" class="not_accept" /> | |
| <input type="hidden" class="ext_record" videos="0" images="0" /> | |
| <input type="submit" name="submit" class="submit" /> | |
| </form> | |
| <script type="text/javascript"> | |
| var file_Types = { | |
| "image" : ["jpeg","jpg","png"], | |
| "video" : ["mp4","avi","3gp","flv","mov","video"] | |
| }; | |
| $(document).on("click",".placeholder_img",function(){ | |
| let recursion = $(this).attr("data-recursion"); | |
| recursion++; | |
| $(this).attr("data-recursion",recursion) | |
| $(this).parent().append(`<input type="file" name="images[${recursion}][]" class="upload_image" multiple accept="video/*,image/*" />`) | |
| $(this).parent().find("input[name='images["+recursion+"][]']").click(); | |
| $(document).on("change","input[name='images["+recursion+"][]']",function(event){ | |
| var _this = $(this); | |
| let _cls = $(this).attr("name"); | |
| _cls = _cls.replace("images",''); | |
| _cls = _cls.replace("[",''); | |
| _cls = _cls.replace("]",''); | |
| _cls = _cls.replace("[]",''); | |
| let files = event.target.files; | |
| var has_error = 0; | |
| var valid_images = 0; | |
| for(let i = 0; i < files.length;i++){ | |
| let spl = files[i].name.split("."); | |
| let get_type = spl[spl.length-1]; | |
| get_type = get_type.toLowerCase(); | |
| if(file_Types.image.indexOf(get_type) == -1 && file_Types.video.indexOf(get_type) == -1){ | |
| has_error++; | |
| }else { | |
| let uploaded_images = $(".ext_record").attr("images"); | |
| uploaded_images = parseInt(uploaded_images) | |
| uploaded_images = uploaded_images + 1 | |
| valid_images++; | |
| $(".ext_record").attr("images",uploaded_images) | |
| } | |
| } | |
| if(has_error > 0){ | |
| let uploaded_images_up = $(".ext_record").attr("images"); | |
| uploaded_images_up = parseInt(uploaded_images_up) - valid_images; | |
| $(".ext_record").attr("images",uploaded_images_up) | |
| _this.val("") | |
| alert("Please upload images or video only") | |
| return false; | |
| } | |
| if(parseInt($(".ext_record").attr("images")) > 5){ | |
| _this.val("") | |
| let uploaded_images_up = $(".ext_record").attr("images"); | |
| uploaded_images_up = parseInt(uploaded_images_up) - valid_images; | |
| $(".ext_record").attr("images",uploaded_images_up) | |
| alert("Max 5 images are allowed"); | |
| return false; | |
| } | |
| for(let i = 0; i < files.length;i++){ | |
| let spl = files[i].name.split("."); | |
| let get_type = spl[spl.length-1]; | |
| get_type = get_type.toLowerCase(); | |
| let file_name = files[i].name; | |
| let total_uploads = $(".img_container").find(".cus_img_video").length; | |
| if(file_Types.image.indexOf(get_type) != -1){ | |
| var reader = new FileReader(); | |
| reader.onload = function(e){ | |
| $(".images_container").prepend(`<div class="col-sm-2"> | |
| <i class="glyphicon glyphicon-remove remove-img" data-parent = "${_cls+"_"+i}" title="Remove image"></i> | |
| <img src="${e.target.result}" class="preview_image" title="${file_name}"></div>`); | |
| } | |
| reader.readAsDataURL(files[i]); | |
| }else if(file_Types.video.indexOf(get_type) != -1){ | |
| $(".images_container").prepend(`<div class="col-sm-2"> | |
| <i class="glyphicon glyphicon-remove remove-img" data-parent = "${_cls+"_"+i}" title="Remove video"></i> | |
| <video controls loop src="${URL.createObjectURL(files[i])}" class="preview_video" title="${file_name}"></div>`); | |
| } | |
| } | |
| if(parseInt($(".ext_record").attr("images")) >= 5){ | |
| $(".placeholder_img").hide(); | |
| } | |
| }); | |
| }); | |
| //not_accept | |
| $(document).on("click",".remove-img",function(){ | |
| let num = $(this).attr("data-parent"); | |
| let index = num[0] | |
| let index1 = num[2] | |
| //$(".choose_container input[name='images["+index+"]["+index1+"]']").val("") | |
| $(".not_accept").val($(".not_accept").val()+","+num) | |
| $(this).parent().remove() | |
| $(".ext_record").attr("images",parseInt($(".ext_record").attr("images")) - 1) | |
| setTimeout(function(){ | |
| if($(".images_container").find(".col-sm-2").length < 5){ | |
| $(".placeholder_img").show(); | |
| } | |
| },100) | |
| }) | |
| </script> | |
| </body> | |
| </html> | |
| <?php | |
| if(isset($_POST["submit"])){ | |
| echo "<pre>"; | |
| $non_accept = array(); | |
| $non_acceptable = @$_POST["non-acceptable-images"]; | |
| $images = $_FILES["images"]; | |
| if($non_acceptable && !empty($non_acceptable)){ | |
| $exp = explode(",",$non_acceptable); | |
| $exp = array_filter($exp); | |
| $non_accept = array_values($exp); | |
| } | |
| for($w = 0;$w < count($non_accept);$w++){ | |
| $val = $non_accept[$w]; | |
| unset($images["name"][$val[0]][$val[2]]); | |
| } | |
| $images["name"] = array_filter($images["name"]); | |
| $images["name"] = array_values($images["name"]); | |
| $images["name"] = array_map(function($x){ return array_values($x); }, $images["name"]); | |
| $img_count = count($images["name"]); | |
| for($i = 0;$i < $img_count;$i++){ | |
| if(isset($images["name"][$i]) && !empty($images["name"][$i])){ | |
| if(count($images["name"][$i]) > 0){ | |
| $img1 = $images["name"][$i]; | |
| for($j = 0; $j < count($img1);$j++){ | |
| if(isset($img1[$j]) && !empty($img1[$j])){ | |
| $file = $img1[$j]; | |
| $tmp = $images["tmp_name"][$i][$j]; | |
| move_uploaded_file($tmp,"test_images/".$file); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| ?> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment