jQuery 트리거 파일 입력

163

jQuery를 사용하여 업로드 상자 (찾아보기 버튼)를 트리거하려고합니다.
내가 지금 시도한 방법은 다음과 같습니다. 

$('#fileinput').trigger('click');

그러나 작동하지 않는 것 같습니다. 도와주세요. 감사합니다.

javascript  jquery  css 
— 알렉 스마트
소스
당신은 같은 것을 시도 할 수 있습니다 이 대신.
— Kirtan
19
이 방법이 없습니까? 얼마나 우울합니다.
— Marcus Downing
실제로 우울하고 '클릭'에 의해 심각하게 발생합니까? 사용자가 시작한 입력 이벤트 핸들러에서 FileReference.browse 만 호출 할 수있는 강력한 API와 강력한 보안 모델을 갖춘 Flash / AS3을 선호합니다. 또한 HTML 파일 입력은 추악하고 스타일 지정이 불가능하므로 (콘텐츠와 스타일을 구분하기 위해 입력 태그 일뿐입니다) 클릭 이벤트로 활성화되는 새로운 '찾아보기'버튼을 만들어야합니다 ... 클릭으로 파일 입력으로 전달해야합니다. 요소 배치 및 이벤트 위임 특정성에 따라 무한 재귀로 이어질 수 있습니다.
— Triynko
안타깝게도 지속적인 보안 문제와 컨텐츠 차단의 증가로 인해 Flash를 사용하는 것이 점점 줄어들고 있습니다.
— Tim

답변:

195

이것은 보안 제한 때문입니다.

보안 제한이 또는로 <input type="file"/>설정된 경우에만 보안 제한이 있음을 알았습니다 .display:none;visbilty:hidden

내가 설정하여 뷰포트 외부로의 위치를 시도 그래서 position:absolute및 top:-100px;봐라 그것을 작동합니다.

http://jsfiddle.net/DSARd/1/ 참조

그것을 핵이라고 부릅니다.

희망이 당신을 위해 작동합니다.

— adardesign
소스
4
ff 3.6에서는 작동하지 않습니다. 크롬, 심지어의 작품, 즉 8 :하지만
— AyKarsi
4
보안 제한에 대한 msdn 관련 문서가 있습니까?
— eomeroff 2016 년
2
잘 작동합니다. 어쨌든 나는 더 안전하다고 생각합니다 left: -100px;. 당신은 긴 페이지가 될 수있는 방법을 알고 결코
— 알터 라고스
+1 이것은 실제 답변입니다 (& 좋은 솔루션). 누구든지 명시 적으로 언급 된 문서에 대한 링크가 있습니까?
— kontur
9
불투명도를 0으로 설정할 수도 있습니다.
— Stuart
109

이것은 나를 위해 일했다 :

JS :

$('#fileinput').trigger('click');

HTML :

<div class="hiddenfile">
  <input name="upload" type="file" id="fileinput"/>
</div>

CSS :

.hiddenfile {
 width: 0px;
 height: 0px;
 overflow: hidden;
}

>>> Cross-Browser를 작동시키는 다른 것 : <<<

아이디어는 사용자 정의 버튼 위에 보이지 않는 거대한 "찾아보기"버튼을 오버레이한다는 것입니다. 따라서 사용자가 사용자 정의 버튼을 클릭하면 실제로 기본 입력 필드의 "찾아보기"버튼을 클릭합니다.

JS 피들 : http://jsfiddle.net/5Rh7b/

HTML :

<div id="mybutton">
  <input type="file" id="myfile" name="upload"/>
  Click Me!
</div>

CSS :

div#mybutton {

  /* IMPORTANT STUFF */
  overflow: hidden;
  position: relative;   

  /* SOME STYLING */
  width:  50px;
  height: 28px;
  border: 1px solid green;
  font-weight: bold
  background: red;
}

div#mybutton:hover {
  background: green;
}

input#myfile {
  height: 30px;
  cursor: pointer;
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 100px;
  z-index: 2;

  opacity: 0.0; /* Standard: FF gt 1.5, Opera, Safari */
  filter: alpha(opacity=0); /* IE lt 8 */
  -ms-filter: "alpha(opacity=0)"; /* IE 8 */
  -khtml-opacity: 0.0; /* Safari 1.x */
  -moz-opacity: 0.0; /* FF lt 1.5, Netscape */
}

자바 스크립트 :

$(document).ready(function() {
    $('#myfile').change(function(evt) {
        alert($(this).val());
    });
});
— 썰매
소스
버튼을 넓히면 결함이 있습니다 .IE9 / 10에서는 보이지 않는 업로드 버튼이 오른쪽 버튼과 왼쪽 텍스트 필드로 구성됩니다. 이것에 두 번 클릭해야합니다. 이 경우 글꼴 크기를 100px보다 크게 설정하십시오.
— yunzen
Chrome 53에서도 작동합니다. 그러나 다음과 같이 height변경 하는 것이 좋습니다.height: 100%
— Raptor
두 번째는 iOS의 Safari에서도 작동합니다. 아주 좋아요!
— Jannis
71

LABEL 요소 ex를 사용할 수 있습니다.

<div>
    <label for="browse">Click Me</label>
    <input type="file" id="browse" name="browse" style="display: none">//
</div>
스 니펫 확장

이것은 입력 파일을 트리거합니다

— 존 레이
소스
5
이것이 왜 대답이 맞지 않습니까? 펑키 자바 스크립트가 필요없는 가장 간단한 방법입니다.
— tomitrescak
@tomitrescak OP는 최고의 답변을 기다리는 중이 아닙니다.
— Mahi
9
답변은 질문이 제출 된 후 7 년 후에 게시되었습니다.
1
2018 년 최고의 답변.
— masoomyf
1
너무 2019에 대한 우수 답변)
— guillaumepotier
17

IE8 +, 최근 FF 및 크롬에서 작동 (= 테스트 됨)했습니다.

$('#uploadInput').focus().trigger('click');

클릭을 발생시키기 전에 키가 초점을 맞추고 있습니다 (그렇지 않으면 크롬은 무시합니다).

참고 : 입력을 표시하고 볼 수 있도록 (필요하지 않은 display:none, 그렇지 않은 visibility:hidden) 필요합니다. 나는 (다른 많은 사람들과 마찬가지로) 입력을 절대적으로 배치하고 화면에서 버릴 것을 제안합니다.

#uploadInput {
    position: absolute;
    left: -9999px;
}
— 거대 고무 오리
소스
1
+1입니다. 또한 주변 요소를 숨길 수는 있지만 파일 입력 버튼은 숨길 수 없으며 주변 요소를 표시하고 버튼을 초점을 맞추고 활성화 한 다음 버튼을 숨길 수 있습니다.
— Stevo
10

내 바이올린을 확인하십시오.

http://jsfiddle.net/mohany2712/vaw8k/

.uploadFile {
  visibility: hidden;
}

#uploadIcon {
  cursor: pointer;
}
<body>
  <div class="uploadBox">
    <label for="uploadFile" id="uploadIcon">
      <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Icon_-_upload_photo_2.svg/512px-Icon_-_upload_photo_2.svg.png"  width="20px" height="20px"/>
    </label>
    <input type="file" value="upload" id="uploadFile" class="uploadFile" />
  </div>
</body>
스 니펫 확장

— 모한
소스
9

adardesign 은 숨겨 졌을 때 무시되는 파일 입력 요소와 관련하여 문제를 해결했습니다. 또한 많은 사람들이 요소 크기를 0으로 옮기거나 위치 지정 및 오버플로 조정으로 범위를 벗어난 것을 알았습니다. 이것들은 모두 훌륭한 아이디어입니다.
완벽하게 잘 작동하는 다른 방법 은 불투명도를 0으로 설정하는 것 입니다. 그런 다음 항상 숨기 듯이 다른 요소를 오프셋 하지 않도록 위치를 설정할 수 있습니다 . 거의 모든 방향으로 거의 10K 픽셀의 요소를 이동할 필요가 없습니다.

다음은 하나를 원하는 사람들을위한 작은 예입니다.

input[type='file']{
    position:absolute;
    opacity:0;
    /* For IE8 "Keep the IE opacity settings in this order for max compatibility" */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    /* For IE5 - 7 */
    filter: alpha(opacity=0);
}
— 아이 그 로프 람
소스
7

호기심을 위해 업로드 양식과 입력 파일을 DOM 트리에 추가하지 않고 동적으로 작성하여 원하는 방식으로 작업을 수행 할 수 있습니다.

$('.your-button').on('click', function() {
    var uploadForm = document.createElement('form');
    var fileInput = uploadForm.appendChild(document.createElement('input'));

    fileInput.type = 'file';
    fileInput.name = 'images';
    fileInput.multiple = true;

    fileInput.click();
});

uploadForm을 DOM에 추가 할 필요가 없습니다.

— 자이르 훔 베르토
소스
1
감사합니다! 나는 이것을 20 분 동안 찾고 있었다!
— Labo
5

올바른 코드 :

<style>
    .upload input[type='file']{
        position: absolute;
        float: left;
        opacity: 0; /* For IE8 "Keep the IE opacity settings in this order for max compatibility" */
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* For IE5 - 7 */
        filter: alpha(opacity=0);
        width: 100px; height: 30px; z-index: 51
    }
    .upload input[type='button']{
        width: 100px;
        height: 30px;
        z-index: 50;
    }
    .upload input[type='submit']{
        display: none;
    }
    .upload{
        width: 100px; height: 30px
    }
</style>
<div class="upload">
    <input type='file' ID="flArquivo" onchange="upload();" />
    <input type="button" value="Selecionar" onchange="open();" />
    <input type='submit' ID="btnEnviarImagem"  />
</div>

<script type="text/javascript">
    function open() {
        $('#flArquivo').click();
    }
    function upload() {
        $('#btnEnviarImagem').click();
    }
</script>
— E9 시스 테마
소스
4

실제로, 나는 이것을위한 정말 쉬운 방법을 발견했습니다.

$('#fileinput').show().trigger('click').hide();

이렇게하면 파일 입력 필드에 css 속성 이 none으로 표시 되고 여전히 거래에서 이길 수 있습니다. :)

— skywlkr
소스
느린 기계의 화면에서 튕길 수 있습니다. 최적의 솔루션이 아님
— Dmitry Efimenko
4

대답하기에는 너무 늦었지만이 최소 설정이 가장 효과적이라고 생각합니다. 나는 또한 같은 것을 찾고 있습니다.

  <div class="btn-file">
     <input type="file" class="hidden-input">
     Select your new picture
  </div>

// css

.btn-file {
  display: inline-block;
  padding: 8px 12px;
  cursor: pointer;
  background: #89f;
  color: #345;
  position: relative;
  overflow: hidden;
}

.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  filter: alpha(opacity=0);
  opacity: 0;
  cursor: inherit;
  display: block;
}

jsbin

부트 스트랩 파일 입력 버튼 데모

— 낫와 르 싱
소스
그것은 늦게 대답에 결코)
— AGuyCalledGerald
몇 년이 지난 후에도 여전히 최고의 답변 IMO
— DimmuR
4

이것은 매우 오래된 질문이지만 불행히도이 문제는 여전히 관련이 있으며 해결책이 필요합니다.

내가 생각해 낸 (놀랍게도 간단한) 솔루션은 실제 파일 입력 필드를 "숨기고"LABEL 태그로 감싸는 것입니다 (부트 스트랩 및 HTML5를 기반으로 향상시킬 수 있음).

See here:여기에 예제 코드

이 방법으로 실제 파일 입력 필드는 보이지 않으며 실제로 수정 된 LABEL 요소 인 사용자 정의 된 "버튼"만 표시됩니다. 이 LABEL 요소를 클릭하면 파일 선택 창이 나타나고 선택한 파일이 실제 파일 입력 필드로 이동합니다.

또한 원하는대로 모양과 동작을 조작 할 수 있습니다 (예 : 선택한 후 파일 입력 파일에서 선택한 파일 이름을 가져 와서 어딘가에 표시) LABEL 요소는 자동으로 수행하지 않습니다. 나는 보통 그것을 텍스트 내용으로 LABEL 안에 넣습니다).

그래도 조심하십시오! 이것의 모양과 행동의 조작은 상상하고 생각할 수있는 모든 것으로 제한됩니다. ;-) ;-)

— TheCuBeMan
소스
3

나는 간단한 $ (...). click (); JQuery 1.6.1 사용

— 발렌틴 갈리아
소스
1
흠, 내 웹 사이트 (www.iscriptdesign.com)에서 $ ( 'file : input'). click ()을 수행해도 아무것도하지 않거나 $ ( 'file : input'). trigger ( ' 딸깍 하는 소리');
— dr jerry
다음은 완전한 예입니다 : <input type = "file"id = "picBrowse"... 그리고 $ ( '# picBrowse'). click ();
— Valentin Galea 2016 년
Mac OS에서 cr (어떤 버전인지 확실하지 않음)으로 테스트했지만 XP의 FF 4에서 작동합니다. 감사!
— jerry
2

<input type="file"/>가짜 버튼을 사용하여 트리거하는 동안 사용자 정의 클라이언트 측 유효성 검사에 문제가 있었고 @Guillaume Bodi의 솔루션이 나를 위해 일했습니다 ( opacity: 0;크롬에서도)

$("#MyForm").on("click", "#fake-button", function () {
        $("#uploadInput").focus().trigger("click");
    });

업로드 입력을위한 CSS 스타일 

#uploadInput {
opacity: 0.0; 
filter: alpha(opacity=0); /* IE lt 8 */
-ms-filter: "alpha(opacity=0)"; /* IE 8 */
-khtml-opacity: 0.0; /* Safari 1.x */
-moz-opacity: 0.0;
}
— 아민 K
소스
1

해킹입니다. Position : absolute는 Chrome 용이고 trigger ( 'change')는 IE 용입니다.

var hiddenFile = $("<input type=\"file\" name=\"file\" id=\"file1\" style=\"position:absolute;left:-9999px\" />");
$('body').append(hiddenFile);

$('#aPhotoUpload').click(function () {
    hiddenFile.trigger('click');
    if ($.browser.msie)
        hiddenFile.trigger('change');
});

hiddenFile.change(function (e) {
    alert('TODO');
});
— 얇은 돼지
소스
참고 $.browserjQuery를 최신 버전에서 더 이상 사용되지 않습니다
— 케빈 BEAL
1

내 문제는 iOS 7에서 약간 달랐습니다. FastClick이 문제를 일으키는 것으로 나타났습니다. class="needsclick"버튼 에 추가 하기 만하면됩니다.

— 덱스
소스
0

크로스 브라우저 문제를 염두에 두는 것이 가장 좋은 대답 일 것입니다.

CSS :

#file {
  opacity: 0;
  width: 1px;
  height: 1px;
}

JS :

$(".file-upload").on('click',function(){
   $("[name='file']").click();
});

HTML :

<a class="file-upload">Upload</a>
<input type="file" name="file">
— Eddsters
소스
0

나는 비슷한 것을 가지고 있기 때문에 당신의 문제를 이해한다고 생각합니다. 따라서 태그 <label>에는 속성이 있습니다.이 속성을 사용하여 입력을 type = "file"과 연결할 수 있습니다. 그러나 레이아웃 규칙에 따라이 레이블을 사용하여 활성화하지 않으려면 다음과 같이하십시오.

$(document).ready(function(){
  var reference = $(document).find("#main");
  reference.find(".js-btn-upload").attr({
     formenctype: 'multipart/form-data'
  });
  
  reference.find(".js-btn-upload").click(function(){
    reference.find("label").trigger("click");
  });
  
});
.hide{
  overflow: hidden;
  visibility: hidden;
  /*Style for hide the elements, don't put the element "out" of the screen*/
}

.btn{
  /*button style*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="main">
<form enctype"multipart/formdata" id="form-id" class="hide" method="post" action="your-action">
  <label for="input-id" class="hide"></label>
  <input type="file" id="input-id" class="hide"/>
</form>

<button class="btn js-btn-upload">click me</button>
</div>
스 니펫 확장

물론 당신은 당신의 자신의 목적과 레이아웃에 맞게 이것을 조정할 것입니다.

— 레오나르도 린드 로스
소스
-1

기 illa Bodi의 답변을 바탕으로 나는 이것을했다 :

$('.fileinputbar-button').on('click', function() {
    $('article.project_files > header, article.upload').show();
    $('article.project_files > header, article.upload header').addClass('active');
    $('.file_content, article.upload .content').show();
    $('.fileinput-button input').focus().click();
    $('.fileinput-button').hide();
});

즉, 트리거로 시작하여 표시 한 다음 숨겨져 서 즉시 다시 숨겨집니다.

— 스테보
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.