파일업로드시 이미지 미리보기(파일업로드 Form 디자인)
페이지 정보
작성자 서방님 댓글 0건 조회 139회 작성일 16-10-20 17:54본문
출처 : https://chongmoa.com:45183/jquery/56008
<script>function getThumbnailPrivew(html, $target) { if (html.files && html.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $target.css('display', ''); //$target.css('background-image', 'url(\) + e.target.result + '\")'); // 배경으로 지정시 $target.html('<img src=' + e.target.result + '" border="0" alt="" />'); } reader.readAsDataURL("html.files[0]); }}</script><style>.filebox label { display: inline-block; padding: .5em .75em; color: #999; font-size: inherit; line-height: normal; vertical-align: middle; background-color: #fdfdfd; cursor: pointer; border: 1px solid #ebebeb; border-bottom-color: #e2e2e2; border-radius: .25em; width:100%; max-width:100%;}.filebox input[type="file"] { /* 파일 필드 숨기기 */ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0;}</style><form name="form" id="form" action="" method="post" enctype="multipart/form-data" autocomplete="off"> <div class="filebox"> <label for="cma_file">사진 인증샷 업로드</label> <input type="file" name="cma_file" id="cma_file" accept="image/*" capture="camera" onchange="getThumbnailPrivew(this,$('#cma_image'))" /> <br /><br /> <div id="cma_image" style="width:100%;max-width:100%;border:1px solid #000;display:none;"></div> </div></form>
댓글목록
등록된 댓글이 없습니다.
