Tôi muốn tạo một sự kiện nhấp chuột vào một <input type="file">thẻ lập trình.

Chỉ cần gọi click () dường như không làm gì cả hoặc ít nhất là nó không bật lên hộp thoại chọn tệp.

Tôi đã thử nghiệm chụp các sự kiện bằng cách sử dụng trình nghe và chuyển hướng sự kiện, nhưng tôi không thể có được điều đó để thực sự thực hiện sự kiện như ai đó đã nhấp vào nó.

Bạn không thể làm điều đó trong tất cả các trình duyệt, được cho là IE không cho phép điều đó, nhưng Mozilla và Opera thì không.

Khi bạn soạn tin nhắn trong GMail, tính năng 'đính kèm tệp' được triển khai theo một cách cho IE và bất kỳ trình duyệt nào hỗ trợ điều này, sau đó triển khai một cách khác cho Firefox và các trình duyệt không có.

Tôi không biết tại sao bạn không thể làm điều đó, nhưng có một điều là rủi ro bảo mật và bạn không được phép làm trong bất kỳ trình duyệt nào, được lập trình đặt tên tệp trên phần tử Tệp HTML.

Tôi đã tìm kiếm giải pháp cho cả ngày này. Và đây là những kết luận mà tôi đã đưa ra:

1. Vì lý do bảo mật, Opera và Firefox không cho phép kích hoạt nhập tệp.
2. Cách thay thế thuận tiện duy nhất là tạo đầu vào tệp "ẩn" (sử dụng độ mờ, không "ẩn" hoặc "hiển thị: không"!) Và sau đó tạo nút "bên dưới". Theo cách này, nút được nhìn thấy nhưng khi người dùng nhấp vào, nó thực sự kích hoạt đầu vào tập tin.

Hi vọng điêu nay co ich! :)

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

Bạn có thể kích hoạt click () trên bất kỳ trình duyệt nào nhưng một số trình duyệt cần phần tử hiển thị và tập trung. Đây là một ví dụ về jQuery:

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

Nó hoạt động với ẩn trước click()nhưng tôi không biết nếu nó hoạt động mà không gọi phương thức hiển thị. Chưa bao giờ thử điều này trên Opera, tôi đã thử nghiệm trên IE / FF / Safari / Chrome và nó hoạt động. Hy vọng điều này có thể giúp cho bạn.

VẬY NÀY: Dưới FF4 +, Opera ?, Chrome: nhưng:

1. inputElement.click()nên được gọi từ bối cảnh hành động người dùng! (không phải bối cảnh thực thi tập lệnh)

2. <input type="file" />nên hiển thị ( inputElement.style.display !== 'none') (bạn có thể ẩn nó với khả năng hiển thị hoặc một cái gì đó khác, nhưng không phải thuộc tính "hiển thị")

Đối với những người hiểu rằng bạn phải phủ một hình thức vô hình qua liên kết, nhưng quá lười để viết, tôi đã viết nó cho bạn. Vâng, đối với tôi, nhưng cũng có thể chia sẻ. Bình luận được chào đón.

HTML (Một nơi nào đó):

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

HTML (Một nơi nào đó bạn không quan tâm):

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

Hãy thử giải pháp này: http://code.google.com.vn/p/upload-at-click/

chỉ cần sử dụng thẻ nhãn, theo cách đó bạn có thể ẩn đầu vào và làm cho nó hoạt động thông qua nhãn liên quan https://developer.mozilla.org/fr/docs/Web/HTML/Euity/Label

Nếu bạn muốn clickphương thức hoạt động trên Chrome, Firefox, v.v., hãy áp dụng kiểu sau cho tệp đầu vào của bạn. Nó sẽ được ẩn hoàn toàn, nó giống như bạn làm mộtdisplay: none;

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

Thật đơn giản, tôi đã thử nó hoạt động!

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

Làm việc cho tôi khi tôi gặp vấn đề tương tự, đó là một eRube Goldberg thông thường.

GIẢI PHÁP LÀM VIỆC

Hãy để tôi thêm vào bài viết cũ này, một giải pháp hoạt động mà tôi đã từng sử dụng để hoạt động trong khoảng 80% trở lên của tất cả các trình duyệt cả mới và cũ.

Giải pháp phức tạp nhưng đơn giản. Bước đầu tiên là sử dụng CSS và đưa ra loại tệp đầu vào có "phần tử bên dưới" hiển thị vì nó có độ mờ bằng 0. Bước tiếp theo là sử dụng JavaScript để cập nhật nhãn của nó khi cần.

HTML _{ID được chèn đơn giản nếu bạn muốn một cách nhanh chóng để truy cập một phần tử cụ thể, tuy nhiên, các lớp là bắt buộc vì chúng liên quan đến CSS thiết lập toàn bộ quá trình này}

<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 _{Hãy ghi nhớ, tô màu và kiểu phông chữ và đó hoàn toàn là sở thích của bạn, nếu bạn sử dụng CSS cơ bản này, bạn luôn có thể sử dụng dấu sau khi kết thúc để tạo kiểu theo ý muốn, điều này được hiển thị trong jsFiddle được liệt kê ở cuối.}

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

_{Tuy nhiên,} JavaScript _{Pure và true, một số trình duyệt OLTER (đã nghỉ hưu) vẫn có thể gặp sự cố với nó (như 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;
    };
};

Ví dụ làm việc jsFiddle

Nó hoạt động:

Vì lý do bảo mật trên Firefox và Opera, bạn không thể kích hoạt nhấp vào đầu vào tệp, nhưng bạn có thể mô phỏng với 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">

Tôi biết điều này đã cũ và tất cả các giải pháp này là các bản hack xung quanh các biện pháp phòng ngừa bảo mật của trình duyệt với giá trị thực.

Điều đó nói rằng, tính đến ngày hôm nay, fileInput.click () hoạt động trong Chrome hiện tại (36.0.1985.125 m) và Firefox ESR hiện tại (24.7.0), nhưng không hoạt động trong IE hiện tại (11.0.9600.17207). Xếp chồng một trường tệp có độ mờ 0 trên đầu nút hoạt động, nhưng tôi muốn một yếu tố liên kết là trình kích hoạt hiển thị và di chuột dưới gạch chân không hoạt động trong bất kỳ trình duyệt nào. Nó nhấp nháy rồi biến mất, có lẽ trình duyệt suy nghĩ xem liệu kiểu dáng di chuột có thực sự áp dụng hay không.

Nhưng tôi đã tìm thấy một giải pháp hoạt động trong tất cả các trình duyệt đó. Tôi sẽ không tuyên bố đã thử nghiệm mọi phiên bản của mọi trình duyệt hoặc tôi biết rằng nó sẽ tiếp tục hoạt động mãi mãi, nhưng dường như nó đáp ứng nhu cầu của tôi bây giờ.

Thật đơn giản: Định vị màn hình trường nhập tệp (vị trí: tuyệt đối; trên cùng: -5000px), đặt một phần tử nhãn xung quanh nó và kích hoạt nhấp chuột vào nhãn, thay vì chính trường tệp.

Lưu ý rằng liên kết không cần phải được viết kịch bản để gọi phương thức nhấp của nhãn, nó không tự động làm điều đó, giống như khi bạn nhấp vào văn bản bên trong phần tử nhãn. Rõ ràng là phần tử liên kết nắm bắt được nhấp chuột và nó không đi qua nhãn.

Cũng lưu ý rằng điều này không cung cấp cách hiển thị tệp hiện được chọn, vì trường không có màn hình. Tôi muốn gửi ngay lập tức khi tệp được chọn, vì vậy đó không phải là vấn đề đối với tôi, nhưng bạn sẽ cần một cách tiếp cận hơi khác nếu tình huống của bạn khác.

Câu đố về JS: 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>

Mã này làm việc cho tôi. Đây có phải là những gì bạn đang cố gắng để làm?

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

Giải pháp của tôi cho Safari với jQuery và jQuery-ui:

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

Đây là giải pháp JavaScript thuần túy cho vấn đề này. Hoạt động tốt trên tất cả các trình duyệt

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

Có nhiều cách để chuyển hướng các sự kiện đến điều khiển nhưng đừng hy vọng có thể dễ dàng thực hiện các sự kiện để điều khiển đám cháy vì các trình duyệt sẽ cố gắng chặn điều đó vì lý do bảo mật (tốt).

Nếu bạn chỉ cần hộp thoại tệp hiển thị khi người dùng nhấp vào một cái gì đó, hãy nói vì bạn muốn các nút tải lên tệp trông đẹp hơn, sau đó bạn có thể muốn xem Shaun Inman đã nghĩ gì .

Tôi đã có thể đạt được kích hoạt bàn phím bằng cách chuyển trọng tâm sáng tạo trong và ngoài tầm kiểm soát giữa các sự kiện nhấn phím, nhấn phím & gõ phím. YMMV.

Lời khuyên chân thành của tôi là hãy để điều này một mình, bởi vì đây là một thế giới của sự không tương thích với trình duyệt. Cập nhật trình duyệt nhỏ cũng có thể chặn các thủ thuật mà không có cảnh báo và bạn có thể phải tiếp tục phát minh lại các bản hack để giữ cho nó hoạt động.

Tôi đã nghiên cứu điều này một thời gian trước bởi vì tôi muốn tạo một nút tùy chỉnh sẽ mở hộp thoại tệp và bắt đầu tải lên ngay lập tức. Tôi chỉ nhận thấy một cái gì đó có thể làm điều này có thể - firefox dường như mở hộp thoại khi bạn nhấp vào bất cứ nơi nào trên tải lên. Vì vậy, những điều sau đây có thể làm điều đó:

1. Tạo một tệp tải lên và một yếu tố riêng biệt có chứa một hình ảnh mà bạn muốn sử dụng làm nút
2. Sắp xếp chúng chồng lên nhau và làm cho phần tử tệp backgroud và đường viền trong suốt để nút là thứ duy nhất hiển thị
3. Thêm javascript để làm cho IE mở hộp thoại khi nhấp vào nút / tệp
4. Sử dụng một sự kiện onchange để gửi biểu mẫu khi tệp được chọn

Đây chỉ là lý thuyết vì tôi đã sử dụng một phương pháp khác để giải quyết vấn đề nhưng nó chỉ có thể hoạt động.

Tôi đã có một <input type="button">thẻ ẩn từ xem. Những gì tôi đã làm là gắn "onClick"sự kiện này vào bất kỳ thành phần hữu hình nào thuộc bất kỳ loại nào, chẳng hạn như nhãn. Điều này đã được thực hiện bằng cách sử dụng Công cụ dành cho nhà phát triển của Google Chrome hoặc Firebird của Mozilla Firefox bằng cách sử dụng lệnh "chỉnh sửa HTML" nhấp chuột phải. Trong sự kiện này, chỉ định tập lệnh sau hoặc một cái gì đó tương tự:

Nếu bạn có JQuery:

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

nếu không:

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

Cảm ơn.

Hey giải pháp này hoạt động. để tải xuống, chúng ta nên sử dụng 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();      
       }
   });
};

Đối với AngularJS hoặc thậm chí cho javascript bình thường.

Điều này bây giờ sẽ có thể có trong Firefox 4, với lời cảnh báo rằng nó được tính là cửa sổ bật lên và do đó sẽ bị chặn bất cứ khi nào có cửa sổ bật lên.

Đây là giải pháp phù hợp với tôi: 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 với trợ giúp JQuery "nhỏ":

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

Chỉ cần chắc chắn rằng maskfied được bao phủ đầy đủ bởi trường tải lên thực sự.

Bạn có thể làm điều này theo câu trả lời từ hộp thoại Mở tệp trên thẻ <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>

Tôi thấy rằng nếu đầu vào (tệp) ở ngoài biểu mẫu, sau đó kích hoạt sự kiện nhấp vào gọi hộp thoại tệp.

Hy vọng rằng điều này sẽ giúp được ai đó - tôi đã dành 2 giờ đập đầu vào nó:

Trong IE8 hoặc IE9, nếu bạn kích hoạt mở đầu vào tệp bằng javascript theo bất kỳ cách nào (tin tôi đã thử tất cả), nó sẽ không cho phép bạn gửi biểu mẫu bằng javascript, nó sẽ chỉ âm thầm thất bại.

Gửi biểu mẫu qua nút gửi thông thường có thể hoạt động nhưng gọi form.submit (); sẽ âm thầm thất bại.

Tôi đã phải dùng đến lớp phủ nút chọn tệp của mình với đầu vào tệp trong suốt hoạt động.

Điều này làm việc cho tôi:

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

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

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

nó không phải là không thể:

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

Nhưng bằng cách nào đó nó chỉ hoạt động nếu đây là một chức năng được gọi thông qua một sự kiện nhấp chuột.

Vì vậy, bạn có thể có thiết lập sau:

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

Bạn có thể dùng

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