tùy chỉnh nút tệp để tải lên hình ảnh

Tôi được đặt một nút để tải lên tệp hình ảnh. Tôi muốn tùy chỉnh nút đó, tôi muốn thêm nhiều tệp hình ảnh, logic là gì để đạt được.tùy chỉnh nút tệp để tải lên hình ảnh

<input type="file" />,this is rendering a choose button with a text saying `no files choosen` in the same line.

Có thể tùy chỉnh các văn bản "no files choosen" bên dưới choose button.Meanwile i khôn ngoan để giữ một hình ảnh camera trước khi văn bản no files choosen.

Cách thực hiện điều này để cải thiện trang web của tôi.

Cảm ơn

Nguồn

2013-04-18 Anonymous

Các bài tương tự http://stackoverflow.com/questions/6461252/custom-upload-button – zavg

Bạn có thể ẩn các đầu vào bằng đặt nó vào một div là height:0px và overwflow:hidden. Bạn sẽ thêm một nút hoặc một phần tử html khác mà bạn có thể tạo kiểu theo ý muốn. Trong sự kiện onclick bạn có được những lĩnh vực đầu vào sử dụng javascript hoặc jQuery và nhấp vào nó:

<div style="height:0px;overflow:hidden"> 
    <input type="file" id="fileInput" name="fileInput" /> 
</div> 
<button type="button" onclick="chooseFile();">choose file</button> 

<script> 
    function chooseFile() { 
     $("#fileInput").click(); 
    } 
</script>

Bây giờ đầu vào được ẩn, nhưng bạn có thể tạo kiểu nút như bạn muốn, nó sẽ luôn luôn mở file đầu vào nhấp chuột.

Nếu bạn không muốn sử dụng jQuery thay thế các thẻ script với thẻ script này:

<script> 
    function chooseFile() { 
     document.getElementById("fileInput").click(); 
    } 
</script>

Nguồn

2013-04-18 10:48:50

Hi sir, tôi đã kiểm tra nó với jsfiddle, nó không phải là lấy tập tin đầu vào. nút tập tin bất kỳ là không làm bất cứ điều gì –

Có, bởi vì bạn phải thêm liên kết đến thứ e jQuery js-files. –

Và bạn phải đặt javascript trong một thẻ script vào bảng điều khiển html, nhưng tôi không biết tại sao ... Trên thử nó biên tập từ w3schools nó dĩa tốt. –

Hãy thử giải pháp được điều khiển này. (Tôi đã thử nó ngay hôm nay để một trong những dự án của tôi :))

HTML

<div class="choose_file"> 
     <span>Choose File</span> 
     <input name="Select File" type="file" /> 
    </div>

CSS

.choose_file{ 
    position:relative; 
    display:inline-block;  
    border-radius:8px; 
    border:#ebebeb solid 1px; 
    width:250px; 
    padding: 4px 6px 4px 8px; 
    font: normal 14px Myriad Pro, Verdana, Geneva, sans-serif; 
    color: #7f7f7f; 
    margin-top: 2px; 
    background:white 
} 
.choose_file input[type="file"]{ 
    -webkit-appearance:none; 
    position:absolute; 
    top:0; left:0; 
    opacity:0; 
}

DEMO

Nguồn

2013-04-18 10:37:41 Sowmya

Nó không hiển thị các tập tin được lựa chọn tên – msa7

Bạn có thể tùy chỉnh nó chỉ sử dụng CSS. Đi qua liên kết bên dưới.

HTML

<label class="btn-upload"> 
    <input type="file" name="fileupload"> 
    <button class="btn">Browse</button> 
</label> 

.btn-upload { 
    position: relative; 
    overflow: hidden; 
    display: inline-block; 
} 
.btn-upload input[type=file] { 
    position: absolute; 
    opacity: 0; 
    z-index: 0; 
    max-width: 100%; 
    height: 100%; 
    display: block; 
} 
.btn-upload .btn{ 
    padding: 8px 20px; 
    background: #337ab7; 
    border: 1px solid #2e6da4; 
    color: #fff; 
    border: 0; 
} 
.btn-upload:hover .btn{ 
    padding: 8px 20px; 
    background: #2e6da4; 
    color: #fff; 
    border: 0; 
}

http://imdebasispanda.blogspot.in/2015/08/custom-upload-button-using-css.html

Nguồn

2015-08-15 19:29:43

<body> 

    <style> 
    .image{ 
    position:relative; 
    display:inline-block;  
    width:3%; 
    padding: 0%; 
    } 
.image input[type="file"]{ 
-webkit-appearance:none; 
position:absolute; 
    top:0; left:0; 
    opacity:0; 
    } 
    </style> 

    <div class="image"> 
    <span><img src='admin/ico/fms.ico' class "image"></span> 
    <input name="image" type="file" /> 
    </div> 
</body>

Nguồn

2017-02-12 15:46:40

Vui lòng thêm một số văn bản _how_ này trả lời câu hỏi. – Zeta

mã này hoạt động tốt hơn khi bạn muốn sử dụng hình ảnh làm nút tải lên. chỉ cần thay thế hình ảnh của tôi bằng hình ảnh của bạn và nó sẽ hoạt động –

Vui lòng chỉnh sửa thông tin bổ sung vào câu trả lời của bạn. Nhận xét có thể bị xóa và nội dung của chúng có thể bị mất. – Zeta

tùy chỉnh nút tệp để tải lên hình ảnh

Trả lời

Các vấn đề liên quan