文件上傳值更改？

Question

當文件名（上傳文件）太長時，我想更改文件上傳值。例如，如果文件名是「This_file_has_a_long_name.txt」，我想用「This_file..name.txt」等有限字符顯示它。

所以我嘗試了以下，但它不工作。請指教。

$("#file_browser").change(function() 
{ 
    var filename = this.value; 
    filename = filename.substr(0,10); 
    alert(filename); 
    document.getElementById("file_browse").value = filename; 
}); 

Answer 1

試試這個：

注：如果名字的長度爲14和更大，改變它。

$(document).ready(function() { 
 
     
 
     $("#file_browser").change(function() { 
 
    
 
      var filename = $(this).val().replace(/C:\\fakepath\\/i, ''); 
 
      //Or for full path use, var filename = $(this).val(); 
 
      
 
      var len = filename.length; 
 
      
 
      if (len <= 13) { 
 
       
 
       $("#file_browse").text(filename); 
 
       
 
      } 
 
      
 
      else { 
 
       
 
       var part1 = filename.substr(0,5); 
 
       var part2 = filename.substr(len - 8); 
 
       $("#file_browse").text(part1 + "..." + part2); 
 
       
 
      } 
 
       
 
     }) 
 
     
 
})

<input type="file" id="file_browser"> 
 
<p id="file_browse"></p> 
 
     
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Answer 2

你不能在安全的JS原因更改屬性名稱normaly你將有 一個味精SecurityError: The operation is insecure.

如果你想要你做，你需要它的隱藏默認輸入文件css轉到谷歌，因爲你有tuto 並添加您的filname自定義在<p></p>爲例和地方你想要的地方

如果你真的需要改變名字做服務器端

好日子

Answer 3

你最好使用name屬性得到公正的文件名和隱藏的默認文件輸入，因爲你不能改變它的值。

$("#fileInput").change(function() { 
 
    if (this.files.length === 0) { 
 
    return; 
 
    } 
 
    
 
    var name = this.files[0].name; 
 
    
 
    if (name.length > 14) { 
 
    name = name.substr(0, 7) + "..." + name.substr(-7); 
 
    } 
 
    
 
    $("#fileNameText").text(name); 
 
}); 
 

 
$("#chooseButton").click(function() { 
 
    $("#fileInput").click(); 
 
});

<form> 
 
    <input type="file" id="fileInput" style="display: none" /> 
 
    <button type="button" id="chooseButton">Choose file</button> 
 
    <span id="fileNameText">Select a file</span> 
 
</form> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 4

的一些技巧是什麼。

JS

$("#file_browse").change(function() 
{ 
    var data = $(this).val(); 
    $(this).val(); 
    data = data.replace(/(.{1,10}).{1,}(.{6})/,"$1..$2"); 
    $("#file_browse").after("<div style='position:absolute; top:4px; margin-left:230px;'>"+data+"</div>"); 

}); 

的添加以下的CSS

input[type=file] 
{ 
     color:transparent; 
} 

調整邊距左和頂部位置。

將文件名存儲到變量data中。

然後通過使用$(this).val();來製作一個空字段所以你的輸入類型文件標籤中包含像No file choose這樣的東西，這是爲了避免你的輸入文件名太長意味着會出現滾動。

使用包含點的圖案替換。

然後使用div標籤寫入文件名。

不要忘了添加透明文件文本顏色的CSS。