注意:
下面的答案和评论反映了2009年遗留浏览器的状态.现在,您可以在2017年使用JavaScript和dataTransfer或FileList对象实际动态/编程地设置文件输入元素的值.
有关详细信息和演示,请参阅此问题中的答案:
如何以编程方式设置文件输入值(即:拖放文件时)？
我该如何设置它的值？
<input type="file" />
<input type="file" id="file-id" name="file_name" onchange="theimage();">
这是我的上传按钮.
<input type="text" name="file_path" id="file-path">
这是我必须显示文件完整路径的文本字段.
function theimage(){
var filename = document.getElementById('file-id').value;
document.getElementById('file-path').value = filename;
alert(filename);
}
这是解决我问题的JavaScript.但在警报值给了我
C:\fakepath\test.csv
和Mozilla给了我:
test.csv
但我想要本地完全限定的文件路径.如何解决这个问题？
如果这是由于浏览器安全问题,那么应该采用哪种替代方法呢？
有没有办法设置文件input(<input type="file" />)的值,还是所有被阻止的安全性？我正在尝试使用谷歌齿轮的openFiles来制作一个简单的多重上传器.
注意:
下面的答案反映了2009年遗留浏览器的状态.现在,您可以在2017年使用JavaScript动态/编程地设置文件输入元素的值.
有关详细信息和演示,请参阅此问题中的答案:
如何以编程方式设置文件输入值(即:拖放文件时)？
我正在尝试创建一个控件,您可以在其中选择要在表单中提交的文件,并将文件放入其中以执行相同的操作.我有这样的东西,如果它是一个图像,它也会显示该文件的预览:
<div class="preview-image-container">
<input type="file" name="File" id="File" accept="image/*"
class="image-url form-control" style="display:none;" />
<div class="preview-image-dummy"></div><img class="preview-image-url" />
<div class="preview-image-instruction">
<div class="preview-image-btn-browse btn btn-primary">Select file</div>
<p>or drop it here.</p>
</div>
</div>
用户删除文件preview-image-container.该文件未随AJAX提交,用户需要提交包含更多数据的表单.
出于安全原因,我们不允许使用JavaScript更改输入文件的值.但是,我知道默认输入文件支持droppable,并且有一些网站让我们通过将它们放在表单中来选择文件,所以我的猜测是有一种方法可以做到这一点.
正如您从MCVE中看到的,我只对使用jQuery或纯JavaScript而不使用其他库感兴趣.
虽然可以使用dropzone.js,但它不符合我的要求,需要花费大量的时间来定制它的外观.此外,dropzone.js具有某些在我的ASP.NET应用程序中无法满足的配置要求.
有一个类似的问题,但没有一个正确的答案:
如何在HTML格式的表单中将文件对象设置为输入文件？
也不像上传拖放图像输入文件和预览,因为我已经实现了拖放和预览操作.我的问题是特定于在父容器中删除文件时输入空文件的问题.
从IE浏览器执行上传时,我的后端(org.apache.commons.fileupload)获取完整的文件路径.
对于其他非IE浏览器,它获取文件名,因为安全性,它是可以的.
如何从IE的输入中获取文件名？
是否可以在UI上进行,因为我认为编辑apache lib并不是很优雅.
也许,输入字段存在一些参数？
我可以在服务器上做,但对UI方法感兴趣.
可能重复:
动态设置文件输入的值
我有一个输入文件HTML表单,我想在HTML表单中设置文件路径的初始值.我尝试更改标签"值",但它无论如何都不起作用.
<input type="file" name="testcase" value= "C:\test.txt">
请给我一些关于这个小问题的建议.谢谢.
我目前正在开发一些基于游戏的网页脚本(将游戏移植到网络上).脚本从我的Web主机下载数据,因此加载速度很慢(必须下载每个文件:地图,模型,纹理......).为了解决这个问题,我添加了一个选项,允许用户在他们的计算机中选择他们的本地游戏数据(使用File API - 拖放)直接从本地解析内容,避免从网上下载多个megas,结果非常快.
问题在于:每次重新加载浏览器时,都必须一次又一次地重新选择文件.它不是用户友好的.
那么,有没有办法从这个游戏存档中保留一个参考,以避免用户每次都重新进行拖放操作？我知道安全问题,只想知道是否有类似持久性URL.createObjectURL()的东西.
注意:游戏数据大概是〜2Go,所以不可能将它存储在FileSystem API中(我不想复制它,当你可以保留对它的引用时,浪费空间来复制数据).
谢谢 :)
我正在尝试编写一个使用画布绘制非常大的图像的故障安全程序(60 MB可能是较高的范围,而10 MB是较低的范围).我很久以前就发现调用canvas的同步函数toDataURL通常会导致页面在浏览器中崩溃,所以我调整了程序,使用toBlob填充程序来实现跨浏览器的兼容性.我的问题是:使用该URL.createObjectURL(blob)方法的Blob URL 持续多长时间？
我想知道是否有一种方法可以缓存Blob URL,这将允许它持续超出浏览器会话,以防有人想要在一个点上渲染部分图像,关闭浏览器,然后返回并稍后完成将Blob URL再次读入画布并从其停止的位置恢复.我注意到这个可选的autoRevoke参数可能是我正在寻找的,但我想确认我正在尝试做的事实际上是可能的.除非涉及不同的解决方案,否则您的答案中不需要代码示例,如果可以使用此方法或其他方式使Blob URL最后超出会话,则我只需要是或否.(如果由于某种原因页面崩溃并且它也像"恢复会话"选项那样,这也会很方便.)
我在考虑这样的事情:
function saveCache() {
var canvas = $("#canvas")[0];
canvas.toBlob(function (blob) {
/*if I understand correctly, this prevents it from unloading
automatically after one asynchronous callback*/
var blobURL = URL.createObjectURL(blob, {autoRevoke: false});
localStorage.setItem("cache", blobURL);
});
}
//assume that this might be a new browser session
function loadCache() {
var url = localStorage.getItem("cache");
if(typeof url=="string") {
var img = new Image();
img.onload = function () …我编写了以下代码来检查上传的文件是否存在使用HTML5文件API.
<input type="file" id="myfile">
<button type="button" onclick="addDoc()">Add Document</button>
<p id="DisplayText"></p>以下JavaScript代码已映射到它如下:
function addDoc() {
var file=document.getElementById("myFile").files[0]; //for input type=file
var reader=new FileReader();
reader.onload = function(e) {}
reader.readAsText(file);
var error = reader.error;
var texte=reader.result;
document.getElementById("DisplayText").innerText=reader.result; /*<p id="DisplayText>*/
}
从本地系统浏览文件后,我尝试在单击之前从文件夹中删除"浏览"文档addDoc().单击按钮后我仍然可以看到Filereader.result不是null并且可以显示所有内容.
有人可以解释Filereader的工作原理吗？一旦浏览文件,FileReader就会被绑定吗？
我们也可以检查系统Readonly Attribute with FileReader是否与Java类似File.canread()？
有人可以建议吗？我有IE11来测试代码.
我正在HTML5中创建一个应用程序,您可以选择一个视频文件,然后应用程序使用HTML5 video标签和window.URL.createObjectURL().问题是我想在localStorage中保存有关此视频的数据,并在用户使用我的应用程序时再次播放,但正如Mozilla MDN所述,该方法的结果如下:
浏览器将在卸载文档时自动释放这些内容
那么我可以做我想做的事吗？或者在没有window.URL.createObjectURL()其他东西的情况下做同样的事情？