Thi đua nhấp chuột tải lên tệp trong jQuery

Question

Tôi có thẻ <img ... /> mà tôi đã ràng buộc sự kiện nhấp chuột vào trong jQuery. Khi nó được nhấp vào Tôi muốn có nó mô phỏng các bấm vào một nút trên tập tin tải lên để mở hệ thống tập tin duyệt pop-up. Tôi đã thử những điều này trong chức năng nhấp chuột và không thành công:

... 
$(".hiddenUploadBtn").click(); 
... 

... 
$(".hiddenUploadBtn").select(); 
... 

... 
$(".hiddenUploadBtn").submit(); 
... 

Answer 1

Chỉ cần quấn img trong nhãn và thiết lập cho các thuộc tính vào đầu vào của tệp. Làm việc cho bất kỳ loại nội dung và nó được xây dựng vào spec. Bạn thậm chí có thể ẩn đầu vào của tệp tại thời điểm đó.

<input type="file" id="fileUpload"><br> 
<label for="fileUpload"> 
    <img src="https://www.google.com/images/srpr/logo11w.png" /> 
</label> 

Answer 2

Thông số nói rằng nó được cho là hoạt động và trên Chrome. Tuy nhiên, Firefox và các trình duyệt phổ biến khác không tuân theo các quy tắc, vì vậy bạn là SOL.

Answer 3

này làm việc cho tôi

<input name="picture" type="file" onchange="alert(this.value)" class="file" size=20/> 

cho nút sử dụng tải lên như hình ảnh thử này

<style> 
div.fileinputs {position:relative; display:inline;} 
div.fakefile {position:absolute; top:0px; left:0px; z-index:1;} 
input.file {position:relative; text-align:right; -moz-opacity:0; filter:alpha(opacity: 0); opacity: 0; z-index:2;} 
<style> 

<div class="fileinputs"> 
    <input name="picture" type="file" onchange="alert(this.value)" class="file" size=1/> 
    <div class="fakefile"> 
    <img src="images/browse.gif" align="middle" alt="browse" title="browse"/> 
    </div> 
</div> 

nên trường nhập ẩn, và khi u bấm hình ảnh - hộp thoại lựa chọn xuất hiện, nhưng bắt chước hộp thoại này từ js imposible, yep. Nhưng bạn cũng có thể viết các plugin/hack cho trình duyệt)

Answer 4

Hãy thử này chỉ sử dụng javascript: http://code.google.com/p/upload-at-click/

Demo: http://upload-at-click.narod.ru/demo2.html