为什么在下面的场景中，用于存储所选文件名和文件路径的隐藏输入字段没有在表单上生成

Why the hidden input fields intended for storing selected file name and file path are not getting generating on a form in following scenario?

本文关键字：字段 输入 隐藏 路径 表单 文件 在下面 用于 文件名 存储 为什么      更新时间：2023-09-26

我在HTML页面中实现了Filepicker.io，用于选择和上传一个或多个图像。

Filepicker.io选择一个或多个文件的功能对我来说很好。用户可以选择一个或者多个图像。此外，如果用户想要删除任何选定的图像，他/她可以删除它们。在这里之前一切对我来说都很好。

以下是我使用Filepicker.io选择一个或多个图像的工作代码：

<!DOCTYPE html>
<html>
  <head>
    <link href="vshare.css" type="text/css" rel="stylesheet"/>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js">
    </script>
    <script src="http://api.filepicker.io/v1/filepicker.js"></script>
    <script>
        function filePicker(event) {        
      html = '';
      for(var i=0;i<event.fpfiles.length;i++) {
        mimetype  = event.fpfiles[i].mimetype;
        file = event.fpfiles[i].filename; 
        var extension = file.substr( (file.lastIndexOf('.') +1) );
        switch(extension) {
          case 'jpg':
          case 'png':
          case 'gif':
          case 'jpeg':
            html += '<div class="vshare_item">';
            html += '<a class="vshare_item_delete" onclick="vshare_item_delete(this);"><i class="fa fa-times"></i></a>';
            html += '<img  src="'+event.fpfiles[i].url+'" class="vshare_item_img"/>'; 
            html += '<input type="hidden" name="val[vshare]['+event.fpfiles[i].filename+'][]"  value="'+event.fpfiles[i].url+'" />';
            html += '</div>';
            html += '<div class="clear"></div>';
          break;                         
          /*case 'doc':
          case 'docx':
          case 'ppt':
          case 'pptx':
          case 'pps':
          case 'xls':
          case 'xlsx':
          case 'pdf':
          case 'ps':
          case 'odt':
          case 'sxw':
          case 'sxi':
          case 'txt':
          case 'rtf':
            html += '<div class="vshare_item">';
            html += '<a class="vshare_item_delete" onclick="vshare_item_delete(this);"><i class="fa fa-times"></i></a>';
            html += '<img  src="'+$("#global_attachment_vshare #sDocPath").val()+extension+'.png'+'" class="vshare_item_img"/>';
            html += '<input type="text" name="val[vshare]['+event.fpfiles[i].filename+'][]"  value="'+event.fpfiles[i].url+'" />';
            html += '</div>';
            html += '<div class="clear"></div>';
          break;*/
          default:
          break;
        }
      }  
      $("#global_attachment_vshare #vshare_response").html(html) ;
      $bButtonSubmitActive = true;
      $('.activity_feed_form_button .button').removeClass('button_not_active');
    }
    function vshare_item_delete(args) {
      $(args).parent(".vshare_item").remove();
    }
        </script>
    </head>
    <body>
      <form action="sample_test.php" method="post">
        <input type="filepicker" data-fp-apikey="Ajid7OnMRU2NCcKBMGTdNz" data-fp-mimetypes="*/*" data-fp-container="modal" data-fp-multiple="true" data-fp-services="BOX,DROPBOX,GOOGLE_DRIVE,EVERNOTE" onchange="filePicker(event);">
        <input type="submit" name="Submit" value="Submit File">
      </form>  
    </body>
  </html>

如果你只是在你的机器上创建一个空白的HTML文件，并复制粘贴上面的代码，它肯定会起作用。

现在我面临的问题是我无法在表单上创建隐藏的输入字段。这些输入隐藏字段用于存储所选文件的文件名和文件路径。

在我的代码中，我试图只将文件名存储到隐藏字段中，但我也需要存储文件路径。我不知道我在哪里做错了什么，所以隐藏字段不会生成。

有人能在这方面帮我吗？这将对我有很大帮助。

如果你对我面临的问题有任何其他疑问，请告诉我。我会非常乐意帮助你的。

感谢您花费一些宝贵的时间来理解我的问题并对我的问题表现出兴趣。

任何形式的帮助，建议，评论，回答都将不胜感激。

等待您宝贵的答复。

从外观上看，这不是您的代码。。这是服务器端的问题。

获得500错误意味着"https://dialog.filepicker.io/api/path/Dropbox/"给了你一个不正确的回复…根据你添加的评论，这取决于这个文件选择器的工作方式。

如果你可以使用另一个文件选择器，那可能是一个更好的选择。。但不确定错误是否在他们的一端，或者你的"sample_test.php"页面是否在它到达他们之前被调用。取决于filepicker.io的工作方式。

保持控制台打开，清除所有旧消息，然后从头开始执行步骤上传文件。每次点击或交互后都要查看控制台，一旦看到错误。不要再做任何事情，而是转到浏览器调试器的网络/url请求部分。。在这里，您可以看到页面/浏览器请求的文件/URL。然后，您可以确认哪个页面产生了500错误，并开始处理该页面。

第二个可能原因

正如@Jenish所提到的，#global_attachment_vshare似乎不存在于您的html页面上。这是在评论出来的rtf案例中吗？

编辑

实际上，仔细检查一下，页面上似乎没有任何输出元素。

从这个

$("#global_attachment_vshare #vshare_response").html(html) ;

到这个

$("#vshare_response").html(html) ;

从这个

  <form action="sample_test.php" method="post">
    <input type="filepicker" data-fp-apikey="Ajid7OnMRU2NCcKBMGTdNz" data-fp-mimetypes="*/*" data-fp-container="modal" data-fp-multiple="true" data-fp-services="BOX,DROPBOX,GOOGLE_DRIVE,EVERNOTE" onchange="filePicker(event);">
    <input type="submit" name="Submit" value="Submit File">
  </form>

到此：

  <form action="sample_test.php" method="post">
    <input type="filepicker" data-fp-apikey="Ajid7OnMRU2NCcKBMGTdNz" data-fp-mimetypes="*/*" data-fp-container="modal" data-fp-multiple="true" data-fp-services="BOX,DROPBOX,GOOGLE_DRIVE,EVERNOTE" onchange="filePicker(event);">
    <input type="submit" name="Submit" value="Submit File">
  </form>  
<div id="vshare_response"></div>

您可以尝试使用以下html

<input type="file" multiple id="filepickerBtn" class="btn btn-primary" />

而不是：

<button id="filepickerBtn" class="btn btn-primary">
相关文章：