我在我的 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>
关于javascript - 为什么用于存储所选文件名和文件路径的隐藏输入字段没有在以下情况下生成在表单上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28759017/