JS는 어떻게 input[file]의 값을 가져와 페이지에 표시합니까? (그림 및 텍스트 튜토리얼)

亚连
풀어 주다: 2018-05-31 14:17:16
원래의
2435명이 탐색했습니다.

이제 input[file]의 값을 얻어서 페이지에 표시하는 JS 구현 방법을 공유하겠습니다. 이는 좋은 참조 값을 가지고 있으며 모든 사람에게 도움이 되기를 바랍니다.

예제는 다음과 같습니다.

$(document).on('change', '.photo-box .file', function () {
  //alert($(this).val());
  function getObjectURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) { // basic
      url = window.createObjectURL(file);
    } else if (window.URL != undefined) { // mozilla(firefox)
      url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) { // webkit or chrome
      url = window.webkitURL.createObjectURL(file);
    }
    return url;
  }
  var objUrl = getObjectURL(this.files[0]);
  console.log("objUrl = " + objUrl);
  var html = &#39;<p class="photo-box"><img src="&#39; + objUrl + &#39;" alt=""><p class="photo-btn"><p>删除</p></p></p>&#39;;
  $(this).parent().parent().append(html);
})
로그인 후 복사

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

관련 기사:

vue는 Echarts와 결합하여 클릭 강조 효과 예시

vue는 라벨 클릭 강조 방법을 구현합니다

Vue-Route 탐색 메뉴 표시줄 강조 설정 방법

위 내용은 JS는 어떻게 input[file]의 값을 가져와 페이지에 표시합니까? (그림 및 텍스트 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿