文件上传不起作用，但在 Codepen 中很好

Question

我正在实现这个我为文件上传功能找到的代码笔。它在 codepen 上运行良好，但是当我将它实际放入我自己的 html/css/js 设置中时，文件不会上传。选择文件后，我没有显示文件名。 这是codepen的代码：

HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<div class="file-upload">
  <div class="file-select">
    <div class="file-select-button" id="fileName">Choose File</div>
    <div class="file-select-name" id="noFile">No file chosen...</div> 
    <input type="file" name="chooseFile" id="chooseFile">
  </div>
</div>

CSS
body
{
    background-color: black;
}
.file-upload
{
  width: 400px;
    display: block;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    text-align: center;
}
.file-upload .file-select
{
    background: #FFFFFF;
    border: 2px solid #dce4ec;
    color: #34495e;
    cursor: pointer;
    display: block;
    height: 40px;
    line-height: 40px;
    overflow: hidden;
    position: relative;
    text-align: left;
}
.file-upload .file-select .file-select-button
{
    background: #dce4ec;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
}
.file-upload .file-select .file-select-name
{
    display: inline-block;
    line-height: 40px;
    padding: 0 10px;
}
.file-upload .file-select:hover
{
    border-color: #34495e;
    moz-transition: all .2s ease-in-out;
    o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    webkit-transition: all .2s ease-in-out;
}
.file-upload .file-select:hover .file-select-button
{
    background: #34495e;
    color: #FFFFFF;
    moz-transition: all .2s ease-in-out;
    o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    webkit-transition: all .2s ease-in-out;
}
.file-upload.active .file-select
{
    border-color: #3fa46a;
    moz-transition: all .2s ease-in-out;
    o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    webkit-transition: all .2s ease-in-out;
}
.file-upload.active .file-select .file-select-button
{
    background: #3fa46a;
    color: #FFFFFF;
    moz-transition: all .2s ease-in-out;
    o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    webkit-transition: all .2s ease-in-out;
}
.file-upload .file-select input[type=file]
{
    cursor: pointer;
    filter: alpha(opacity=0);
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 100;
}
.file-upload .file-select.file-select-disabled
{
    opacity: 0.65;
}
.file-upload .file-select.file-select-disabled:hover
{
    background: #FFFFFF;
    border: 2px solid #dce4ec;
    color: #34495e;
    cursor: default;
    cursor: pointer;
    display: block;
    height: 40px;
    line-height: 40px;
    margin-top: 5px;
    overflow: hidden;
    position: relative;
    text-align: left;
}
.file-upload .file-select.file-select-disabled:hover .file-select-button
{
    background: #dce4ec;
    color: #666666;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
}
.file-upload .file-select.file-select-disabled:hover .file-select-name
{
    display: inline-block;
    line-height: 40px;
    padding: 0 10px;
}

JS
$('#chooseFile').bind('change', function () {
  var filename = $("#chooseFile").val();
  if (/^\s*$/.test(filename)) {
    $(".file-upload").removeClass('active');
    $("#noFile").text("No file chosen..."); 
  }
  else {
    $(".file-upload").addClass('active');
    $("#noFile").text(filename.replace("C:\\fakepath\\", "")); 
  }
});

我已将完全相同的代码粘贴到我的 html 中，并尝试在头部和正文中链接 javascript。还尝试将 jquery cdn 放在头部和身体中。没有成功。

任何帮助将不胜感激。谢谢。

******更新****** 谢谢你们的建议。我实际上在关闭 CSS 的情况下尝试了它，它工作正常，这告诉我它与 JS 无关。那么接下来的问题是，这个 CSS 阻止它显示上传的文件的原因是什么？

Answer 1

您可以在浏览器中打开 JavaScript 工具并在此行设置断点：

if (/^\s*$/.test(filename)) {

然后当代码运行时，您可以看到“文件名”有什么值，并找出正则表达式失败的原因，以及它应该是什么。您在那里的正则表达式看起来像是在检查“以 0 个或多个空格开头和结尾的字符串”，所以也许您需要检查“filename.length == 0”或“filename === undefined” .

您可以在目标网站中调试代码，也可以在 Codepen 中调试代码。这有点棘手，但可以检查您在笔内运行的代码以获得比较值。

如果您仍需要帮助，请在您的调试器会话中写回“文件名”的值。

Debugging JS in Chrome tutorial.

Answer 2

也许它在您的 html 网站中不起作用，因为 javascript 将执行得太早。将你的 js 代码包装成：

$(document).ready(function() {
    // Put code here
});

Answer 3

这对我有用

$(document).ready(function () {
    $("#chooseFile").change(function () {
       //your code here
    });
});