Мой код очень длинный. Я не могу показать вам всех здесь. Я просто показываю только код javascript.
Мой javascript:
<script type="text/javascript"> let current = 0; for(let i = 0; i < 5; i++) { $('#thumbnail-view-delete-'+i).click(function(){ current -= 1; $('input[name="photo-'+i+'"]').val(''); document.getElementById("thumbnail-view-li-"+current).style.display = "none"; document.getElementById("thumbnail-upload-li-"+current).style.display = ""; document.getElementById("thumbnail-upload-li-"+(current+1)).style.display = "none"; document.getElementById("thumbnail-slot-li-"+(current+1)).style.display = ""; }); } var editClicked = false; for(let i = 0; i < 5; i++) { $('#thumbnail-view-edit-'+i).click(function(){ editClicked = true; $('input[name="photo-'+i+'"]').click(); }); } for(let i = 0; i < 5; i++) { $('#thumbnail-view-add-'+i).click(function(){ editClicked = false; $('input[name="photo-'+i+'"]').click(); }); } for(let i = 0; i < 5; i++) { var reader = new FileReader(); $('input[name="photo-'+i+'"]').change(function (e) { let indexPhoto = i; current += 1; reader.onload = function(){ imageProducIsLoaded(indexPhoto); }; reader.readAsDataURL(e.target.files[0]); }); } function imageProducIsLoaded(indexPhoto) { $('#thumbnail-view-'+indexPhoto).attr('src', reader.result); if (!editClicked) { document.getElementById("thumbnail-upload-li-"+indexPhoto).style.display = "none"; document.getElementById("thumbnail-view-li-"+indexPhoto).style.display = ""; if((indexPhoto+1) < 5) { document.getElementById("thumbnail-upload-li-"+(indexPhoto+1)).style.display = ""; document.getElementById("thumbnail-slot-li-"+(indexPhoto+1)).style.display = "none"; } } }; </script> Вы можете увидеть мой полный код и демонстрацию здесь: http://www.phpfiddle.org/main/code/adjv-sfuy
Я использую show hide для добавления, удаления и редактирования изображения. Если вы посмотрите на демо, это сработало. Изображения можно редактировать, удалять и добавлять
Но моя проблема в том, что пользователь удаляет изображение
Когда пользователь удаляет изображение, изображение в последнем поле удаляется. Должно быть, когда пользователь удаляет изображение, то изображение, которое я нажимаю на его кнопку удаления, удаляется
Например, я ввожу 5 изображений. При удалении изображения до 3, изображение до 3 удалено
Я пытался изменить код в течение нескольких дней, но я не нашел решения
Есть ли кто-нибудь, кто может мне помочь?
Используйте функции jquery для выполнения сложных вещей очень просто.
<?php if(isset($_POST['submit'])) { echo "<pre>"; print_r($_FILES); for($i=0;$i<count($_FILES);$i++) { if($_FILES['photo-'.$i]['error'] == 0) { $file_name = $_FILES['photo-'.$i]['name']; $file_tmp =$_FILES['photo-'.$i]['tmp_name']; move_uploaded_file($file_tmp,"img/".$file_name); } } echo "</pre>"; } ?> <style type="text/css"> .img-container{width:162px;height:142px;border:1px dashed #337ab7;float:left;margin-right:5px;position:relative;border-radius:5px} .upload-add-product{position:absolute;display:block;margin:34% 42%} .upload-add-product i{font-size:30px} .img-container ul{list-style:none;bottom:0;position:absolute;width:100%;padding:0;margin:0;background-color:rgba(255,255,255,0.7)} .img-container ul li{display:inline;padding:0;display:table-cell;width:1%;text-align:center;position:relative;padding:2px 0} .img-container ul li:hover{background-color:#eee} .img-container ul li a{color:red} </style> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <form method="post" enctype="multipart/form-data"> <div class="images-area"> <?php for($i=0;$i<5; $i++) { ?> <div class="img-container" id="box<?php echo $i ?>" data-status="0" data-index="<?=$i?>"> <input type='file' name="photo-<?=$i?>" style="visibility: hidden;position:absolute;" id="upload-file<?=$i?>" class="upload-file"/> <div class="image"> <?php if ($i == 0): ?> <a href="javascript:;" class="btn-click upload-add-product" onclick="$('#upload-file<?=$i?>').click()"><i class="fa fa-plus"></i></a> <?php endif; ?> </div> </div> <?php } ?> </div> <input type="submit" name="submit" value="submit"> </form> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(document).on('change',".upload-file",function () { var $input = $(this); var inputFiles = this.files; if(inputFiles == undefined || inputFiles.length == 0) return; var inputFile = inputFiles[0]; var i = parseInt($(this).closest('.img-container').attr('data-index')); var reader = new FileReader(); reader.onload = function(event) { // console.log($('#box'+i).find('img').length); if($('#box'+i).find('img').length) { $('#box'+i).find('img').attr('src',event.target.result); } else { var imgTmpl ='<img height="142" width="162" src='+event.target.result+'>'+ '<ul><li class="btn-click" onclick=\'$("#upload-file'+i+'").click()\'><a href="javascript:;"><i class="fa fa-pencil"></i></a></li>'+ '<li class="delete-button"><a href="javascript:;"><i class="fa fa-trash"></i></a></li></ul>'; $('#box'+i+' .image').html(''); $('#box'+i+' .image').append(imgTmpl); $('#box'+i).attr('data-status',1); $('#box'+(i+1)+' .image').html('<a href="javascript:;" class="btn-click upload-add-product" onclick=\'$("#upload-file'+(i+1)+'").click()\'><i class="fa fa-plus"></i></a>'); } }; reader.onerror = function(event) { alert("I AM ERROR: " + event.target.error.code); }; reader.readAsDataURL(inputFile); }); $(document).on('click','.delete-button',function(){ var i = $(this).closest('.img-container').attr('data-index'); $('#box'+i).remove(); $('.images-area').append('<div class="img-container" data-status="0"><input type="file" style="display:none" id="upload-file" class="upload-file"><div class="image"></div></div>'); var blank = 0; $('.img-container').each(function(i){ $(this).attr({'id':'box'+i,'data-index':i}); $(this).find('.upload-file').attr({'id':'upload-file'+i,'name':'photo-'+i}); $(this).find('.btn-click').attr('onclick','$("#upload-file'+i+'").click()'); if(($(this).attr('data-status') == 0) && (blank == 0)) { blank = i; } }); if($('.img-container').find('.upload-add-product').length == 0) { $('#box'+blank+' .image').append('<a href="javascript:;" class="btn-click upload-add-product" onclick=\'$("#upload-file'+blank+'").click()\'><i class="fa fa-plus"></i></a>'); } }); </script>
Я прилагаю усилия для понимания вашей задачи.
Смотрите, это поможет вам ..
Извините, я не понял.
Mayby вам нужно суждение после удаления изображения, которое гарантирует, что следующее изображение не будет отображаться.
$('#thumbnail-view-delete-'+i).click(function(){ $('input[name="photo-'+i+'"]').val(''); document.getElementById("thumbnail-view-li-"+i).style.display = "none"; document.getElementById("thumbnail-upload-li-"+i).style.display = ""; if(document.getElementById("thumbnail-view-li-"+(i+1)).style.display === "none"){ document.getElementById("thumbnail-upload-li-"+(i+1)).style.display = "none"; document.getElementById("thumbnail-slot-li-"+(i+1)).style.display = ""; } });
Я выяснил вашу проблему. Функция удаления не определяет количество загружаемых фотографий, а просто удаляет последний.
Добавлено: текущий счетчик фотографий, измененный метод удаления для использования текущего, а не «i», счетчик приращений при выгрузке и уменьшении количества при удалении.
<script type="text/javascript"> let current = 0; for(let i = 0; i < 5; i++) { $('#thumbnail-view-delete-'+i).click(function(){ current -= 1; $('input[name="photo-'+i+'"]').val(''); document.getElementById("thumbnail-view-li-"+current).style.display = "none"; document.getElementById("thumbnail-upload-li-"+current).style.display = ""; document.getElementById("thumbnail-upload-li-"+(current+1)).style.display = "none"; document.getElementById("thumbnail-slot-li-"+(current+1)).style.display = ""; }); } var editClicked = false; for(let i = 0; i < 5; i++) { $('#thumbnail-view-edit-'+i).click(function(){ editClicked = true; $('input[name="photo-'+i+'"]').click(); }); } for(let i = 0; i < 5; i++) { $('#thumbnail-view-add-'+i).click(function(){ editClicked = false; $('input[name="photo-'+i+'"]').click(); }); } for(let i = 0; i < 5; i++) { var reader = new FileReader(); $('input[name="photo-'+i+'"]').change(function (e) { let indexPhoto = i; current += 1; reader.onload = function(){ imageProducIsLoaded(indexPhoto); }; reader.readAsDataURL(e.target.files[0]); }); } function imageProducIsLoaded(indexPhoto) { $('#thumbnail-view-'+indexPhoto).attr('src', reader.result); if (!editClicked) { document.getElementById("thumbnail-upload-li-"+indexPhoto).style.display = "none"; document.getElementById("thumbnail-view-li-"+indexPhoto).style.display = ""; if((indexPhoto+1) < 5) { document.getElementById("thumbnail-upload-li-"+(indexPhoto+1)).style.display = ""; document.getElementById("thumbnail-slot-li-"+(indexPhoto+1)).style.display = "none"; } } }; </script>
Вот мой ответ: http://phpfiddle.org/main/code/0h1g-mvus
Я просто меняю изображения. Возможно, вам придется внести некоторые изменения для передачи значений или w / e.
let current = 0; for(let i = 0; i < 5; i++) { $('#thumbnail-view-delete-'+i).click(function(){ current -= 1; $('input[name="photo-'+i+'"]').val(''); document.getElementById("thumbnail-view-li-"+current).style.display = "none"; document.getElementById("thumbnail-upload-li-"+current).style.display = ""; document.getElementById("thumbnail-upload-li-"+(current+1)).style.display = "none"; document.getElementById("thumbnail-slot-li-"+(current+1)).style.display = ""; shift_image(i); }); } function shift_image(start) { let finish = 4; for (; start < finish - 1; start++) { let next = $('#thumbnail-view-'+(start+1)).attr('src'); $('#thumbnail-view-'+start).attr('src', next); } }