javascript 选择并打开文件后的输入类型文件事件

jv4diomz  于 2023-01-29  发布在  Java
关注(0)|答案(4)|浏览(118)

我有这个HTML代码:

<input type="file" id="mysignature_upload" onChange="readURL();"/>

Javascript代码:

function readURL(){
  alert("Hello");
}

这段代码的问题是,函数readURL只在你选择不同的文件时被调用,但是如果你一次又一次地选择同一个文件,readURL就不能被执行。我想知道当你选择并打开一个文件时,是否会有一个事件被触发,即使你选择的文件和之前选择的文件是一样的。
小提琴在这里:http://jsfiddle.net/vhevhangvhakhikhang/78zcp5u7/

x8goxv8g

x8goxv8g1#

我希望它能满足您的要求:fiddle exapmle

<input type="file" id="mysignature_upload"/>

    $("#mysignature_upload").click(function (event) {
         $("#mysignature_upload").val("");
    });

    $("#mysignature_upload").on('change',function (event) {
        alert("selected file: " + $("#mysignature_upload").val());
    });
z18hc3ub

z18hc3ub2#

<script>
    $(document).ready(function({
      $("#mysignature_upload").click(function(event){
         event.preventDefault();
         $(this).val("");
      });
    });
</script>
ix0qys7i

ix0qys7i3#

顾名思义,onchange只有在字段值改变时才会被触发,如果每次用户选择文件时都需要做一些事情,那么您可以在click事件中重置字段值。

$("#mysignature_upload").click(function() {
  // clear the value
  $(this).val("");
 }
}

现在onchange每次都会被触发。

gk7wooem

gk7wooem4#

当选择大文件时,在文件对话框中单击“打开”和(类型文件)输入值更新之间有一个明显的延迟。虽然我使用以下两个事件来显示和隐藏“请等待”对话框,但您也可以在这些事件中“做其他事情”:

// Fires upon click of the file input ('Choose File' button)
    $('#selectedFile').on('click', function (event) {
        // Shows before file selection dialog and remains behind
        // the file selection dialog (which has a higher z-order)
        ShowPleaseWait();
    });

    // Fires the moment that the file input value itself is updated.
    // NOTE: This is NOT when the Open button is clicked ... this
    // is when the value of the file input actually updates (there is
    // a delay after clicking Open for a large file until the value
    // of the input actually, finally, updates...)
    $('#selectedFile').on('change', function (event) {
        HidePleaseWait();
    });

相关问题