为啥在以下情况下，用于存储选定文件名和文件路径的隐藏输入字段没有在表单上生成？
Posted
技术标签:
【中文标题】为啥在以下情况下，用于存储选定文件名和文件路径的隐藏输入字段没有在表单上生成？【英文标题】：Why the hidden input fields intended for storing selected file name and file path are not getting generating on a form in following scenario?为什么在以下情况下，用于存储选定文件名和文件路径的隐藏输入字段没有在表单上生成？ 【发布时间】：2015-04-29 19:23:15 【问题描述】：我在我的 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 文件并复制粘贴上面的代码，它肯定会工作。
现在我面临的问题是我无法在表单上创建隐藏的输入字段。这些输入隐藏字段用于存储所选文件的文件名和文件路径。
在我的代码中，我尝试仅将文件名存储到隐藏字段中，但我还需要存储文件路径。我不明白我在哪里做错了，所以没有生成隐藏字段。
有人可以在这方面帮助我吗？这对我有很大的帮助。
如果您有任何其他疑问，请询问我所面临的问题，请告诉我。我很乐意为您提供帮助。
感谢您抽出宝贵的时间来了解我的问题并对我的问题表现出兴趣。
我们将不胜感激任何形式的帮助、建议、评论、回答。
等待您宝贵的回复。
【问题讨论】：
您的浏览器控制台是否会产生任何错误？因为我通常尽量不使用投递箱或其他云存储。否则，我将首先通过对其发出警报来检查 HTML 字符串是否正确。所以在 jpeg 案例的末尾尝试 alert(html) 只要确保你在正确的元素内生成元素，因为我只是怀疑$("#global_attachment_vshare #vshare_response").html(html);，因为你没有提到任何id为global_attachment_vshare的元素
@Mayhem：我的萤火虫控制台出现以下错误：“NetworkError: 500 INTERNAL SERVER ERROR - dialog.filepicker.io/api/path/Dropbox/…*%2F*%22%5D%2C%22persist%22%3Afalse%2C% 22version%22%3A%22v1%22%2C%22storeLocation%22%3Anull%2C%22storePath%22%3Anull%2C%22storeContainer%22%3Anull%2C%22storeAccess%22%3A%22private%22%7D&_cachebust=1425193038664"
@Mayhem：虽然我选择文件的功能很好。
是的，似乎是从 js 调用的脚本中的错误，我认为在这种情况下，你刚才用.. dialog.filepicker.io/api 评论的那个.. 跨度>
【参考方案1】：
你可以试试下面的html
<input type="file" multiple id="filepickerBtn" class="btn btn-primary" />
代替：
<button id="filepickerBtn" class="btn btn-primary">
【讨论】：
问题是关于 html += '【参考方案2】：从外观上看，它不是您的代码。它是服务器端问题。
收到 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>
【讨论】：
我认为您应该忽略该错误，它位于投递箱的服务器端。您只需专注于我不生成隐藏输入字段的问题。 当您在 jpeg 案例结束时对 html 变量发出警报时会发生什么。它是否显示了您期望的正确 html 输出？抱歉，我认为 500 错误可能会阻止您的脚本继续前进。 是的，如果我在 jpeg 案例之后执行 alert(html)，它会显示以正确格式生成的整个 HTML。 正如@Jenish 在编辑和提到的那样。看起来您的页面上不存在“global_attachment_vshare”，因此无法针对它设置 html 是的，我成功了。再次感谢。以上是关于为啥在以下情况下，用于存储选定文件名和文件路径的隐藏输入字段没有在表单上生成？的主要内容，如果未能解决你的问题，请参考以下文章
Hyperledger Fabric v2.0 中的隐式数据集合