web-dev-qa-db-ja.com

Filereader-同じファイルを再度アップロードしても機能しない

私は描画アプリのようなsthがあります。ユーザーはプロジェクトを保存してロードできます。 1つのファイル（たとえば、project1.leds）を初めてロードするとき、アプリにいくつかの変更を加えますが、保存せず、同じファイル（project1.leds）を再度ロードしても何も起こりません。同じファイルを複数回ロードできません。別のファイルを読み込んだ場合、それは機能しています。

コード：

$("#menu-open-file").change(function(e){
    var data=[];

    var file = null;
    file = e.target.files[0];
    console.log(file)
    var reader = new FileReader();
        reader.onload = function(e){
            data=JSON.parse(reader.result);
            x=data[0].SIZE[0];
            y=data[0].SIZE[1];
            if(x==15) x=16;
            if(x==30) x=32;
            if(x==60) x=64;
            if(y==15) y=16;
            if(y==30) y=32;
            if(y==60) y=64;
            createLeds(x,y,data,false,false);
            clearActiveTools();
            var svg = $('#contener').find('svg')[0];
                svg.setAttribute('viewBox','0 0 ' + x*20 + ' ' + y*20);
            $("#contener").css("width",x*20).css("height",y*20);
            $("#contener").resizable({
                aspectRatio: x/y,
                minHeight: 200,
                minWidth: 200,
            });
            wiFirst = $("#contener").width();
            hiFirst = $("#contener").height();
        }
        reader.readAsText(file);
});

キャッシュされたファイルを削除/削除できますか？ブラウザにキャッシュされていますか？

javascriptjqueryfilefilereader
25
sko

これは、関数onchangeを呼び出しているためです。同じファイルをアップロードする場合、ファイル入力の値は前回のアップロードから変更されていないため、トリガーされません。これは、別のファイルをアップロードした場合に機能する理由も説明しています。キャッシュをクリアする必要はありません。ファイルを読み取った後に入力フィールドの値をリセットすることで、これを回避できます。

$("#menu-open-file").change(function(e){
    var data=[];

    var file = null;
    file = e.target.files[0];
    if(file !== ''){
      console.log(file)
      var reader = new FileReader();
      reader.onload = function(e){
            data=JSON.parse(reader.result);
            x=data[0].SIZE[0];
            y=data[0].SIZE[1];
            if(x==15) x=16;
            if(x==30) x=32;
            if(x==60) x=64;
            if(y==15) y=16;
            if(y==30) y=32;
            if(y==60) y=64;
            createLeds(x,y,data,false,false);
            clearActiveTools();
            var svg = $('#contener').find('svg')[0];
                svg.setAttribute('viewBox','0 0 ' + x*20 + ' ' + y*20);
            $("#contener").css("width",x*20).css("height",y*20);
            $("#contener").resizable({
                aspectRatio: x/y,
                minHeight: 200,
                minWidth: 200,
            });
            wiFirst = $("#contener").width();
            hiFirst = $("#contener").height();
        }
        reader.readAsText(file);
        $("#menu-open-file")[0].value = '';
  }
});
52
OldGreg

以下のコードを試してみてください。うまくいくはずです。アップロードボタンをクリックしている間、既存の値をクリアします。

$("#menu-open-file").click(function(e){ 
  $('#menu-open-file').val(''); 
}
2
Reshma

入力は同じファイル値をキャッシュしているため、同じファイルを再度ロードすると、キャッシュは値プロパティの読み取りに使用されます。入力要素を使用するときに条件文を設定し、入力の値プロパティを空の文字列に設定するだけで動作します。

input.value = "";

イベントハンドラーを使用している場合

e.target.value = "";
0
itsCodingThing

上記の回答の唯一の問題は、アップロード後にHTMLにファイル名が表示されなくなることです。代わりに、「ファイルが選択されていません」と表示され続け、ユーザーを混乱させる可能性があります。

これを回避するには、次のように入力を非表示にして、入力の表示を複製するラベルに置き換えます。

HTML：

<input type="file" id="myFileInput" />
<label id="myFileLabel" for="myFileInput">Choose file</label><span id="myFileName">No file chosen</span>

CSS：

#myFileInput {
    display: none;
}
#myFileLabel {
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    margin-top: 5px;        
    padding-left: 6px;
    padding-right: 6px;
}
#myFileName {
    margin-left: 5px;
}

JavaScript：

var file = null
file = e.target.files[0];

//variable to get the name of the uploaded file
var fileName = file.name;
//replace "No file chosen" with the new file name
$('#myFileName').html(fileName);

ここでこれを行う方法についてよく説明された記事： https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

0
Harry Stevens