使用標籤來選擇圖像文件，但有屬性顯示輸入

我期待有標籤用於選擇的項目（所以選擇文件）消失了。使用標籤來選擇圖像文件，但有屬性顯示輸入

這裏是我的HTML：

<div class="form-group"> 
    <label class="btn btn-primary trigger" for="broker_image">Upload Image</label> 
    <input style="display:none;" class="uploadBtn" type="file" name="broker[image]" id="broker_image"> 
</div>

它的工作，雖然我沒有像真正具有顯示的名稱（這是輸入標籤的一部分）

這裏是JS來儘量使之出現（這是100％可編輯）：

document.getElementsByClassName("trigger").onClick = function() { 
    document.getElementsByClassName("uploadFile").style.display = 'block'; 
    document.getElementsByClassName("uploadFile").value = this.value; 
};

嘗試：

document.getElementsByClassName("trigger").onClick = function() { 
    document.getElementsByClassName("uploadFile")[0].style.display = 'block'; 
    document.getElementsByClassName("uploadFile")[0].value = this.value; 
};

沒有運氣。

的jsfiddle： http://jsfiddle.net/07zw6h3q/

我迷失在對剛纔的文件名顯示，如果沒有一些瘋狂的javascript添加的東西簡單。使用Rails 4.2和Bootstrap。

來源

2015-09-01 Cameron Aziz

'uploadFile'在哪裏？和'document.getElementsByClassName（）'返回給你一個集合，所以你需要迭代使用索引，即'document.getElementsByClassName（「uploadFile」）[0] .style' – Satpal

更新JS小提琴，仍然沒有運氣。 –

您需要使用change事件。

$('.uploadBtn').change(function(){ 
 
    var a = $(this).val().split('\\'); 
 
    $('.trigger').html(a[a.length - 1]); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <label class="btn btn-primary trigger" for="broker_image">Upload Image</label> 
 
    <input style="display:none;" class="uploadBtn" type="file" name="broker[image]" id="broker_image"> 
 
</div>

您也可以顯示文件的預覽（如果它是球場的圖像）Preview an image before it is uploaded

來源

2015-09-01 07:58:42

JSFiddle

HTML

<div class="form-group"> 
    <label class="btn btn-primary trigger" for="broker_image" style="border : solid 1px lightgrey; padding : 5px">Upload Image</label> 
    <input style="display:none"; class="uploadBtn" type="file" name="broker[image]" id="broker_image" /> 
    <label id="broker_image_name">no selected file</label> 
</div>

的JavaScript

var upload_button = document.getElementById("broker_image"); 

upload_button.addEventListener("change", function() { 
    var file_name = upload_button.value; 

    /* 
     the file come like this : C:\fakepath\file.htm 
     so we only need the file name 
    */ 
    file_name = file_name.split("\\"); // preventing \ to be escaped himself 
    var file_name_length = file_name.length; 

    file_name = file_name[file_name_length - 1]; 

    var broker_image_name = document.getElementById("broker_image_name"); 

    broker_image_name.innerHTML = file_name; 
});

我使用的事件change更改文件名，這是一個額外的標籤，我把你的按鈕之後（我程式化一個位的方式），並與該更新文件名。

您會看到文件名值的註釋部分，因爲當用戶選擇一個文件名後獲取文件名時，它會附帶模式C:\fakepath\myFile.htm，因此我只通過分割字符串來提取文件。

來源

2015-09-01 08:17:57

使用標籤來選擇圖像文件，但有屬性顯示輸入

回答

相關問題