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>

该操作在 onchange 文件时发生。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);

这在 mozila 中运行良好。但不是铬。在 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 回答