为什么用于存储所选文件名和文件路径的隐藏输入字段没有在以下情况下生成在表单上？

Question

我已经在我的 HTML 页面中实施了 Filepicker.io，以便 select 上传和上传一张或多张图片。

Filepicker.io select 一个或多个文件的功能对我来说工作正常。用户可以 select 一张或多张图片。此外，如果用户想要删除任何 selected 图像，he/she 可以删除它们。到这里为止一切正常。

以下是我使用 Filepicker.ioselecting 一张或多张图片的工作代码：

<!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 文件并复制粘贴上面的代码，它肯定会工作。

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

在我的代码中，我尝试只将文件名存储到隐藏字段中，但我还需要存储文件路径。我不明白我哪里做错了，所以没有生成隐藏字段。

有人可以在这方面帮助我吗？对我会有很大的帮助。

如果您有任何其他疑问，请询问我所面临的问题，请告诉我。我非常乐意为您提供帮助。

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

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

等待您宝贵的回复。

Answer 1

你可以试试下面的html

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

而不是：

<button id="filepickerBtn" class="btn btn-primary">

Answer 2

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

出现 500 错误意味着“https://dialog.filepicker.io/api/path/Dropbox/”页面给您的响应不正确...根据您添加的评论，这取决于此文件选择器的工作方式。

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

让控制台保持打开状态，清除所有旧消息，然后从头开始执行这些步骤以上传文件。每次点击或交互后观察控制台，一旦你看到错误。不要再做任何事情，而是转到浏览器调试器的网络/url 请求部分。在这里您可以看到 files/urls 已被您的 page/browser 请求。然后您可以确认哪个页面产生了 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>

为什么用于存储所选文件名和文件路径的隐藏输入字段没有在以下情况下生成在表单上？

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

html

javascript

arrays

jquery

filepicker.io