1. ホーム
  2. 質問と答え
  3. 入力タイプ= "ファイル"、クロムキャンセルをクリックした後にファイルをクリアする

入力タイプ= "ファイル"、クロムキャンセルをクリックした後にファイルをクリアする

2013-07-22 9 views
6

<input type="file"/>クロムの「ファイルを選択」モーダルウィンドウでキャンセルをクリックした後、ファイルとパスがクリアされ、キャンセルされた後もIEファイルは変更されません。クロームでこの動作を変更する方法はありますか？入力タイプ= "ファイル"、クロムキャンセルをクリックした後にファイルをクリアする

出典

2013-07-22 Powerslave

+0

フィドルを作成して、正確に何を表示できますか？ありがとう:) – GFP

答えて

0

これはボタンcancelがクリックされたときにも、検出することはできませんあなたの質問への答えである：クロームは削除することはできませんように、ここで

How to detect when cancel is clicked on file input?

出典

2013-07-22 23:31:47

+1

セキュリティ上の理由から不可能です、あなたはjsファイル入力の値を設定することはできません – Powerslave

0

https://jsfiddle.net/dqL97q0b/1/

は、周りの仕事ですキャンセルが押されたときのユーザーの既存ファイル。

コードノート： 既にファイルが選択されている場合、ユーザーがファイル選択を開くと、これによりDomエレメントのクローンが作成されます。 次に、ユーザーがクロムでキャンセルをクリックすると、変更イベントリスナーが発生し、その値が ""になるため、その特定のケースでは空のファイルチューザを削除してクローンを復元します。

注：各ファイル選択ツールのDomエレメントには固有のIDが必要です。そのため、クローンを適切に格納および検索できるようになります。

注：コードのほとんどは、物事がどのように動作するかを示すために、ログインしている、特に私は、このような、その後のonclick =「fileClicked（イベント）」としてあなたはDOM要素にインラインイベントリスナーを使用している場合ことを強調するために望んでいましたイベントリスナーをクローンに再接続する必要はありません。 

<!doctype html><html><head></head><body> 
 

 
<h2>Fix for Chrome Removing File when 'cancel' clicked</h2> 
 

 
Upload Image: <input id="imageUpload" type="file" onclick="fileClicked(event)" onchange="fileChanged(event)"> 
 
<br/><br/> 
 
<label for="videoUpload">Upload Video:</label> <input id="videoUpload" type="file" onclick="fileClicked(event)" onchange="fileChanged(event)"> 
 
<br/><br/> 
 
<div id="log"></div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script> 
 
    //This is All Just For Logging: 
 
    var debug = true;//true: add debug logs when cloning 
 
    var evenMoreListeners = true;//demonstrat re-attaching javascript Event Listeners (Inline Event Listeners don't need to be re-attached) 
 
    if (evenMoreListeners) { 
 
     var allFleChoosers = $("input[type='file']"); 
 
     addEventListenersTo(allFleChoosers); 
 
     function addEventListenersTo(fileChooser) { 
 
      fileChooser.change(function (event) { console.log("file(#" + event.target.id + ") : " + event.target.value.split("\\").pop()) }); 
 
      fileChooser.click(function (event) { console.log("open(#" + event.target.id + ")") }); 
 
     } 
 
    } 
 

 
    var clone = {}; 
 

 
    // FileClicked() 
 
    function fileClicked(event) { 
 
     var fileElement = event.target; 
 
     if (fileElement.value != "") { 
 
      if (debug) { console.log("Clone(#" + fileElement.id + ") : " + fileElement.value.split("\\").pop()) } 
 
      clone[fileElement.id] = $(fileElement).clone(); //'Saving Clone' 
 
     } 
 
     //What ever else you want to do when File Chooser Clicked 
 
    } 
 

 
    // FileChanged() 
 
    function fileChanged(event) { 
 
     var fileElement = event.target; 
 
     if (fileElement.value == "") { 
 
      if (debug) { console.log("Restore(#" + fileElement.id + ") : " + clone[fileElement.id].val().split("\\").pop()) } 
 
      clone[fileElement.id].insertBefore(fileElement); //'Restoring Clone' 
 
      $(fileElement).remove(); //'Removing Original' 
 
      if (evenMoreListeners) { addEventListenersTo(clone[fileElement.id]) }//If Needed Re-attach additional Event Listeners 
 
     } 
 
     //What ever else you want to do when File Chooser Changed 
 
    } 
 
    </script> 
 
</body></html>

https://jsfiddle.net/dqL97q0b/1/

出典

2017-09-14 15:47:07

0

シンプルで効果的なソリューション：変数内のファイルへの参照を保持します。入力の変更イベントは、あなたがチェック発射されるたびに：

if(input.files[0]) // truthy, falsey 
{ 
    var file = input.files[0]; 
}

のでfile最新の選択したファイルが含まれていますし、ユーザーがダイアログを開きますが、ファイルの参照を相殺するときに変更し、まだ以前に含まれることはありません選択されたファイル。

出典

2018-03-08 08:59:34

関連する問題

 関連する問題