ฉันต้องการสร้างเหตุการณ์คลิกบน<input type="file">แท็กโดยทางโปรแกรม

เพียงแค่เรียกใช้ click () ดูเหมือนจะไม่ทำอะไรเลยหรืออย่างน้อยก็ไม่ได้ปรากฏขึ้นมาในกล่องโต้ตอบการเลือกไฟล์

ฉันได้ทดลองกับการจับภาพเหตุการณ์โดยใช้ผู้ฟังและเปลี่ยนเส้นทางของเหตุการณ์ แต่ฉันไม่สามารถรับเหตุการณ์นั้นได้จริง ๆ เหมือนมีคนคลิกที่มัน

คุณไม่สามารถทำได้ในทุกเบราว์เซอร์โดยคาดว่า IE จะอนุญาต แต่ Mozilla และ Opera ไม่สามารถทำได้

เมื่อคุณเขียนข้อความใน GMail คุณลักษณะ 'แนบไฟล์' จะถูกนำไปใช้งานหนึ่งทางสำหรับ IE และเบราว์เซอร์ใด ๆ ที่สนับสนุนสิ่งนี้จากนั้นนำไปใช้กับ Firefox และเบราว์เซอร์ที่ไม่มี

ผมไม่ทราบว่าทำไมคุณไม่สามารถทำมันได้ แต่สิ่งหนึ่งที่เป็นความเสี่ยงด้านความปลอดภัยและที่คุณไม่ได้รับอนุญาตให้ทำในเบราว์เซอร์ใด ๆ มีการตั้งค่าโปรแกรมชื่อไฟล์บนองค์ประกอบไฟล์ HTML

ฉันค้นหาวิธีแก้ปัญหามาตลอดทั้งวัน และนี่คือข้อสรุปที่ฉันได้ทำ:

1. ด้วยเหตุผลด้านความปลอดภัย Opera และ Firefox ไม่อนุญาตให้ทริกเกอร์อินพุตไฟล์
2. ทางเลือกที่สะดวกเพียงทางเดียวคือการสร้างไฟล์ "ซ่อน" (ใช้ความทึบ, ไม่ใช่ "ซ่อน" หรือ "แสดง: ไม่มี"!) จากนั้นสร้างปุ่ม "ด้านล่าง" ด้วยวิธีนี้ปุ่มจะเห็น แต่เมื่อผู้ใช้คลิกมันจะเปิดใช้งานการป้อนไฟล์จริง

หวังว่านี่จะช่วยได้! :)

<div style="display: block; width: 100px; height: 20px; overflow: hidden;">
<button style="width: 110px; height: 30px; position: relative; top: -5px; left: -5px;"><a href="javascript: void(0)">Upload File</a></button>
<input type="file" id="upload_input" name="upload" style="font-size: 50px; width: 120px; opacity: 0; filter:alpha(opacity=0);  position: relative; top: -40px;; left: -20px" />
</div>

คุณสามารถกด click () บนเบราว์เซอร์ใดก็ได้ แต่เบราว์เซอร์บางตัวจำเป็นต้องมีองค์ประกอบที่สามารถมองเห็นและโฟกัสได้ นี่คือตัวอย่าง jQuery:

$('#input_element').show();
$('#input_element').focus();
$('#input_element').click();
$('#input_element').hide();

มันใช้งานได้กับ hide ก่อนหน้าclick()แต่ฉันไม่รู้ว่ามันใช้งานได้หรือไม่ถ้าไม่เรียกใช้วิธีการแสดง ไม่เคยลองสิ่งนี้บน Opera ฉันทดสอบกับ IE / FF / Safari / Chrome แล้วใช้งานได้ ฉันหวังว่านี่จะช่วยได้

เป็นไปได้: ภายใต้ FF4 +, Opera, Chrome: แต่:

1. inputElement.click()ควรถูกเรียกจากบริบทการกระทำของผู้ใช้! (ไม่ใช่บริบทการทำงานของสคริปต์)

2. <input type="file" />ควรจะปรากฏให้เห็น ( inputElement.style.display !== 'none') (คุณสามารถซ่อนด้วยการมองเห็นหรืออย่างอื่น แต่ไม่ใช่คุณสมบัติ "แสดง")

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

HTML (บางแห่ง):

<a id="fileLink" href="javascript:fileBrowse();" onmouseover="fileMove();">File Browse</a>

HTML (บางที่คุณไม่สนใจ):

<div id="uploadForm" style="filter:alpha(opacity=0); opacity: 0.0; width: 300px; cursor: pointer;">
    <form method="POST" enctype="multipart/form-data">
        <input type="file" name="file" />
    </form>
</div>

JavaScript:

function pageY(el) {
    var ot = 0;
    while (el && el.offsetParent != el) {
        ot += el.offsetTop ? el.offsetTop : 0;
        el = el.offsetParent;
    }
    return ot;
}

function pageX(el) {
    var ol = 0;
    while (el && el.offsetParent != el) {
        ol += el.offsetLeft ? el.offsetLeft : 0;
        el = el.offsetParent;
    }
    return ol;
}

function fileMove() {
    if (navigator.appName == "Microsoft Internet Explorer") {
        return; // Don't need to do this in IE. 
    }
    var link = document.getElementById("fileLink");
    var form = document.getElementById("uploadForm");
    var x = pageX(link);
    var y = pageY(link);
    form.style.position = 'absolute';
    form.style.left = x + 'px';
    form.style.top = y + 'px';
}

function fileBrowse() {
    // This works in IE only. Doesn't do jack in FF. :( 
    var browseField = document.getElementById("uploadForm").file;
    browseField.click();
}

ลองใช้วิธีแก้ปัญหานี้: http://code.google.com/p/upload-at-click/

เพียงใช้แท็กป้ายกำกับด้วยวิธีนี้คุณสามารถซ่อนอินพุตและทำให้มันทำงานผ่านป้ายกำกับที่เกี่ยวข้อง https://developer.mozilla.org/fr/docs/Web/HTML/Element/Label

หากคุณต้องการให้clickวิธีการทำงานกับ Chrome, Firefox ฯลฯ ให้ใช้สไตล์ต่อไปนี้กับไฟล์อินพุตของคุณ มันจะถูกซ่อนไว้อย่างสมบูรณ์แบบเหมือนที่คุณทำdisplay: none;

#fileInput {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: -5000px;
}

มันง่ายมากฉันทดสอบมันใช้งานได้!

$(document).one('mousemove', function() { $(element).trigger('click') } );

ทำงานให้ฉันเมื่อฉันพบปัญหาที่คล้ายกันมันเป็น eRube Goldberg ปกติ

วิธีแก้ปัญหาการทำงาน

ให้ฉันเพิ่มในโพสต์เก่านี้เป็นวิธีแก้ปัญหาการทำงานที่ฉันเคยใช้ที่ทำงานใน 80% หรือมากกว่าเบราว์เซอร์ทั้งหมดทั้งเก่าและใหม่

การแก้ปัญหานั้นซับซ้อน แต่ก็ง่าย ขั้นตอนแรกคือการใช้ประโยชน์จาก CSS และคาดเดาชนิดของไฟล์อินพุตด้วย "องค์ประกอบใต้" ที่แสดงผ่านเนื่องจากมีความทึบของ 0 ขั้นตอนต่อไปคือการใช้ JavaScript เพื่ออัปเดตป้ายกำกับตามต้องการ

HTML _{รหัสจะถูกแทรกเพียงถ้าคุณต้องการวิธีที่รวดเร็วในการเข้าถึงองค์ประกอบที่เฉพาะเจาะจง แต่ชั้นเรียนเป็นสิ่งที่จำเป็นเพราะเกี่ยวข้องกับ CSS ที่กำหนดกระบวนการทั้งหมดนี้ขึ้น}

<div class="file-input wrapper">
    <input id="inpFile0" type="file" class="file-input control" />
    <div class="file-input content">
        <label id="inpFileOutput0" for="inpFileButton" class="file-input output">Click Here</label>
        <input id="inpFileButton0" type="button" class="file-input button" value="Select File" />
    </div>
</div>

CSS _{โปรดจำไว้ว่าการระบายสีและรูปแบบตัวอักษรนั้นเป็นสิ่งที่คุณต้องการอย่างสมบูรณ์หากคุณใช้ CSS พื้นฐานนี้คุณสามารถใช้เครื่องหมายหลังเลิกงานตามสไตล์ได้ตามที่คุณต้องการ}

.file-test-area {
    border: 1px solid;
    margin: .5em;
    padding: 1em;
}
.file-input {
    cursor: pointer !important;
}
.file-input * {
    cursor: pointer !important;
    display: inline-block;
}
.file-input.wrapper {
    display: inline-block;
    font-size: 14px;
    height: auto;
    overflow: hidden;
    position: relative;
    width: auto;
}
.file-input.control {
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: 0;

    height: 100%;
    position: absolute;
    text-align: right;
    width: 100%;
    z-index: 2;
}
.file-input.content {
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 1;
}
.file-input.output {
    background-color: #FFC;
    font-size: .8em;
    padding: .2em .2em .2em .4em;
    text-align: center;
    width: 10em;
}
.file-input.button {
    border: none;
    font-weight: bold;
    margin-left: .25em;
    padding: 0 .25em;
}

JavaScript _{บริสุทธิ์และเป็นจริง แต่เบราว์เซอร์ OLDER (เกษียณอายุ) บางตัวอาจยังมีปัญหากับมัน (เช่น Netscrape 2!)}

var inp = document.getElementsByTagName('input');
for (var i=0;i<inp.length;i++) {
    if (inp[i].type != 'file') continue;
    inp[i].relatedElement = inp[i].parentNode.getElementsByTagName('label')[0];
    inp[i].onchange /*= inp[i].onmouseout*/ = function () {
        this.relatedElement.innerHTML = this.value;
    };
};

ตัวอย่างการทำงาน jsFiddle

มันได้ผล :

เพื่อเหตุผลด้านความปลอดภัยบน Firefox และ Opera คุณไม่สามารถเริ่มการคลิกที่อินพุตไฟล์ แต่คุณสามารถจำลองด้วย MouseEvents:

<script>
click=function(element){
    if(element!=null){
        try {element.click();}
        catch(e) {
            var evt = document.createEvent("MouseEvents");
            evt.initMouseEvent("click",true,true,window,0,0,0,0,0,false,false,false,false,0,null);
            element.dispatchEvent(evt);
            }
        }
    };
</script>

<input type="button" value="upload" onclick="click(document.getElementById('inputFile'));"><input type="file" id="inputFile" style="display:none">

ฉันรู้ว่ามันเก่าและโซลูชันทั้งหมดเหล่านี้มีการแฮ็กข้อควรระวังด้านความปลอดภัยของเบราว์เซอร์ที่มีคุณค่า

ที่กล่าวว่า ณ วันนี้ fileInput.click () ทำงานใน Chrome ปัจจุบัน (36.0.1985.125 m) และ Firefox ESR ปัจจุบัน (24.7.0) แต่ไม่ใช่ใน IE ปัจจุบัน (11.0.9600.17207) การซ้อนทับฟิลด์ไฟล์ด้วยความทึบ 0 ที่ด้านบนของปุ่มใช้งานได้ แต่ฉันต้องการองค์ประกอบลิงก์เป็นทริกเกอร์ที่มองเห็นได้และโฮเวอร์ที่ขีดเส้นใต้ไม่ได้ทำงานในเบราว์เซอร์ใด ๆ มันจะกระพริบแล้วหายไปอาจเป็นเพราะเบราว์เซอร์กำลังคิดว่าสไตล์การวางเมาส์เหนือใช้จริงหรือไม่

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

ง่ายมาก: วางตำแหน่งหน้าจอฟิลด์อินพุตไฟล์ (ตำแหน่ง: สัมบูรณ์; สูงสุด: -5000px) วางองค์ประกอบเลเบลไว้รอบ ๆ และเรียกใช้การคลิกที่ป้ายกำกับแทนที่จะเป็นฟิลด์ไฟล์

โปรดทราบว่าจะต้องมีสคริปต์เพื่อเรียกวิธีการคลิกของป้ายกำกับซึ่งจะไม่ทำเช่นนั้นโดยอัตโนมัติเช่นเมื่อคุณคลิกข้อความภายในองค์ประกอบป้ายกำกับ เห็นได้ชัดว่าองค์ประกอบลิงก์จับการคลิกและไม่ได้ทำให้ผ่านไปยังป้ายกำกับ

โปรดทราบว่านี่ไม่ได้มีวิธีในการแสดงไฟล์ที่เลือกในปัจจุบันเนื่องจากฟิลด์เป็นภาพนอกจอ ฉันต้องการส่งทันทีเมื่อเลือกไฟล์ดังนั้นจึงไม่ใช่ปัญหาสำหรับฉัน แต่คุณต้องมีวิธีการที่แตกต่างออกไปหากสถานการณ์ของคุณแตกต่างกัน

JS Fiddle: http://jsfiddle.net/eyedean/1bw357kw/

popFileSelector = function() {
    var el = document.getElementById("fileElem");
    if (el) {
        el.click();  
    }
};

window.popRightAway = function() {
    document.getElementById('log').innerHTML += 'I am right away!<br />';
    popFileSelector();
};

window.popWithDelay = function() {
    document.getElementById('log').innerHTML += 'I am gonna delay!<br />';
    window.setTimeout(function() {
        document.getElementById('log').innerHTML += 'I was delayed!<br />';
        popFileSelector();
    }, 1000);
};

<body>
  <form>
      <input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)" />
  </form>
  <a onclick="popRightAway()" href="#">Pop Now</a>
    <br />
  <a onclick="popWithDelay()" href="#">Pop With 1 Second Delay</a>
    <div id="log">Log: <br /></div>
</body>

รหัสนี้ใช้ได้สำหรับฉัน นี่คือสิ่งที่คุณพยายามทำใช่ไหม

<input type="file" style="position:absolute;left:-999px;" id="fileinput" />
<button  id="addfiles" >Add files</button>

<script language="javascript" type="text/javascript">
   $("#addfiles").click(function(){
      $("#fileinput").click();
   });
</script>

โซลูชันของฉันสำหรับ Safari ด้วย jQuery และ jQuery-ui:

$("<input type='file' class='ui-helper-hidden-accessible' />").appendTo("body").focus().trigger('click');

นี่คือโซลูชัน JavaScript ที่แท้จริงสำหรับปัญหานี้ ทำงานได้ดีในทุกเบราว์เซอร์

<script>
    function upload_image_init(){
        var elem = document.getElementById('file');
        if(elem && document.createEvent) {
           var evt = document.createEvent("MouseEvents");
           evt.initEvent("click", true, false);
           elem.dispatchEvent(evt);
        }
    }
</script>

มีหลายวิธีในการเปลี่ยนเส้นทางเหตุการณ์ไปยังตัวควบคุม แต่อย่าคาดหวังว่าจะสามารถยิงเหตุการณ์ไปยังตัวควบคุมไฟได้อย่างง่ายดายเนื่องจากเบราว์เซอร์จะพยายามบล็อกเหตุการณ์นั้นด้วยเหตุผลด้านความปลอดภัย (ดี)

หากคุณจะต้องโต้ตอบไฟล์ที่จะปรากฏขึ้นเมื่อผู้ใช้คลิกที่บางสิ่งบางอย่างสมมติว่าเพราะคุณต้องการดูดีปุ่มอัปโหลดไฟล์แล้วคุณอาจต้องการที่จะดูในสิ่งที่ฌอน Inman ขึ้นมาด้วย

ฉันสามารถใช้แป้นพิมพ์กระตุ้นการเปลี่ยนโฟกัสที่สร้างสรรค์ในและนอกการควบคุมระหว่างการกดคีย์การกดปุ่มและการกดปุ่มเหตุการณ์ YMMV

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

ฉันค้นคว้ามาระยะหนึ่งแล้วเพราะฉันต้องการสร้างปุ่มแบบกำหนดเองที่จะเปิดกล่องโต้ตอบไฟล์และเริ่มการอัปโหลดทันที ฉันเพิ่งสังเกตสิ่งที่อาจทำให้สิ่งนี้เป็นไปได้ - Firefox ดูเหมือนจะเปิดกล่องโต้ตอบเมื่อคุณคลิกที่ใดก็ได้ในการอัปโหลด ดังนั้นต่อไปนี้อาจทำ:

1. สร้างการอัปโหลดไฟล์และองค์ประกอบแยกต่างหากที่มีภาพที่คุณต้องการใช้เป็นปุ่ม
2. จัดเรียงทับซ้อนและทำให้องค์ประกอบไฟล์ด้านหลังและเส้นขอบโปร่งใสดังนั้นปุ่มจึงเป็นสิ่งเดียวที่มองเห็นได้
3. เพิ่ม javascript เพื่อให้ IE เปิดกล่องโต้ตอบเมื่อมีการคลิกปุ่ม / ป้อนไฟล์
4. ใช้เหตุการณ์ onchange เพื่อส่งแบบฟอร์มเมื่อไฟล์ถูกเลือก

นี่เป็นเพียงทฤษฎีเท่านั้นเพราะฉันใช้วิธีอื่นในการแก้ปัญหา แต่มันอาจใช้ได้

ฉันมี<input type="button">แท็กที่ซ่อนจากมุมมอง สิ่งที่ฉันทำคือแนบ"onClick"เหตุการณ์ไปยังองค์ประกอบที่มองเห็นได้ทุกประเภทเช่นป้ายกำกับ สิ่งนี้ทำได้โดยใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Google Chrome หรือ Firebug ของ Mozilla Firefox โดยใช้คำสั่ง "แก้ไข HTML" คลิกขวา ในเหตุการณ์นี้ระบุสคริปต์ต่อไปนี้หรือสิ่งที่คล้ายกัน:

หากคุณมี JQuery:

$('#id_of_component').click();

ถ้าไม่:

document.getElementById('id_of_component').click();

ขอบคุณ

เฮ้วิธีนี้ใช้งานได้ สำหรับการดาวน์โหลดเราควรใช้ MSBLOB

$scope.getSingleInvoicePDF = function(invoiceNumberEntity) {
   var fileName = invoiceNumberEntity + ".pdf";
   var pdfDownload = document.createElement("a");
   document.body.appendChild(pdfDownload);

   AngularWebService.getFileWithSuffix("ezbillpdfget",invoiceNumberEntity,"pdf" ).then(function(returnedJSON) {
       var fileBlob = new Blob([returnedJSON.data], {type: 'application/pdf'});
       if (navigator.appVersion.toString().indexOf('.NET') > 0) { // for IE browser
           window.navigator.msSaveBlob(fileBlob, fileName);
       } else { // for other browsers
           var fileURL = window.URL.createObjectURL(fileBlob);
           pdfDownload.href = fileURL;
           pdfDownload.download = fileName;
           pdfDownload.click();      
       }
   });
};

สำหรับ AngularJS หรือแม้แต่สำหรับจาวาสคริปต์ปกติ

ตอนนี้จะเป็นไปได้ใน Firefox 4 โดยมีข้อแม้ว่านับเป็นหน้าต่างป๊อปอัพและจะถูกบล็อกเมื่อใดก็ตามที่หน้าต่างป๊อปอัปจะเป็นเช่นนั้น

นี่เป็นวิธีแก้ปัญหาที่เหมาะกับฉัน: CSS:

#uploadtruefield {
    left: 225px;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 266px;
    opacity:0;
    -moz-opacity:0;
    filter:alpha(opacity:0);
    width: 270px;
    z-index: 2;
}

.uploadmask {
    background:url(../img/browse.gif) no-repeat 100% 50%;
}
#uploadmaskfield{
    width:132px;
}

HTML พร้อมความช่วยเหลือ JQuery "เล็ก":

<div class="uploadmask">
    <input id="uploadmaskfield" type="text" name="uploadmaskfield">
</div>
<input id="uploadtruefield"  type="file" onchange="$('#uploadmaskfield').val(this.value)" >

เพียงให้แน่ใจว่า maskfied ถูกครอบคลุมโดยฟิลด์การอัพโหลดจริง

คุณสามารถทำได้ตามคำตอบจากกล่องโต้ตอบเปิดไฟล์บนแท็ก <a>

<input type="file" id="upload" name="upload" style="visibility: hidden; width: 1px;     height: 1px" multiple />
<a href="" onclick="document.getElementById('upload').click(); return false">Upload</a>

ฉันพบว่าถ้าอินพุต (ไฟล์) อยู่นอกฟอร์มเหตุการณ์การคลิกที่เรียกใช้จะเรียกใช้กล่องโต้ตอบไฟล์

หวังว่านี่จะช่วยให้ใครบางคน - ฉันใช้เวลา 2 ชั่วโมงในการต่อสู้กับมัน:

ใน IE8 หรือ IE9 ถ้าคุณเปิดใช้งานการป้อนไฟล์ด้วย javascript ในทางใดทางหนึ่ง (เชื่อฉันฉันได้ลองทั้งหมด) มันจะไม่ยอมให้คุณส่งแบบฟอร์มโดยใช้ javascript มันจะล้มเหลวอย่างเงียบ ๆ

ส่งแบบฟอร์มผ่านปุ่มส่งปกติอาจทำงานได้ แต่โทร form.submit (); จะล้มเหลวอย่างเงียบ ๆ

ฉันต้องหันมาซ้อนทับปุ่มเลือกไฟล์ของฉันด้วยไฟล์โปร่งใสที่ใช้งานได้

สิ่งนี้ใช้ได้กับฉัน:

<script>
    function sel_file() {
        $("input[name=userfile]").trigger('click');
    }  
</script>

<input type="file" name="userfile" id="userfile" />

<a href="javascript:sel_file();">Click</a>

มันเป็นไปไม่ได้:

var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent('click', true, true, window);  
setTimeout(function(){ document.getElementById('input_field_id').dispatchEvent(evObj); },100);

แต่อย่างใดมันจะทำงานเฉพาะในกรณีที่อยู่ในฟังก์ชั่นซึ่งถูกเรียกผ่านการคลิกเหตุการณ์

ดังนั้นคุณอาจมีการตั้งค่าต่อไปนี้:

HTML:

<div onclick="openFileChooser()" class="some_fancy_stuff">Click here to open image chooser</div>
<input type="file" id="input_img">

JavaScript:

    function openFileChooser() {
      var evObj = document.createEvent('MouseEvents');
      evObj.initMouseEvent('click', true, true, window);  
      setTimeout(function()
      { 
        document.getElementById('input_img').dispatchEvent(evObj);      
      },100);      
    }

คุณสามารถใช้ได้

<button id="file">select file</button>
<input type="file" name="file" id="file_input" style="display:none;">
<script>
$('#file').click(function() {
        $('#file_input').focus().trigger('click');
    });
</script>