Làm thế nào để ẩn lĩnh vực văn bản trong Html tập tin Tải

Question

Tôi đang tự hỏi làm thế nào để che giấu phần lĩnh vực văn bản của một tập tin html tiêu chuẩn thẻ upload

ví dụ

<input type="file" name="somename" size="chars"> 

này tạo ra rõ ràng là một trường văn bản và tiếp theo đến trường đó là nút duyệt ... Tôi muốn ẩn phần trường văn bản nhưng giữ nút.

Answer 1

Tôi khuyên bạn nên ẩn toàn bộ nội dung và đặt đối tượng nút riêng biệt, khi được nhấp, sẽ kết thúc bằng cách nhấp vào nút duyệt của đầu vào.

Bạn có thể làm điều này với CSS và javascript - check out this article (thực sự là lần thứ hai tôi đã sử dụng tham chiếu này hôm nay).

Answer 2

Bạn có thể đặt hình ảnh làm nền cho nút. Điều đó làm việc cho tôi, một thời gian trước đây.

Answer 3

Nút nhập file cực kỳ khó để tạo kiểu và thao tác, chủ yếu vì lý do bảo mật.

Nếu bạn thực sự cần tùy chỉnh nút tải lên, tôi khuyên bạn nên tải lên dựa trên Flash như SWFUpload hoặc Uploadify cho phép bạn sử dụng nút hình ảnh tùy chỉnh, hiển thị thanh tiến trình và các thứ khác.

Tuy nhiên, triết lý cơ bản của nó khác với việc chỉ nhúng điều khiển vào biểu mẫu. Quá trình tải lên diễn ra riêng biệt. Hãy chắc chắn rằng bạn kiểm tra đầu tiên cho dù điều này làm việc cho bạn.

Answer 4

input[type="file"] { outline: none; cursor: pointer; position: absolute; top:0; clip: rect(0 265px 22px 155px); } /* Hide input field */ 
@-moz-document url-prefix() 
    { 
    input[type="file"] { clip: rect(0, 265px, 22px, 125px); } /* Mozilla */ 
    } 
* > /**/ input[type="file"], x:-webkit-any-link { clip: rect(0, 86px, 22px, 0); } /* Webkit */ 

Điều này sẽ thực hiện tương tự mà không cần JavaScript, nhưng yêu cầu định vị tuyệt đối để sử dụng thuộc tính clip.

Tài liệu tham khảo

• Custom Upload Button
• CSS Wikibook: Clipping

Answer 5

Điều này chắc chắn sẽ làm việc tôi đã sử dụng nó trong projects.I tôi hy vọng điều này sẽ giúp :)

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

Answer 6

DEMO

css tinh khiết và html

Bí quyết là sử dụng một nút phía trên nút tập tin đầu vào.

Thêm vào đó, bạn nên đặt

filter: alpha(opacity=0); 

đến tập tin đầu vào.

Answer 7

Bạn có thể ẩn toàn bộ phần tử và hiển thị nút hoặc liên kết để thay thế. Điều này khá dễ dàng.

<input type="file" name="file" id="fileupload" style="width:200px; display:none;" onchange="submitmyform();" /> 
<input type="button" value="Select an Image" onclick="$('#fileupload').click();" /> 

Phần tử tải lên tệp bị ẩn.Nút sẽ kích hoạt sự kiện nhấp và hiển thị cửa sổ trình duyệt tệp. Khi chọn một tệp, sự kiện thay đổi được kích hoạt và điều này có thể gửi biểu mẫu hoặc gọi hàm kịch bản, bất kể cái gì.

Hope this helps ...

Answer 8

Cách đơn giản nhất là không được đề cập trong bất kỳ câu trả lời sẽ được sử dụng một label cho input.

<input type="file" name="myFile" id="myFile"> 
<label for="myFile">Choose your file</label> 

input[type="file"] { display: none; } 

Sử dụng label sẽ hữu ích vì nhấp vào nhãn đang nhấp vào đầu vào. Điều này sẽ chỉ hoạt động khi đầu vào id bằng thuộc tính for của nhãn.

Answer 9

Nếu bạn đang sử dụng jQuery, có một cái nhìn tại plugin này - https://github.com/ajaxray/bootstrap-file-field

Nó sẽ hiển thị trường tập tin đầu vào như một nút bootstrap và sẽ hiển thị tên tập tin được lựa chọn đẹp mắt. Ngoài ra, bạn có thể đặt các hạn chế khác nhau bằng cách sử dụng các thuộc tính hoặc cài đặt dữ liệu đơn giản trong js.
e, g, data-file-types="image/jpeg,image/png" sẽ hạn chế chọn loại tệp ngoại trừ hình ảnh jpg và png.

Answer 10

Hãy thử thêm css này để đầu vào của bạn

font-size: 0;