0

コンテンツをアップロードするためのモジュールを作成しました。それは基本的にファイルAPIによって行われます。

htmlコードは 

    <input type="file" id="filepicker-input" multiple="true" style="display:none;"/>  
    <div class="addfile_btndiv" id="addfile_btndiv">
    <span id="direct-upload-text"><input name=""  class="add_filebtn" type="button" value="Add Files" /></span>
    </div>
    <div id="dropped-files">

    </div>

    <div class="clear"></div>
    </div>

この操作は、ファイルの変更時に実行されます。jsコードは

 var fileInput  = document.getElementById("filepicker-input");
 document.getElementById("direct-upload-text").onclick = function(e){
    fileInput.click();
 }
 fileInput.onchange = function(e) {

//basically same as in ondrop
    $("#dropped-files").html("");

    var files = e.target.files;

    var type            = 'zip';
    var location_block  = 1;
    var check = createPreviewElements(files, type, location_block);

    if(check){

        //add an onclick property to the upload button, this will trigger the main upload process
        var uploadButton    = document.getElementById('upload_button_zip_1');

        uploadButton.onclick = function(e){
            var block   = document.getElementById("current_block");
            block.value = location_block;
            uploadButton.onclick = null; //disable the onclick event once it happened
            document.getElementById('loading_wrapper').style.display = 'inline';
            setTimeout(function(){$('#loading_wrapper').fadeOut()}, 6000);  //fade out loader after 2 sec
            startupload(files, type, location_block);
        };
    }


}

アップロードは完全に機能しています。私の問題は、このアップロードにキャンセル ボタンがあることです。私はこれをいくつかのJavaScriptコードで管理しましたが、ユーザーが同じファイルを再選択できるようになった後、「onchange」はトリガーされません。そのため、キャンセル ボタンに新しいロジックを追加して、現在の入力タイプを削除し、新しい入力タイプを配置します。コードは

            $('#filepicker-input').attr("id", "newID");
    var foo     = document.getElementById("blk_switchbox1");
    var olddiv  = document.getElementById("newID");
    foo.removeChild(olddiv);
    var element = document.createElement("input");

    element.setAttribute("type", "file");
    element.setAttribute("id", "filepicker-input");
    element.setAttribute("class", "nodisplay");


    foo.appendChild(element);

これはmozillaでうまくいきます。クロムではありません。chrome では、dom 要素にキャッシングが存在します。私を助けてください

4

1 に答える 1

0

変更イベントを手動でトリガーしようとしましたか? クリックイベントではなく？

document.getElementById("direct-upload-text").onclick = function(e){
    if(fileInput.value != '') {
        fileInput.change();
    } else {
        fileInput.click();
    }
}
于 2013-02-11T09:22:08.750 に答える