Javascript 它会一直显示未定义的文件名

我试图在用户上传文件后显示该文件的名称。文件上载成功，但在javascript中，它会继续显示以下消息：

文件（未定义）已成功上载

当它应该显示文件名时，它会一直显示未定义。为什么会这样？此时，用户上传文件，文件被上传到“ImageFiles”文件夹中，当上传完成时，下面的javascript函数显示消息，说明已成功上传的文件的名称

下面是上载后显示文件名和消息的代码：

function stopImageUpload(success){

    function handleFileSelect(evt) {
    var files = evt.target.files;
    localStorage["fname"] = files[0].name; //save the name for future use
}

$('.fileImage').bind('change', handleFileSelect, false);


      var result = '';
      if (success == 1){
  result = '<span class="msg">The file ('+localStorage["fname"]+') was uploaded successfully!</span><br/><br/>';
    localStorage["fname"] = undefined; //remove the temporary variable

      }
      else {
         result = '<span class="emsg">There was an error during file upload!</span><br/><br/>';
      }

      return true;   
}

函数stopImageUpload（成功）{
功能手柄文件选择（evt）{
var files=evt.target.files；
localStorage[“fname”]=文件[0]。名称；//保存名称以备将来使用
}
$（'.fileImage'）.bind（'change'，handleFileSelect，false）；
var结果=“”；
如果（成功==1）{
结果='文件（'+localStorage[“fname”]+'）已成功上载！

；
localStorage[“fname”]=未定义；//删除临时变量
}
否则{
结果='上传文件时出错！

'；
}
返回true；
}

以下为表格：

  <form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='stopImageUpload(this);' class='imageuploadform' >
    <p>Image File: <input name='fileImage' type='file' class='fileImage' />
    <input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' />
    </p> 
    </form>

图像文件：

试试这个：

var fileName;
function stopImageUpload(success){

    function handleFileSelect(evt) {
    var files = evt.target.files;
    fileName = files[0].name; //save the name for future use
}

$('.fileImage').bind('change', handleFileSelect, false);


      var result = '';
      if (success == 1){
  result = '<span class="msg">The file ('+fileName+') was uploaded successfully!</span><br/><br/>';
    fileName = ""; //remove the temporary variable

      }
      else {
         result = '<span class="emsg">There was an error during file upload!</span><br/><br/>';
      }

      return true;   
}

var文件名；
函数stopImageUpload（成功）{
功能手柄文件选择（evt）{
var files=evt.target.files；
fileName=文件[0]。name；//保存名称以备将来使用
}
$（'.fileImage'）.bind（'change'，handleFileSelect，false）；
var结果=“”；
如果（成功==1）{
结果='文件（'+fileName+'）已成功上载！

；
fileName=”“；//删除临时变量
}
否则{
结果='上传文件时出错！

'；
}
返回true；
}

试试这个：

var fileName;
function stopImageUpload(success){

    function handleFileSelect(evt) {
    var files = evt.target.files;
    fileName = files[0].name; //save the name for future use
}

$('.fileImage').bind('change', handleFileSelect, false);


      var result = '';
      if (success == 1){
  result = '<span class="msg">The file ('+fileName+') was uploaded successfully!</span><br/><br/>';
    fileName = ""; //remove the temporary variable

      }
      else {
         result = '<span class="emsg">There was an error during file upload!</span><br/><br/>';
      }

      return true;   
}

var文件名；
函数stopImageUpload（成功）{
功能手柄文件选择（evt）{
var files=evt.target.files；
fileName=文件[0]。name；//保存名称以备将来使用
}
$（'.fileImage'）.bind（'change'，handleFileSelect，false）；
var结果=“”；
如果（成功==1）{
结果='文件（'+fileName+'）已成功上载！

；
fileName=”“；//删除临时变量
}
否则{
结果='上传文件时出错！

'；
}
返回true；
}

未测试，但请尝试使用getItem/setItem，看看是否有任何变化

function stopImageUpload(success){

    function handleFileSelect(evt) {
       var files = evt.target.files;
       console.log(files[0].name); //see if a name really exists, or if something is wrong outside this function?
       localStorage.setItem("fname", files[0].name); //save the name for future use
    }

    $('.fileImage').on('change', handleFileSelect);

    var result = '';
    if (success == 1){
        result = '<span class="msg">The file ('+localStorage.getItem("fname")+') was uploaded successfully!</span><br/><br/>';
        localStorage.setItem("fname", ""); //remove the temporary variable
    } else {
        result = '<span class="emsg">There was an error during file upload!</span><br/><br/>';
    }
    return true;   
}

函数stopImageUpload（成功）{
功能手柄文件选择（evt）{
var files=evt.target.files；
console.log（文件[0].name）；//查看名称是否确实存在，或者此函数之外是否有错误？
localStorage.setItem（“fname”，文件[0].name）；//保存名称以备将来使用
}
$（'.fileImage'）。在（'change'，handleFileSelect）上；
var结果=“”；
如果（成功==1）{
结果='文件（'+localStorage.getItem（“fname”）+'）已成功上载！

；
localStorage.setItem（“fname”，“”）；//删除临时变量
}否则{
结果='上传文件时出错！

'；
}
返回true；
}

未测试，但请尝试使用getItem/setItem，看看是否有任何变化

function stopImageUpload(success){

    function handleFileSelect(evt) {
       var files = evt.target.files;
       console.log(files[0].name); //see if a name really exists, or if something is wrong outside this function?
       localStorage.setItem("fname", files[0].name); //save the name for future use
    }

    $('.fileImage').on('change', handleFileSelect);

    var result = '';
    if (success == 1){
        result = '<span class="msg">The file ('+localStorage.getItem("fname")+') was uploaded successfully!</span><br/><br/>';
        localStorage.setItem("fname", ""); //remove the temporary variable
    } else {
        result = '<span class="emsg">There was an error during file upload!</span><br/><br/>';
    }
    return true;   
}

函数stopImageUpload（成功）{
功能手柄文件选择（evt）{
var files=evt.target.files；
console.log（文件[0].name）；//查看名称是否确实存在，或者此函数之外是否有错误？
localStorage.setItem（“fname”，文件[0].name）；//保存名称以备将来使用
}
$（'.fileImage'）。在（'change'，handleFileSelect）上；
var结果=“”；
如果（成功==1）{
结果='文件（'+localStorage.getItem（“fname”）+'）已成功上载！

；
localStorage.setItem（“fname”，“”）；//删除临时变量
}否则{
结果='上传文件时出错！

'；
}
返回true；
}

我本打算提出同样的建议，但我认为在

change

和

submit

上调用

handleFileSelect

有问题，我本打算提出同样的建议，但是我认为在

change

和

submit

@JimSchubert上调用

handleFileSelect

有一个问题，在这种情况下，为什么人们更喜欢

localStorage

？@KevinVanRyckegem我开了一个玩笑，将这个更可取的解决方案与原始问题中使用localStorage进行了比较。localStorage有时太难了。@JimSchubert在这种情况下，人们为什么更喜欢

localStorage

？@KevinVanRyckegem我开了个玩笑，将这个更可取的解决方案与原始问题中使用localStorage进行了比较。本地存储有时过于庞大。