admin管理员组

文章数量:1356788

I have a form containing an input file field [<input type="file" id="select-file" accept=".md"><label for="select-file">Select import file</label>]. It has defined a jQuery handler for the change event [$("#form").on("change", "#select-file", handler)] to fire as soon as I selected a file.

It works flawlessly on Linux with Firefox at work and at home with Windows using Firefox and Chrome.

Instead at work with Windows using Chrome or Firefox, the browser freeze for about 8 sec after selecting the file. Only after this hiatus I can push other buttons on the form and the "change" event fires.

Discarding the hypothesis that Windows and work does not mesh, the freeze seems related to the different network disks available at work. Can anyone suggest what I have to check and hopefully a way to avoid the freeze? Thanks!

Small example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>File Select</title>
    <script src=".2.4.min.js"></script>
</head>
<body>
<div id="import-form">
    <input type="file" id="select-file" accept=".md">
    <label for="select-file">Select a file</label>
    <p id="selected-file">No file selected</p>
</div>
<script>
$("#import-form").on("change", "#select-file", function(e) {
    $("#selected-file").text(e.target.value.split('\\').pop());
});
</script>
</body>
</html>

I have a form containing an input file field [<input type="file" id="select-file" accept=".md"><label for="select-file">Select import file</label>]. It has defined a jQuery handler for the change event [$("#form").on("change", "#select-file", handler)] to fire as soon as I selected a file.

It works flawlessly on Linux with Firefox at work and at home with Windows using Firefox and Chrome.

Instead at work with Windows using Chrome or Firefox, the browser freeze for about 8 sec after selecting the file. Only after this hiatus I can push other buttons on the form and the "change" event fires.

Discarding the hypothesis that Windows and work does not mesh, the freeze seems related to the different network disks available at work. Can anyone suggest what I have to check and hopefully a way to avoid the freeze? Thanks!

Small example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>File Select</title>
    <script src="https://code.jquery./jquery-2.2.4.min.js"></script>
</head>
<body>
<div id="import-form">
    <input type="file" id="select-file" accept=".md">
    <label for="select-file">Select a file</label>
    <p id="selected-file">No file selected</p>
</div>
<script>
$("#import-form").on("change", "#select-file", function(e) {
    $("#selected-file").text(e.target.value.split('\\').pop());
});
</script>
</body>
</html>
  • javascript
  • jquery
  • performance
  • google-chrome
  • firefox
Share Improve this question edited Oct 12, 2016 at 7:18 SiliconValley asked Oct 12, 2016 at 3:36 SiliconValleySiliconValley 1,7901 gold badge19 silver badges41 bronze badges 10
  • 1 What is the .size of the selected File ? – guest271314 Commented Oct 12, 2016 at 3:43
  • 2 No style at all. It happens even with a barebone element (I'll add a short example to my question) – SiliconValley Commented Oct 12, 2016 at 7:13
  • 6 Still nowadays I am haunted by this problem. Sometimes the change callback is hit immediately after choosing the file. Other times it takes up to 5 seconds. If I click anywhere on the browser's window, I hear the windows chime. Facebook file uploader works perfectly, though... – StinkyCat Commented Mar 27, 2018 at 11:17
  • 3 Could not describe this bug better than @StinkyCat. Same in Chrome 66 and Firefox 60. Surprisingly enough, no problem with Internet Explorer 11. (All tested with small text files on my Windows 7.) – LePatay Commented May 23, 2018 at 14:46
  • 2 For anyone ends up here: this is still an issue in 2021. I can confirm it has nothing to do with JS or selected file. Creating an HTML file with nothing but <input type="file"> and canceling after clicking the button still causes the same issue. Reproducible in IE, Firefox and Chrome. Not reproducible in Edge browser. – previous_developer Commented Mar 10, 2021 at 13:18
 |  Show 5 more ments

2 Answers 2

Reset to default 6

Chrome freezes for few seconds when after any use of file field.

It was because I had a shortcut in "Quick Access" menu in windows explorer. This shortcut has been linked with a folder shared by network. I've removed this shortcut and everything is good now.

We have to use backticks within the parenthesis where you are using $. Applying single quote can lead to problem as well.

本文标签： javascriptBrowser freezing after selecting file in input fieldStack Overflow

版权声明：本文标题：javascript - Browser freezing after selecting file in input field - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743991482a2572223.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。