복붙노트

[JQUERY] 페이지에서 파일을 삭제하면 어떻게 파일의 입력 값을 설정하는 방법? [복제]

JQUERY

페이지에서 파일을 삭제하면 어떻게 파일의 입력 값을 설정하는 방법? [복제]

해결법


  1. 1.면책 조항 년 12 월 2017와 같은 현대적인 브라우저만을위한 올바른.

    면책 조항 년 12 월 2017와 같은 현대적인 브라우저만을위한 올바른.

    * 당신은의 dataTransfer 또는 파일리스트 객체가있는 경우

    이전 프로그램 파일 입력을 변경 [유형 = 파일] 필드 인해 최신 브라우저에 고정되어 기존의 보안 취약점으로 비활성화되었습니다.

    주요 브라우저 (파이어 폭스)의 마지막, 최근에 입력 파일 필드에 파일을 설정할 수있게되었습니다. W3C 테스트에 따르면, 이미 구글 크롬에이 작업을 수행 할 수 있다는 것!

    MDN을 인용 관련 스크린 샷 및 텍스트 :

    파이어 폭스 버그 수정 토론 스레드는 당신이 그것을 테스트 할 수 있습니다이 데모를 가지고 있으며, 여기 당신이 편집 그것을 원한다면 소스입니다. 경우 향후 참조를 위해이 링크 다이는, 또한 아래의 실행 가능한 코드 조각으로 포함됩니다 :

    대상 = document.documentElement하자; 몸 =는 document.body하자; 하자 fileinput 함수 document.querySelector = ( '입력'); target.addEventListener ( '로 dragOver'(E) => { e.preventDefault (); body.classList.add는 ( '드래그'); }); target.addEventListener ( 'dragleave'() => { body.classList.remove는 ( '드래그'); }); target.addEventListener ( '드롭'(E) => { e.preventDefault (); body.classList.remove는 ( '드래그'); fileInput.files는 e.dataTransfer.files를 =; }); 몸 { 글꼴 - 가족 : Roboto로, 산세 리프; } body.dragging :: 전에 { 내용 : "어느 곳이 페이지에서 파일을 드롭"; 위치 : 고정; 왼쪽 : 0; 폭 : 100 %; 최고 : 0; 신장 : 100 %; 표시 : 플렉스; 정당화 - 내용 : 센터; 정렬-항목 : 센터; 폰트 크기 : 1.5em; 배경색 : RGBA (255, 255, 0, 0.3); 포인터 이벤트 : 없음; } 버튼 입력 { 글꼴 - 가족 : 상속; } ㅏ { 파란색; } <메타 캐릭터 = "UTF-8"> <메타 이름 = "뷰포트"내용 = "= 폭 소자 폭"> <링크 HREF = "https://fonts.googleapis.com/css?family=Roboto:400,400i,700"REL = "스타일"> JS 빈 </ TITLE> </ head> <body> 파일 입 </ H1>에 <H1> 드래그 앤 드롭 파일 <a href="https://github.com/whatwg/html/issues/2861"> 웹킷 깜빡임 </a>를 지원 <p> <작은>. 테스트, 드래그와하는이 페이지에 운영 체제에서 하나 개 이상의 파일을 놓습니다. </ 작은> </ P> <p> <input 타입 = "파일"> </ p> </ body> </ HTML></p> <pre><code>document.querySelector('.preview-image-instruction') .addEventListener('drop', (ev) => { ev.preventDefault(); document.querySelector('.image-url').files = ev.dataTransfer.files; }); </code></pre> </li> </ul> <p>from <a href='https://stackoverflow.com/questions/47515232/how-to-set-file-input-value-when-dropping-file-on-page' target='_blank'>https://stackoverflow.com/questions/47515232/how-to-set-file-input-value-when-dropping-file-on-page</a> by cc-by-sa and MIT license</p></div> <!-- System - START --> <!-- System - END --> <!-- Adfit_PC - START --> <!-- Adfit_PC - END --> <!-- GoogleAdsenseForResponsive - START --> <div class="tt_adsense_bottom" style="margin-top:30px;"> <DIV class='ads_adsense_img' style='margin:40px 0px 40px 0px;'> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- 디스플레이광고만 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8393857339019314" data-ad-slot="7474886381" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </DIV> </div> <!-- GoogleAdsenseForResponsive - END --> <script onerror="changeAdsenseToAdfit()" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9527582522912841" crossorigin="anonymous"></script> <!-- inventory --> <ins class="adsbygoogle" style="margin:50px 0; display:block" data-ad-client="ca-pub-9527582522912841" data-ad-slot="4947159016" data-ad-format="auto" data-full-width-responsive="true" data-ad-type="inventory" data-ad-adfit-unit="DAN-HCZEy0KQLPMGnGuC"></ins> <script id="adsense_script"> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <script> if(window.ObserveAdsenseUnfilledState !== undefined){ ObserveAdsenseUnfilledState(); } </script> <div class="container_postbtn #post_button_group"> <div class="postbtn_like"><script>window.ReactionButtonType = 'reaction'; window.ReactionApiUrl = '//cnpnote.tistory.com/reaction'; window.ReactionReqBody = { entryId: 18983 }</script> <div class="wrap_btn" id="reaction-18983"></div> <script src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-6e43216ad1ef9e879370e963df8ee6b7af21767a/static/script/reaction-button-container.min.js"></script><div class="wrap_btn wrap_btn_share"><button type="button" class="btn_post sns_btn btn_share" aria-expanded="false" data-thumbnail-url="https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png" data-title="[JQUERY] 페이지에서 파일을 삭제하면 어떻게 파일의 입력 값을 설정하는 방법? [복제]" data-description="페이지에서 파일을 삭제하면 어떻게 파일의 입력 값을 설정하는 방법? [복제] 해결법 1.면책 조항 년 12 월 2017와 같은 현대적인 브라우저만을위한 올바른. 면책 조항 년 12 월 2017와 같은 현대적인 브라우저만을위한 올바른. * 당신은의 dataTransfer 또는 파일리스트 객체가있는 경우 이전 프로그램 파일 입력을 변경 [유형 = 파일] 필드 인해 최신 브라우저에 고정되어 기존의 보안 취약점으로 비활성화되었습니다. 주요 브라우저 (파이어 폭스)의 마지막, 최근에 입력 파일 필드에 파일을 설정할 수있게되었습니다. W3C 테스트에 따르면, 이미 구글 크롬에이 작업을 수행 할 수 있다는 것! MDN을 인용 관련 스크린 샷 및 텍스트 : 파이어 폭스 버그 수정 토론 스레드는 당신이 그것을 테스트 할.." data-profile-image="https://t1.daumcdn.net/tistory_admin/static/manage/images/r3/default_L.png" data-profile-name="cnpnote" data-pc-url="https://cnpnote.tistory.com/entry/JQUERY-%ED%8E%98%EC%9D%B4%EC%A7%80%EC%97%90%EC%84%9C-%ED%8C%8C%EC%9D%BC%EC%9D%84-%EC%82%AD%EC%A0%9C%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%BB%EA%B2%8C-%ED%8C%8C%EC%9D%BC%EC%9D%98-%EC%9E%85%EB%A0%A5-%EA%B0%92%EC%9D%84-%EC%84%A4%EC%A0%95%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-%EB%B3%B5%EC%A0%9C" data-relative-pc-url="/entry/JQUERY-%ED%8E%98%EC%9D%B4%EC%A7%80%EC%97%90%EC%84%9C-%ED%8C%8C%EC%9D%BC%EC%9D%84-%EC%82%AD%EC%A0%9C%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%BB%EA%B2%8C-%ED%8C%8C%EC%9D%BC%EC%9D%98-%EC%9E%85%EB%A0%A5-%EA%B0%92%EC%9D%84-%EC%84%A4%EC%A0%95%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-%EB%B3%B5%EC%A0%9C" data-blog-title="복붙노트"><span class="ico_postbtn ico_share">공유하기</span></button> <div class="layer_post" id="tistorySnsLayer"></div> </div><div class="wrap_btn wrap_btn_etc" data-entry-id="18983" data-entry-visibility="public" data-category-visibility="public"><button type="button" class="btn_post btn_etc2" aria-expanded="false"><span class="ico_postbtn ico_etc">게시글 관리</span></button> <div class="layer_post" id="tistoryEtcLayer"></div> </div></div> <button type="button" class="btn_menu_toolbar btn_subscription #subscribe" data-blog-id="2840920" data-url="https://cnpnote.tistory.com/entry/JQUERY-%ED%8E%98%EC%9D%B4%EC%A7%80%EC%97%90%EC%84%9C-%ED%8C%8C%EC%9D%BC%EC%9D%84-%EC%82%AD%EC%A0%9C%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%BB%EA%B2%8C-%ED%8C%8C%EC%9D%BC%EC%9D%98-%EC%9E%85%EB%A0%A5-%EA%B0%92%EC%9D%84-%EC%84%A4%EC%A0%95%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-%EB%B3%B5%EC%A0%9C" data-device="web_pc"><em class="txt_state">구독하기</em><strong class="txt_tool_id">복붙노트</strong><span class="img_common_tistory ico_check_type1"></span></button> <div data-tistory-react-app="SupportButton"></div> </div> <!-- PostListinCategory - START --> <div class="another_category another_category_color_gray"> <h4>'<a href="/category/JQUERY">JQUERY</a>' 카테고리의 다른 글</h4> <table> <tr> <th><a href="/entry/JQUERY-%EC%88%98%EB%8F%99-catch%EB%90%98%EC%A7%80-%EC%95%8A%EC%9D%80-TypeErrors%EC%97%90%EC%84%9C-PrimeFaces-%EA%B2%B0%EA%B3%BC%EB%A1%9C-%EB%A1%9C%EB%94%A9-jQuery%EB%A5%BC-%EC%B6%94%EA%B0%80">[JQUERY] 수동 catch되지 않은 TypeErrors에서 PrimeFaces 결과로 / 로딩 jQuery를 추가</a>  <span>(0)</span></th> <td>2020.09.26</td> </tr> <tr> <th><a href="/entry/JQUERY-jQuery%EB%A5%BC-%EC%95%84%EC%9D%B4%EB%94%94-%EC%84%A0%ED%83%9D%EC%9D%80-%EC%B2%AB-%EB%B2%88%EC%A7%B8-%EC%9A%94%EC%86%8C%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C%EB%A7%8C-%EC%9E%91%EB%8F%99%ED%95%A9%EB%8B%88%EB%8B%A4">[JQUERY] jQuery를 아이디 선택은 첫 번째 요소에 대해서만 작동합니다</a>  <span>(0)</span></th> <td>2020.09.26</td> </tr> <tr> <th><a href="/entry/JQUERY-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%ED%83%AD%EC%9D%B4-%ED%99%9C%EC%84%B1%ED%99%94%EB%90%98%EC%96%B4-%EC%9E%88%EB%8A%94%EC%A7%80-%ED%99%95%EC%9D%B8%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-%EC%A4%91%EB%B3%B5">[JQUERY] 브라우저 / 탭이 활성화되어 있는지 확인하는 방법 [중복]</a>  <span>(0)</span></th> <td>2020.09.26</td> </tr> <tr> <th><a href="/entry/JQUERY-jQuery%EB%A5%BC%EC%97%90-div-%EC%9A%94%EC%86%8C%EB%A5%BC-%EC%83%9D%EC%84%B1-%EC%A4%91%EB%B3%B5">[JQUERY] jQuery를에 div 요소를 생성 [중복]</a>  <span>(0)</span></th> <td>2020.09.26</td> </tr> <tr> <th><a href="/entry/JQUERY-jQuery%EB%A5%BC-%ED%95%A8%EA%BB%98-%ED%98%84%EC%9E%AC%EC%9D%98-URL%EC%9D%84-%EC%96%BB%EC%9D%84">[JQUERY] jQuery를 함께 현재의 URL을 얻을?</a>  <span>(0)</span></th> <td>2020.09.26</td> </tr> </table> </div> <!-- PostListinCategory - END --> </div> <div class="entry-footer"> <div class="actionTrail"> <a href="#tb" onclick=""></a>, <a href="#rp" onclick=""></a> </div> <div data-tistory-react-app="Namecard"></div> </div> </div> </div><!-- entry close --> </article> </div><!-- container close --> <aside role="complementary" id="sidebar"> <div class="container"> <div class="sidebar-inner"> <div class="module module_plugin"> <!-- Adfit_PC - START --> <ins class="kakao_ad_area" style="display:none;" data-ad-unit = "DAN-ubre63wuo3sm" data-ad-width = "160" data-ad-height = "600"></ins> <script type="text/javascript" src="//t1.daumcdn.net/kas/static/ba.min.js" async></script> <!-- Adfit_PC - END --> </div> <!-- 검색 모듈 --> <div class="widget widget-search col-md-3 col-xs-12"> <h3><i class="icon-magnifier icons"></i> Search</h3> <input type="text" name="search" value="" onkeypress="if (event.keyCode == 13) { try { window.location.href = '/search' + '/' + looseURIEncode(document.getElementsByName('search')[0].value); document.getElementsByName('search')[0].value = ''; return false; } catch (e) {} }"/> <input value="검색" type="button" onclick="try { window.location.href = '/search' + '/' + looseURIEncode(document.getElementsByName('search')[0].value); document.getElementsByName('search')[0].value = ''; return false; } catch (e) {}" class="btn btn-default btn-sm"/> </div> <!-- 카테고리 모듈 --> <div class="widget widget-category col-md-3 col-xs-12"> <h3><i class="icon-direction icons"></i> 카테고리</h3> <ul class="tt_category"><li class=""><a href="/category" class="link_tit"> 분류 전체보기 </a> <ul class="category_list"><li class=""><a href="/category/PHP" class="link_item"> PHP </a></li> <li class=""><a href="/category/%EC%8A%A4%ED%81%AC%EB%9E%98%EC%B9%98%203.0" class="link_item"> 스크래치 3.0 </a></li> <li class=""><a href="/category/PYTHON" class="link_item"> PYTHON </a></li> <li class=""><a href="/category/SPRING" class="link_item"> SPRING </a></li> <li class=""><a href="/category/HADOOP" class="link_item"> HADOOP </a></li> <li class=""><a href="/category/SCALA" class="link_item"> SCALA </a></li> <li class=""><a href="/category/MONGODB" class="link_item"> MONGODB </a></li> <li class=""><a href="/category/REDIS" class="link_item"> REDIS </a></li> <li class=""><a href="/category/RUBY-ON-RAILS" class="link_item"> RUBY-ON-RAILS </a></li> <li class=""><a href="/category/SQL" class="link_item"> SQL </a></li> <li class=""><a href="/category/NODEJS" class="link_item"> NODEJS </a></li> <li class=""><a href="/category/JQUERY" class="link_item"> JQUERY </a></li> <li class=""><a href="/category/ANDROID" class="link_item"> ANDROID </a></li> <li class=""><a href="/category/SWIFT" class="link_item"> SWIFT </a></li> <li class=""><a href="/category/HTML" class="link_item"> HTML </a></li> <li class=""><a href="/category/CSS" class="link_item"> CSS </a></li> <li class=""><a href="/category/REACTJS" class="link_item"> REACTJS </a></li> <li class=""><a href="/category/VUEJS" class="link_item"> VUEJS </a></li> <li class=""><a href="/category/WORDPRESS" class="link_item"> WORDPRESS </a></li> <li class=""><a href="/category/ANGULAR" class="link_item"> ANGULAR </a></li> <li class=""><a href="/category/MICROSERVICE" class="link_item"> MICROSERVICE </a></li> <li class=""><a href="/category/DJANGO" class="link_item"> DJANGO </a></li> <li class=""><a href="/category/FLASK" class="link_item"> FLASK </a></li> <li class=""><a href="/category/APACHE" class="link_item"> APACHE </a></li> <li class=""><a href="/category/GO" class="link_item"> GO </a></li> <li class=""><a href="/category/JAVA" class="link_item"> JAVA </a></li> <li class=""><a href="/category/FLUTTER" class="link_item"> FLUTTER </a></li> <li class=""><a href="/category/REACTIVE" class="link_item"> REACTIVE </a></li> <li class=""><a href="/category/SPA" class="link_item"> SPA </a></li> </ul> </li> </ul> </div> <!-- 태그목록 모듈 --> <div class="widget widget-tag col-md-3 col-xs-12"> <h3><i class="icon-tag icons"></i> 태그목록</h3> <ul> <li><a href="/tag/java" class="cloud2"> java</a></li> <li><a href="/tag/sql" class="cloud2"> sql</a></li> <li><a href="/tag/spring-mvc" class="cloud4"> spring-mvc</a></li> <li><a href="/tag/spring" class="cloud1"> spring</a></li> <li><a href="/tag/HADOOP" class="cloud3"> HADOOP</a></li> <li><a href="/tag/javascript" class="cloud4"> javascript</a></li> <li><a href="/tag/mysql" class="cloud4"> mysql</a></li> <li><a href="/tag/php" class="cloud4"> php</a></li> <li><a href="/tag/PYTHON" class="cloud3"> PYTHON</a></li> <li><a href="/tag/jQuery" class="cloud4"> jQuery</a></li> </ul> </div> <!-- 최근 포스트 모듈 --> <div class="widget widget-post col-md-3 col-xs-12"> <h3><i class="icon-list icons"></i> 최근에 올라온 글 </h3> <ul> </ul> </div> </div> </div> </div><!-- container close --> </aside><!-- sidebar close --> <footer role="contentinfo"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 footer-menu"> <a href="https://cnpnote.tistory.com/tag"><i class="icon-tag icons"></i> </a> <a href="https://cnpnote.tistory.com/rss" onclick="window.open(this.href); return false"><i class="icon-feed icons"></i> </a> </div> <div class="col-xs-12 col-sm-12 col-md-12 footer-copyright text-right"> <a href="https://cnpnote.tistory.com/"> cnpnote</a>'s Blog is powered by <a href="http://daum.net" onclick="window.open(this.href); return false">Daumkakao</a> / Designed by <a href="http://ongal.tistory.com">CEOSEO</a> </div> </div> </div> </footer> <!-- jQuery --> <script src="https://tistory1.daumcdn.net/tistory/2840920/skin/images/jquery-1.11.0.min.js?_version_=1583344392"></script> <div class="#menubar menu_toolbar "> <h2 class="screen_out">티스토리툴바</h2> <div class="btn_tool"><button class="btn_menu_toolbar btn_subscription #subscribe" data-blog-id="2840920" data-url="https://cnpnote.tistory.com" data-device="web_pc"><strong class="txt_tool_id">복붙노트</strong><em class="txt_state">구독하기</em><span class="img_common_tistory ico_check_type1"></span></button></div></div> <div class="#menubar menu_toolbar "></div> <div class="layer_tooltip"> <div class="inner_layer_tooltip"> <p class="desc_g"></p> </div> </div> <iframe id="editEntry" style="position:absolute;width:1px;height:1px;left:-100px;top:-100px" src="//cnpnote.tistory.com/api"></iframe> <!-- DragSearchHandler - START --> <script src="//search1.daumcdn.net/search/statics/common/js/g/search_dragselection.min.js"></script> <!-- DragSearchHandler - END --> <script type="text/javascript">(function($) { $(document).ready(function() { lightbox.options.fadeDuration = 200; lightbox.options.resizeDuration = 200; lightbox.options.wrapAround = false; lightbox.options.albumLabel = "%1 / %2"; }) })(tjQuery);</script> <div style="margin:0; padding:0; border:none; background:none; float:none; clear:none; z-index:0"></div> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-6e43216ad1ef9e879370e963df8ee6b7af21767a/static/script/common.js"></script> <script type="text/javascript">window.roosevelt_params_queue = window.roosevelt_params_queue || [{channel_id: 'dk', channel_label: '{tistory}'}]</script> <script type="text/javascript" src="//t1.daumcdn.net/midas/rt/dk_bt/roosevelt_dk_bt.js" async="async"></script> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-6e43216ad1ef9e879370e963df8ee6b7af21767a/static/script/menubar.min.js"></script> <script>window.tiara = {"svcDomain":"user.tistory.com","section":"글뷰","trackPage":"글뷰_보기","page":"글뷰","key":"2840920-18983","customProps":{"userId":"0","blogId":"2840920","entryId":"18983","role":"guest","trackPage":"글뷰_보기","filterTarget":false},"entry":{"entryId":"18983","categoryName":"JQUERY","categoryId":"381321","author":"3264508","image":"","plink":"/entry/JQUERY-%ED%8E%98%EC%9D%B4%EC%A7%80%EC%97%90%EC%84%9C-%ED%8C%8C%EC%9D%BC%EC%9D%84-%EC%82%AD%EC%A0%9C%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%BB%EA%B2%8C-%ED%8C%8C%EC%9D%BC%EC%9D%98-%EC%9E%85%EB%A0%A5-%EA%B0%92%EC%9D%84-%EC%84%A4%EC%A0%95%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-%EB%B3%B5%EC%A0%9C","tags":["events","file","forms","javascript","jQuery"]},"kakaoAppKey":"3e6ddd834b023f24221217e370daed18","appUserId":"null"}</script> <script type="module" src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.0/index.js"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.0/polyfills-legacy.min.js" nomodule="true" defer="true"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.0/index-legacy.js" nomodule="true" defer="true"></script> </body> </html>