简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집> 웹 프론트엔드> JS 튜토리얼> 본문

input type=file 选择图片并且实现预览效果详解

小云云
풀어 주다： 2018-01-02 16:00:29
원래의
4065명이 탐색했습니다.

本文主要为大家带来一篇input type=file 选择图片并且实现预览效果的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

通过标签，给它指定type类型为file，可提供文件上传；

accept：可选择上传类型，如：只要传图片，且不限制图片格式，为image/*；

multiple：规定是否可以选择多个文件；

规定只可上传图片，且可以选择多个文件

로그인 후 복사

当然，直接一个input type=file 只能选择上传的文件/资源，如果我们需要在选择图片之后，在当前页面实现预览效果，那么我们可以如下方式来实现

HTML代码
로그인 후 복사

css样式文件

로그인 후 복사

JS代码

로그인 후 복사

*以上js代码中有使用到jQuery，因此要引入jQuery文件

相关推荐：

file控件选择图片实例教程

HTML5 Plus 实现手机APP拍照或相册选择图片上传功能的实例代码

input选择图片后不上传及时显示

위 내용은 input type=file 选择图片并且实现预览效果详解의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
file input type
원천：php.cn
이전 기사：AngularJS实现的省市二级联动功能示例 다음 기사：js只比较时间大小的实例
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
내부 HTML이 변경될 때 HTML 콘텐츠 편집 가능에서 캐럿 위치 유지 WYSIWYG 편집기 역할을 하는 div가 있습니다. 텍스트 상자 역할을 하지만 그 안에 Markdown 구문을 렌더링하여 실시간 변경 사항을 표시합니다. 문제:...
에서 2023-11-08 22:38:23
0
2
285
Vue js: 문제 해결 - 정의되지 않은 '$refs' 속성 읽기 템플릿에 참조가 있어도 정의되지 않은 속성('$refs' 읽기)을 읽을 수 없다는 오류가 발생합니다. 이는 Vue 마운트 후크를 사용해야 한다는 뜻인가요? <...
에서 2023-11-07 23:34:12
0
1
305
Vue.js의 메소드 내부에서 입력 포커스 이벤트를 트리거하는 방법은 무엇입니까? 다음 이벤트를 사용하는 입력이 있습니다:
에서 2023-10-29 23:56:42
0
2
270
버튼 제출로부터 양식을 보호하는 방법 다음 페이지에서 Firefox를 사용하여 버튼을 제거하면 양식이 제출되지만 버튼을 추가하면 제출되지 않습니다. 제거 버튼이 양식을 제출하는 것을 방지하는 방법은 ...
에서 2023-10-10 10:47:12
0
1
309
flatpickr에 의한 jQuery 요소 $input._platpicker 입력 선택 내 프로젝트에서 jquery를 사용하고 있으며 flatpickr을 사용하여 날짜 드롭다운 상자를 배치하고 있습니다. 날짜 입력에서 기존 flatpickr 인스턴스...
에서 2023-09-17 15:41:09
0
1
337
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！