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

Marchemike

서버에 업로드하기 전에 html 페이지에서 사진을 미리 볼 수있는 방법이 있습니까?

변경 사항이 있음을 보여주기 위해 업로드해야하는 이미지의 미리보기를 표시해야합니다. 이미지 소스를 변경해야 할 것입니다. 내가 사용할 수있는 기존 기술 / 방법이 있습니까?

바늘

최근에이 문제를 다음과 같이 해결했습니다.

changelistener를 fileinput에 바인딩했습니다.

<input type="file" name="photofile" id="photofile">



$('#photofile').bind("change", function(){
            readUrl(this);
         });

readURL 함수의 이미지를 다음과 같이 이전에 비어있는 img 요소로 설정합니다.

readUrl = function(input) {
        //if File is there
        if(input.files && input.files[0]) {
            //create a Filereader
            var reader = new FileReader();
            //bind a function to the reader which will be executed when file is completely loaded
            reader.onload = function(e) {
                //Here you render your preview image
                $("#bild-vorschau").attr("src", e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

여기 Working Fiddle 에서 볼 수 있습니다.

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

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

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

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

분류에서Dev

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

분류에서Dev

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

분류에서Dev

android-갤러리를로드하기 전에 기기의 모든 미리보기 이미지를 새로 고침 하시겠습니까?

분류에서Dev

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

분류에서Dev

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

분류에서Dev

PyGame : 블리 팅 직전에 타일 이미지 정보를로드 하시겠습니까?

분류에서Dev

페이지에서 미리보기 이미지를 가져 오시겠습니까? (콘크리트 5.7.4.2)

분류에서Dev

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

분류에서Dev

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

분류에서Dev

이미지 미리보기를 받으시겠습니까?

분류에서Dev

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

분류에서Dev

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

분류에서Dev

imagemagick에서 다른 이미지로 이미지를 그리시겠습니까?

분류에서Dev

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

분류에서Dev

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

분류에서Dev

matplotlib에서 이미지를 회전 하시겠습니까?

분류에서Dev

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

분류에서Dev

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

분류에서Dev

Codeigniter에서 여러 이미지를 업로드 하시겠습니까?

분류에서Dev

loopj android로 이미지를 슬림 프레임 워크 기반 REST API에 업로드 하시겠습니까?

분류에서Dev

Windows 7의 탐색기에서 이미지 미리보기 및 축소판을 수정 하시겠습니까?

분류에서Dev

호스트와 VirtualBox 게스트간에 이미지 클립 보드를 전송 하시겠습니까?

분류에서Dev

다운로드하기 전에 URL에서 이미지를 압축 하시겠습니까?

분류에서Dev

캔버스에 드로어 블 이미지를 그리시겠습니까?

분류에서Dev

Angular 9에서 파일을 업로드하려면 클릭하기 전에 이미지를 표시 하시겠습니까?

분류에서Dev

미리보기 모드에서 Skype 봇과 통신 하시겠습니까?

분류에서Dev

화면에 표시된 이미지 전에 이벤트를 트리거 하시겠습니까?

분류에서Dev

iOS 앱에서 iTunes 노래 미리보기를 재생 하시겠습니까?

Related 관련 기사

  1. 1

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

  2. 2

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

  3. 3

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

  4. 4

    android-갤러리를로드하기 전에 기기의 모든 미리보기 이미지를 새로 고침 하시겠습니까?

  5. 5

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

  6. 6

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

  7. 7

    PyGame : 블리 팅 직전에 타일 이미지 정보를로드 하시겠습니까?

  8. 8

    페이지에서 미리보기 이미지를 가져 오시겠습니까? (콘크리트 5.7.4.2)

  9. 9

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

  10. 10

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

  11. 11

    이미지 미리보기를 받으시겠습니까?

  12. 12

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

  13. 13

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

  14. 14

    imagemagick에서 다른 이미지로 이미지를 그리시겠습니까?

  15. 15

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

  16. 16

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

  17. 17

    matplotlib에서 이미지를 회전 하시겠습니까?

  18. 18

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

  19. 19

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

  20. 20

    Codeigniter에서 여러 이미지를 업로드 하시겠습니까?

  21. 21

    loopj android로 이미지를 슬림 프레임 워크 기반 REST API에 업로드 하시겠습니까?

  22. 22

    Windows 7의 탐색기에서 이미지 미리보기 및 축소판을 수정 하시겠습니까?

  23. 23

    호스트와 VirtualBox 게스트간에 이미지 클립 보드를 전송 하시겠습니까?

  24. 24

    다운로드하기 전에 URL에서 이미지를 압축 하시겠습니까?

  25. 25

    캔버스에 드로어 블 이미지를 그리시겠습니까?

  26. 26

    Angular 9에서 파일을 업로드하려면 클릭하기 전에 이미지를 표시 하시겠습니까?

  27. 27

    미리보기 모드에서 Skype 봇과 통신 하시겠습니까?

  28. 28

    화면에 표시된 이미지 전에 이벤트를 트리거 하시겠습니까?

  29. 29

    iOS 앱에서 iTunes 노래 미리보기를 재생 하시겠습니까?

뜨겁다태그

보관