Question

我正在实现我找到的用于文件上传功能的codepen。它在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放入头部和身体。没有成功。

非常感谢任何帮助。感谢。

****** UPDATE ****** 谢谢你的建议。我实际上尝试了它关闭CSS，它工作正常，这告诉我它与JS无关。所以跟进问题，这个CSS阻止它显示上传文件是什么？

Answer 1

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

INSERT INTO [db_new].[dbo].[Element](Number, ElementNumber)
    SELECT (NUMBER, ELEMENTNUMBER) 
    FROM [db_old].[dbo].[ELEMENTS]

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

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

如果您仍需要帮助，请使用调试器会话中的“filename”值回写。

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
    });
});

文件上传无法正常工作，但Codepen

3 个答案: