[javascript] jQuery 트리거 파일 입력

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

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

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

답변

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

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

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

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

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

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

답변

이것은 나를 위해 일했다 :

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());
    });
});

답변

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

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

스 니펫 확장

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

답변

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

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

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

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

#uploadInput {
    position: absolute;
    left: -9999px;
}

답변

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

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>

스 니펫 확장

답변

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);
}

답변

호기심을 위해 업로드 양식과 입력 파일을 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에 추가 할 필요가 없습니다.