업로드하기 전에 이미지 미리보기 삭제

Matheen Ula

여러 이미지를 업로드하고 미리보기를 표시하고 있는데 정상적으로 작동합니다. 특정 미리보기 이미지를 삭제하려면 미리보기 이미지가 삭제되지만 업로드하면 모든 파일이 업로드됩니다. 확인해주십시오.

내 양식 :

<div class="form-group">
    <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-5">
            Upload a file(.csv,.xls,.xlsx)
        </div> 
        <div class="col-sm-12 col-md-6 col-lg-7">
            <input type="file" class="form-control" id="gallery-photo-add" name="projectfile[]" multiple>
            <div class="gallery">
            </div>        
        </div> 
    </div>
</div>

자바 스크립트

$(function() {
    var imageArray = [];
    var imagesPreview = function(input, placeToInsertImagePreview) {
        var data = '';
        if (input.files) {
            var filesAmount = input.files.length; 

            for (let i = 0; i < filesAmount; i++) {
                data +='<li>'+ input.files[i].name + '</li>';

                var reader = new FileReader();
                reader.onload = function(event) {
                    var image = '<a class="delete" data-value='+ i +'><img class="images" src='+ event.target.result +'><i class="fas fa-times closeicon" aria-hidden="true"></i> </a>';
                    $($.parseHTML(image))
                        .appendTo(placeToInsertImagePreview);
                }   
                // console.log(input.files);
                reader.readAsDataURL(input.files[i]);
                imageArray.push(input.files[i]);
                console.log(imageArray);    
            } 
        }
    };

    $('#gallery-photo-add').on('change', function() {
        imagesPreview(this, 'div.gallery');
    });

    $("div.gallery").on('click','.delete',function(){
        // console.log($(this).data("value"));
        $(this).remove();
        imageArray.splice($(this).data("value"),1);
        console.log(imageArray);
     });
});
비키

다중 입력 유형 파일은 읽기 전용 fileList . 여기에는 File개체 모음이 포함 됩니다. 따라서이 목록에서 요소를 단순히 제거 할 수 없습니다.

AJAX 를 사용 하여 양식을 처리해야합니다. 질문을 참조하십시오 .

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

업로드하기 전에 많은 이미지 미리보기

분류에서Dev

업로드하기 전에 이미지 미리보기 시도

분류에서Dev

이전 이미지를 삭제하여 이미지 업로드

분류에서Dev

업로드하기 전에 미리보기에서 이미지 선택

분류에서Dev

폰갭에 업로드하기 전에 이미지 미리보기

분류에서Dev

미리보기 이미지 표시, 제출 양식에 업로드

분류에서Dev

ReactJS : 업로드 전에 여러 이미지 미리보기

분류에서Dev

업로드 전에 미리보기 이미지 표시

분류에서Dev

둘 이상의 이미지에 대해 업로드하기 전에 미리보기 이미지

분류에서Dev

업로드하기 전에 이미지를 미리 보시겠습니까?

분류에서Dev

이미지를 미리보고 업로드하기 전에 자릅니다.

분류에서Dev

업로드 스크립트 전 jQuery 이미지 미리보기

분류에서Dev

jQuery 파일 업로드 미리보기 / 이미지 제거

분류에서Dev

vuetify "<v-file-input>"을 사용하여 업로드하기 전에 미리보기 이미지?

분류에서Dev

Instagram은 세로 / 가로 이미지에 정사각형 미리보기 이미지를 제공하나요?

분류에서Dev

Flask에서 페이지를 제공하는 동안 브라우저에서 이미지 미리보기를 업로드하는 방법은 무엇입니까?

분류에서Dev

Firebase에 업로드하기 전에 SwiftUI로 이미지를 미리 보려면 어떻게해야합니까?

분류에서Dev

Extjs 4.2+에서 업로드하기 전에 이미지를 미리 보는 방법

분류에서Dev

ionic 3에서 업로드하기 전에 이미지를 미리 보는 방법?

분류에서Dev

이미지 미리보기에서 "x"를 클릭하여 파일 입력에서 이미지를 삭제하려면 어떻게합니까?

분류에서Dev

코드 점화기 이미지 갤러리에서 작동하지 않는 이미지 삭제

분류에서Dev

업로드 전에 이미지 미리보기를 표시하는 방법은 무엇입니까?

분류에서Dev

이미지 업 로더에서 이미지 삭제

분류에서Dev

백본보기 내에서보기를 표시하고 실제 이미지를 지연로드하기 전에 자리 표시 자 이미지가로드 될 때까지 기다립니다.

분류에서Dev

Vuetify-업로드 취소 후 미리보기 이미지 제거

분류에서Dev

Vuetify-업로드 취소 후 미리보기 이미지 제거

분류에서Dev

업로드 전 AngularJS 이미지 미리보기 선택 이전 이미지 표시

분류에서Dev

제출 버튼을 사용하지 않고 미리보기로 여러 이미지 업로드

분류에서Dev

업로드하기 전에 이미지 크기 조정 C # Xamarin

Related 관련 기사

  1. 1

    업로드하기 전에 많은 이미지 미리보기

  2. 2

    업로드하기 전에 이미지 미리보기 시도

  3. 3

    이전 이미지를 삭제하여 이미지 업로드

  4. 4

    업로드하기 전에 미리보기에서 이미지 선택

  5. 5

    폰갭에 업로드하기 전에 이미지 미리보기

  6. 6

    미리보기 이미지 표시, 제출 양식에 업로드

  7. 7

    ReactJS : 업로드 전에 여러 이미지 미리보기

  8. 8

    업로드 전에 미리보기 이미지 표시

  9. 9

    둘 이상의 이미지에 대해 업로드하기 전에 미리보기 이미지

  10. 10

    업로드하기 전에 이미지를 미리 보시겠습니까?

  11. 11

    이미지를 미리보고 업로드하기 전에 자릅니다.

  12. 12

    업로드 스크립트 전 jQuery 이미지 미리보기

  13. 13

    jQuery 파일 업로드 미리보기 / 이미지 제거

  14. 14

    vuetify "<v-file-input>"을 사용하여 업로드하기 전에 미리보기 이미지?

  15. 15

    Instagram은 세로 / 가로 이미지에 정사각형 미리보기 이미지를 제공하나요?

  16. 16

    Flask에서 페이지를 제공하는 동안 브라우저에서 이미지 미리보기를 업로드하는 방법은 무엇입니까?

  17. 17

    Firebase에 업로드하기 전에 SwiftUI로 이미지를 미리 보려면 어떻게해야합니까?

  18. 18

    Extjs 4.2+에서 업로드하기 전에 이미지를 미리 보는 방법

  19. 19

    ionic 3에서 업로드하기 전에 이미지를 미리 보는 방법?

  20. 20

    이미지 미리보기에서 "x"를 클릭하여 파일 입력에서 이미지를 삭제하려면 어떻게합니까?

  21. 21

    코드 점화기 이미지 갤러리에서 작동하지 않는 이미지 삭제

  22. 22

    업로드 전에 이미지 미리보기를 표시하는 방법은 무엇입니까?

  23. 23

    이미지 업 로더에서 이미지 삭제

  24. 24

    백본보기 내에서보기를 표시하고 실제 이미지를 지연로드하기 전에 자리 표시 자 이미지가로드 될 때까지 기다립니다.

  25. 25

    Vuetify-업로드 취소 후 미리보기 이미지 제거

  26. 26

    Vuetify-업로드 취소 후 미리보기 이미지 제거

  27. 27

    업로드 전 AngularJS 이미지 미리보기 선택 이전 이미지 표시

  28. 28

    제출 버튼을 사용하지 않고 미리보기로 여러 이미지 업로드

  29. 29

    업로드하기 전에 이미지 크기 조정 C # Xamarin

뜨겁다태그

보관