복붙노트

[JQUERY] jQuery를 트리거 파일 입력

JQUERY

jQuery를 트리거 파일 입력

해결법

  1. 1.이것은 보안 제한 때문이다.

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

    I는 을 표시하도록 설정되어 있지 않은 경우 보안 제한 만 것을 알았다 : 없음; 또는 visbilty된다 숨겨져.

    i가 설정 위치하여 표시 영역 외부로 위치되도록 시도 : 절대 가기 : -100px; 및 작동 짜잔.

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

    해킹을 호출합니다.

    당신을 위해 일하는 희망.

  2. 2.이것은 나를 위해 일한 :

    이것은 나를 위해 일한 :

    JS :

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

    HTML :

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

    CSS :

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

    크로스 브라우저를 작동 >>> 또 다른 하나 <<<

    아이디어는 당신 오버레이 사용자 정의 버튼을 통해 눈에 보이지 않는 거대한 "찾아보기"버튼을 누릅니다. 사용자가 사용자 정의 버튼을 클릭 할 때, 그는 실제로 기본 입력 필드의 "찾아보기"버튼을 클릭합니다.

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

  3. 3.당신은 LABEL 요소를 사용할 수 있습니다 전의.

    당신은 LABEL 요소를 사용할 수 있습니다 전의.

    < "찾아보기"= 레이블> 나를 클릭 <입력 유형 = "파일"ID = "찾아보기"이름 = "찾아보기"스타일 = "표시 : 없음"> //

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

  4. 4.나는 IE8 +, 최근 FF와 크롬에 (테스트 =) 작업이 :

    나는 IE8 +, 최근 FF와 크롬에 (테스트 =) 작업이 :

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

    열쇠는 클릭 (그렇지 않으면 크롬 무시를) 발사하기 전에 초점을 맞추고있다.

    참고 : 당신은 당신의 입력이 필요를 (: 없음이 아니라 가시성 : 숨겨진 같이 표시되지 않음) 표시 가시 않습니다. 내가 제안 절대적으로 입력 위치를 화면 떨어져 그것을 던져 (다른 많은 전에 가지고).

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

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

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

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

    .uploadFile { 가시성 : 숨겨진; } #uploadIcon { 커서 : 포인터; }

    <= "UploadFile로"ID 레이블 = "uploadIcon">

  6. 6.adardesign가 숨겨져 때 파일 입력 요소가 무시에 대해 그것을 못을 박았다. 나는 또한 많은 사람들이 0으로 요소 크기를 이동하거나 위치 및 오버 플로우 조정과 경계의 그것을 밖으로 밀어 나타났습니다. 이들은 모두 좋은 아이디어입니다. 또한 완벽하게 잘 작동하는 것 같다 것을 다른 방법은 그럼 당신은 언제나 숨기기처럼 다른 요소를 상쇄에서 그것을 유지하는 위치를 설정할 수 있습니다 단지 0으로 불투명도를 설정하는 것입니다. 단지 어떤 방향으로 소자를 약 10K 픽셀 시프트 작은 불필요한 것으로 보인다.

    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. 7.동적으로 DOM 트리에 추가하지 않고, 업로드 양식 및 입력 파일을 생성하여 원하는처럼 그냥 호기심을 위해, 당신이 뭔가를 할 수 있습니다 :

    동적으로 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();
});

    필요는 DOM에 uploadForm를 추가 없습니다.

  8. 8.올바른 코드 :

    올바른 코드 :

    <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>

  9. 9.즉 목적과 디자인입니다. 그것은 보안 문제입니다.

    즉 목적과 디자인입니다. 그것은 보안 문제입니다.

  10. 10.사실, 난 어떤이의 정말 쉬운 방법을 발견 :

    사실, 난 어떤이의 정말 쉬운 방법을 발견 :

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

    이 방법, 파일 입력 필드 없음에 CSS 속성 디스플레이가 여전히 무역을 이길 수 :)

  11. 11.너무 늦었 대답하지만 난이 최소한의 설정 작업 가장 생각합니다. 또한 같은 찾고 있습니다.

    너무 늦었 대답하지만 난이 최소한의 설정 작업 가장 생각합니다. 또한 같은 찾고 있습니다.

      <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

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

  12. 12.이것은 아주 오래된 질문이지만, 불행하게도이 문제는 여전히 관련 및 솔루션을 필요로한다.

    이것은 아주 오래된 질문이지만, 불행하게도이 문제는 여전히 관련 및 솔루션을 필요로한다.

    내가 함께 왔어요 (의외로 간단) 솔루션은 "숨기기"실제 파일 입력 필드로하고 (향상을 위해, 부트 스트랩 및 HTML5 기반으로 할 수 있습니다) 레이블 태그와 함께 포장.

    여기를 참조하십시오 : 예제 코드 여기

    이 방법은 실제 파일 입력 필드는 표시되지 않으며 당신이 보는 모든 실제로 수정 된 LABEL 요소 인 사용자 정의 "버튼"입니다. 이 LABEL 요소를 클릭하면 파일을 선택하는 창이 제공하고 사용자가 선택한 파일은 실제 파일 입력 필드로 이동합니다.

    . 당신이 (예를 들어 원하는대로 그 꼭대기에, 당신은 모양과 동작을 조작 할 수 있습니다 : 파일 입력 파일에서 선택한 파일의 이름을 선택 얻을 후, 어딘가에 보여 label 요소가 자동으로하지 않습니다, 물론. 나는 보통 단지)의 텍스트 내용으로, 라벨 안쪽에 넣어.

    하지만 조심! 모양이의 행동의 조작은 당신이 상상하고 생각할 수에 어떤 제한된다. ;-) ;-)

  13. 13.나는 간단한 $ (...)와 관리 ()을 클릭합니다.; JQuery와 1.6.1과 함께

    나는 간단한 $ (...)와 관리 ()을 클릭합니다.; JQuery와 1.6.1과 함께

  14. 14.그렇지 않으면 단순히

    그렇지 않으면 단순히

    $(':input[type="file"]').show().click().hide();

  15. 15.(:; 크롬에 0도 불투명도) 나는 를 트리거하기 위해 가짜 버튼을 사용하여 @Guillaume Bodi의 솔루션은 나를 위해 일 동안의 사용자 지정 클라이언트 측 유효성 검사에 문제가 있었다

    (:; 크롬에 0도 불투명도) 나는 를 트리거하기 위해 가짜 버튼을 사용하여 @Guillaume Bodi의 솔루션은 나를 위해 일 동안의 사용자 지정 클라이언트 측 유효성 검사에 문제가 있었다

    $("#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;
}

  16. 16.이 시도, 그것은 해킹. 위치는 : 절대 IE위한 크롬 및 트리거 ( '변화')에 대한 것이다.

    이 시도, 그것은 해킹. 위치는 : 절대 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');
});

  17. 17.내 문제는 FastClick 밖으로 7. 턴이 문제를 일으키는 아이폰 OS에 조금 달랐다. 추가 클래스 = 내 버튼 "needsclick는"모든 내가해야 할 일을했을했다.

    내 문제는 FastClick 밖으로 7. 턴이 문제를 일으키는 아이폰 OS에 조금 달랐다. 추가 클래스 = 내 버튼 "needsclick는"모든 내가해야 할 일을했을했다.

  18. 18.완전히 숨겨진 유지하면서 당신은 당신의 JQuery와에서 입력 파일을 클릭 할 수 있습니다.

    완전히 숨겨진 유지하면서 당신은 당신의 JQuery와에서 입력 파일을 클릭 할 수 있습니다.

    나는 이것을 사용하고 있습니다 :

    < input type="file" name="article_input_file" id="article_input_file" accept=".xlsx,.xls" style="display: none" >

$("#article_input_file").click();

    이 HTML 페이지에서 표준 스크립트 태그 내에서 작동합니다.

  19. 19.이것은 마음에 크로스 브라우저 문제를 유지, 아마도 가장 좋은 대답이다.

    이것은 마음에 크로스 브라우저 문제를 유지, 아마도 가장 좋은 대답이다.

    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">

  20. 20.난 내가 비슷한을 가지고 있기 때문에 내가 당신의 문제를 이해 생각한다. 태그 <레이블> 그래서 당신이 유형 = "파일"로 입력을 연결하는이 atribute을 사용할 수에 대한 atribute 있습니다. 그러나 당신은 당신의 레이아웃의 일부 규칙은, 당신이 이런 식으로 할 수 있기 때문에이 라벨을 사용하여이 활성화하지 않으려면.

    난 내가 비슷한을 가지고 있기 때문에 내가 당신의 문제를 이해 생각한다. 태그 <레이블> 그래서 당신이 유형 = "파일"로 입력을 연결하는이 atribute을 사용할 수에 대한 atribute 있습니다. 그러나 당신은 당신의 레이아웃의 일부 규칙은, 당신이 이런 식으로 할 수 있기 때문에이 라벨을 사용하여이 활성화하지 않으려면.

    $ (문서) .ready (함수 () { var에 참조가 $ (문서) .find를 = ( "# 메인"); reference.find ( ". JS-BTN-업로드"). ATTR ({ formenctype : '다중 / 폼 데이터' }); reference.find ( ". JS-BTN 업로드"). ((클릭 기능) { . reference.find ( "상표") 트리거 ( '클릭'); }); }); .숨는 장소{ 오버 플로우 : 숨겨진; 가시성 : 숨겨진; / * 요소가 화면의 "에서"요소를 넣지 마십시오 숨기기 위해 스타일 * / } .btn { / * 버튼 스타일 * / } <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"> <폼에 enctype "다중 / formdata"ID = "폼 아이디"클래스 = "숨기기"방법 = "게시물"행동 = "당신의 액션"> <레이블 = "입력 ID 「클래스 ="닫기 "> < "JS-BTN 업로드 BTN"버튼 클래스 => 저를 클릭

    물론 당신은 당신의 자신의 목적과 레이아웃이 적용되지만, 그게 작동하도록 더 쉽게 방법 내가 아는입니다!

  21. 21.이런 짓을 내가 기욤 Bodi의 답변에 따라 :

    이런 짓을 내가 기욤 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();
});

    이는이 즉시 다시 숨겨 후, 트리거에 대해 표시 한 후 시작하는 숨겨진 의미합니다.

    22. from https://stackoverflow.com/questions/793014/jquery-trigger-file-input by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 만 의사 요소에 클릭 이벤트를 감지  (0) 2020.10.01
[JQUERY] jQuery를 어떻게 동적으로 추가 HTML 요소에 이벤트를 onclick을 결합하여 [중복]  (0) 2020.10.01
[JQUERY] jQuery를 "입력"이벤트  (0) 2020.10.01
[JQUERY] 변경 전 선택 (드롭 다운)의 값을 얻기  (0) 2020.10.01
[JQUERY] 자바 스크립트 전에 페이지를 떠나  (0) 2020.10.01
,

티스토리툴바