อินพุตไฟล์ทริกเกอร์ jQuery

163

กำลังพยายามเปิดกล่องอัพโหลด (ปุ่มเรียกดู) โดยใช้ jQuery
วิธีที่ฉันลองตอนนี้คือ: 

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

แต่ดูเหมือนจะไม่ทำงาน กรุณาช่วย. ขอบคุณ.

javascript  jquery  css 
— อเล็กซ์สมาร์ท
แหล่งที่มา
คุณสามารถลองสิ่งนี้แทน
— Kirtan
19
ไม่มีวิธีการทำเช่นนี้? วิธีตกต่ำ
— Marcus Downing
ตกต่ำอย่างแน่นอนและมันถูกเรียกโดย 'คลิก' อย่างจริงจัง? ฉันชอบ Flash / AS3 มากด้วย API ที่แน่นหนาและโมเดลความปลอดภัยขั้นสูงที่อนุญาตให้เรียกใช้ FileReference.browse จากตัวจัดการเหตุการณ์อินพุตที่ผู้ใช้เป็นผู้เริ่มต้นเท่านั้น นอกจากนี้การป้อนไฟล์ HTML นั้นน่าเกลียดและไม่สามารถจัดเก็บได้ (เป็นเพียงแท็กอินพุตซึ่งมีมากพอสำหรับการแยกเนื้อหาและสไตล์) ดังนั้นคุณต้องสร้างปุ่ม 'เรียกดู' ใหม่ซึ่งเปิดใช้งานด้วยการคลิก ... ซึ่งคุณต้องส่งต่อไปยังอินพุตไฟล์เป็นการคลิก ... ซึ่งสามารถนำไปสู่การเรียกซ้ำแบบไม่สิ้นสุดโดยขึ้นอยู่กับการจัดวางองค์ประกอบและความเฉพาะเจาะจงของการมอบหมายกิจกรรม
— Triynko
น่าเสียดายที่การใช้ Flash กำลังลดลงเรื่อย ๆ เนื่องจากปัญหาด้านความปลอดภัยที่คงที่และการเพิ่มขึ้นของตัวบล็อกเนื้อหา
— ทิม

คำตอบ:

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
2
ใช้งานได้ดี ในกรณีใด ๆ left: -100px;ผมคิดว่ามีความปลอดภัยชุด คุณไม่มีทางรู้ว่าจะเป็นหน้าเว็บนานเท่าไหร่
— Alter Lagos
+1 นี่คือคำตอบที่แท้จริง (& เป็นทางออกที่ดี) ใครบ้างมีลิงก์ไปยังเอกสารที่ระบุไว้อย่างชัดเจน?
— กำหนด
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;
}

>>> อีกอันหนึ่งที่ทำงานข้ามเบราว์เซอร์: <<<

แนวคิดคือคุณวางทับปุ่ม "เรียกดู" ขนาดใหญ่ที่มองไม่เห็นบนปุ่มที่คุณกำหนดเอง ดังนั้นเมื่อผู้ใช้คลิกปุ่มที่กำหนดเองเขาก็คลิกที่ปุ่ม "เรียกดู" ของช่องป้อนข้อมูลดั้งเดิม

JS Fiddle: 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 */
}

JavaScript:

$(document).ready(function() {
    $('#myfile').change(function(evt) {
        alert($(this).val());
    });
});
— เลื่อน
แหล่งที่มา
มีข้อบกพร่องหนึ่งคือถ้าคุณทำให้ปุ่มกว้างขึ้นใน IE9 / 10 ปุ่มอัพโหลดที่มองไม่เห็นทำจากปุ่มขวาและฟิลด์ข้อความด้านซ้าย ในเรื่องนี้คุณต้องดับเบิลคลิก ในกรณีนี้ลองตั้งขนาดตัวอักษรให้ใหญ่กว่า 100px;
— yunzen
สิ่งนี้ใช้ได้แม้ใน Chrome 53 อย่างไรก็ตามheightเราขอแนะนำให้เปลี่ยนเป็นheight: 100%
— Raptor
คนที่สองใช้งานได้กับ Safari บน iOS ดีมาก!
— Jannis
71

คุณสามารถใช้องค์ประกอบ LABEL เช่น

<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
คำตอบที่ดีที่สุดในปี 2561 ด้วย
— masoomyf
1
คำตอบที่ดีที่สุดสำหรับปี 2562 ด้วย;)
— guillaumepotier
17

ฉันใช้งานได้ (= ทดสอบแล้ว) ใน IE8 +, FF และ chrome ล่าสุด:

$('#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

การออกแบบ adardมันเกี่ยวกับองค์ประกอบของไฟล์ที่จะถูกละเว้นเมื่อมันถูกซ่อน ฉันยังสังเกตเห็นว่าหลาย ๆ คนขยับขนาดองค์ประกอบเป็น 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);
}
— eyegropram
แหล่งที่มา
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

— jairhumberto
แหล่งที่มา
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 Sistemas
แหล่งที่มา
4

จริงๆแล้วฉันพบวิธีที่ง่ายมากสำหรับสิ่งนี้ซึ่งก็คือ:

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

วิธีนี้ช่องใส่ไฟล์ของคุณสามารถมีคุณสมบัติ CSS การแสดงผลบนไม่มีและยังคงชนะการค้า :)

— 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

ปุ่มอินพุตไฟล์ bootstrap สาธิต

— Natwar Singh
แหล่งที่มา
จะไม่ตอบช้า;)
— AGuyCalledGerald
ไม่กี่ปีต่อมายังคงตอบ IMO ที่ดีที่สุด
— DimmuR
4

นี่เป็นคำถามที่เก่ามาก แต่น่าเสียดายที่ปัญหานี้ยังคงเกี่ยวข้องและต้องการวิธีแก้ไข

โซลูชันที่เรียบง่าย (น่าแปลกใจ) ที่ฉันคิดไว้คือ "ซ่อน" ฟิลด์อินพุตไฟล์จริงและปิดด้วยแท็ก LABEL (สามารถใช้ Bootstrap และ HTML5 เพื่อเพิ่มประสิทธิภาพ)

See here:รหัสตัวอย่างที่นี่

ด้วยวิธีนี้ฟิลด์อินพุตไฟล์จริงจะมองไม่เห็นและสิ่งที่คุณเห็นคือปุ่ม "กำหนดเอง" ซึ่งจริงๆแล้วเป็นองค์ประกอบ LABEL ที่แก้ไข เมื่อคุณคลิกที่องค์ประกอบ LABEL นี้หน้าต่างสำหรับเลือกไฟล์จะปรากฏขึ้นและไฟล์ที่คุณเลือกจะเข้าสู่ฟิลด์อินพุตไฟล์จริง

คุณสามารถปรับเปลี่ยนรูปลักษณ์และพฤติกรรมได้ตามต้องการ (เช่น: รับชื่อไฟล์ที่เลือกจากไฟล์อินพุตไฟล์หลังจากเลือกแล้วแสดงที่อื่นองค์ประกอบ LABEL ไม่ได้ทำโดยอัตโนมัติ แน่นอนฉันมักจะใส่ไว้ใน LABEL เป็นเนื้อหาข้อความ)

ระวังหน่อย! การปรับเปลี่ยนรูปลักษณ์และพฤติกรรมของสิ่งนี้ จำกัด อยู่ที่สิ่งที่คุณสามารถจินตนาการและคิด ;-) ;-)

— TheCuBeMan
แหล่งที่มา
3

ฉันจัดการด้วยง่ายๆ $ (... ). คลิก (); ด้วย JQuery 1.6.1

— Valentin Galea
แหล่งที่มา
1
อืมอยากรู้ว่าคุณทำอย่างนั้นได้อย่างไรในเว็บไซต์ของฉัน (www.iscriptdesign.com) ทำ $ ('ไฟล์: อินพุต') คลิก () ไม่ทำอะไรเลยและไม่ $ ('ไฟล์: อินพุต') ทริกเกอร์ (' คลิก');
— dr jerry
นี่คือตัวอย่างที่สมบูรณ์: <input type = "file" id = "picBrowse" ... จากนั้น $ ('# picBrowse') คลิก ();
— Valentin Galea
ฉันทดสอบกับ cr (ไม่แน่ใจว่าเวอร์ชันใด) บน mac os ทำงานบน FF 4 บน XP ได้ ขอบคุณ!
— dr 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;
}
— อามินเค
แหล่งที่มา
1

ลองนี่สิมันคือแฮ็ค ตำแหน่ง: สัมบูรณ์สำหรับ Chrome และทริกเกอร์ ('เปลี่ยนแปลง') สำหรับ 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');
});
— thinpiglin
แหล่งที่มา
โปรดทราบว่า$.browserเลิกใช้แล้วใน jQuery เวอร์ชันใหม่กว่า
— Kevin Beal
1

ปัญหาของฉันแตกต่างกันเล็กน้อยใน iOS 7 ปรากฎว่า FastClick เป็นสาเหตุของปัญหา สิ่งที่ฉันต้องทำคือเพิ่มclass="needsclick"ปุ่มของฉัน

— Dex
แหล่งที่มา
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>
ขยายตัวอย่างข้อมูล

แน่นอนว่าคุณจะปรับมันเพื่อจุดประสงค์และรูปแบบของคุณเอง แต่นั่นเป็นวิธีที่ง่ายกว่าที่ฉันรู้เพื่อให้มันทำงาน !!

— Leonardo Lindroth
แหล่งที่มา
-1

จากคำตอบของ Guillaume 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();
});

ซึ่งหมายความว่ามันถูกซ่อนไว้เพื่อเริ่มต้นด้วยจากนั้นแสดงเพื่อให้ทริกเกอร์จากนั้นซ่อนอีกครั้งทันที

— Stevo
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.