ファイルのアップロード値が変更されましたか？

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

あなたは、あなたがデフォルトを非表示にするのが必要であることを行いたい場合はnormalyあなたは MSG SecurityError: The operation is insecure.

を持つことになり、セキュリティのjsの原因にプロパティ名を変更傾けます入力ファイルのCSSはあなたのためにgoogleに行く と例文のために<p></p>のあなたのfilnameのカスタムを追加し、あなたが欲しい場所に

あなたは本当にあなたがその値を変更することはできませんので

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を追加するのを忘れてはいけません。