我如何将文件输入链接到对象嵌入的源
Posted
技术标签:
【中文标题】我如何将文件输入链接到对象嵌入的源【英文标题】:How would I link a File Input to a source of an Object Embed 【发布时间】:2019-08-05 14:01:15 【问题描述】:如何将任何媒体文件(swfs/mp4/mp3/png/其他媒体嵌入文件)链接到我的对象嵌入源: 基本上我想要这个:
<input type="file"></input>
发送上传的文件(最好是 swf) 数据和价值来源:
<object type="application/x-shockwave-flash" data=""
style="width:640px;height:480px;margin:1px 350px;">
<param name="movie" value="" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="wmode" value="opaque" />
<param name="quality" value="high" />
<param name="menu" value="false" />
</object>
链接到完整的当前项目:
Codepen
【问题讨论】:
如果我正确理解您想要做什么,您需要使用 FlashVars。在您的服务器处理上传后,服务器应通过以下方式返回带有绝对/相对/任何链接的 html 标记到上传的文件:***.com/questions/4671867/… 很抱歉让您失望了,但我不明白您的意思,我认为这个问题与我的问题无关,我只是想让上传的文件转到我的对象数据和值中电影那样,我可以简单地打开 swfs 或其他媒体,然后运行它。 【参考方案1】:我建议使用<embed>
标签而不是<object>
进行基本的Flash 嵌入(更少的设置代码)。
要实现你的目标,你必须...
检查选择了什么类型的文件(见:var type = file.type;
在下面的代码中)。
为此类文件创建适当的元素(标签)(参见:代码中的document.createElement("video");
)。
删除容器中任何已经存在的元素....removeChild(container.childNodes[0]
。
使用.appendChild(someNewElement);
将新元素放入同一容器中(例如: <div>
)
您可以尝试以下方法:
这里<div>
包含在<a>
标签内,它本身就是您新创建的(或动态)元素的容器。注意它的 id 是aTag
,所以通过var container = document.getElementById("aTag");
获取引用意味着稍后我们可以使用container.appendChild(tmpElement);
更新aTag
内容
<!DOCTYPE html>
<html>
<body>
<p> Choose a media file...</p>
<input type="file" id="fileChooser" accept="*/*"/>
<div>
<a id="aTag"> </a>
</div>
<script>
document.getElementById('fileChooser').addEventListener('change', onFileSelected, false);
function onFileSelected(evt)
var file = evt.target.files[0]; // FileList object
var type = file.type;
//alert("file TYPE is : " + type);
var fileURL = URL.createObjectURL(file);
var reader = new FileReader();
reader.readAsDataURL(file);
var tmpElement; //will hold image, video, Flash content....
var path; //will hold URL of file BLOB (not file path)....
reader.onloadend = function(evt)
if (evt.target.readyState == FileReader.DONE)
//# update file path...
path = (window.URL || window.webkitURL).createObjectURL(file);
//# remove any other existing media element...
var container = document.getElementById("aTag");
container.removeChild(container.childNodes[0]);
//# create HTML5 media element...
if ( type == "image/jpeg" || type == "image/png" || type == "image/gif")
tmpElement = document.createElement( "img");
tmpElement.setAttribute("width", "650");
if ( type == "video/mp4" )
tmpElement = document.createElement( "video");
tmpElement.setAttribute("controls", "true" );
tmpElement.setAttribute("width", "800");
//# create Flash plugin <embed> tag...
if ( type == "application/x-shockwave-flash" )
path = (window.URL || window.webkitURL).createObjectURL(file);
aTag.innerHTML = "<embed id='aFlash' src='" + path + "' width='800' height='600' type='application/x-shockwave-flash'>"
//# stop code here since we don't need these "appendChild" commands below
return 0; //exit the function
//# add newly created HTML5 element with file path
tmpElement.setAttribute("src", path);
container.appendChild(tmpElement);
;
</script>
</body>
</html>
PS:
Chrome 浏览器不允许从文件选择中动态加载 SWF。在页面加载时,<embed>
标记必须存在,并且在"src"
参数中具有基于http://
或file://
的url。这是一个安全问题。
在 Firefox 上测试了 SWF 加载,它工作正常。
更新后的代码仅在 Chrome 上进行了测试,可以正常加载 Flash 内容。
【讨论】:
谢谢,我会试试这个,我明白了它的基础,但我还是一个代码新手,如果我有任何问题我会回复...... 我相信我遇到了这个问题,chrome似乎只是下载了swf,所以我该怎么做才能解决这个问题,你说为它制作一个src/source,这就是我要运行的首先是 swfs(因为 chrome 有时很垃圾,而且不只是运行它们) 这里是项目,如果你想编辑它或看看我用它做了什么:codepen.io/SkylerSpark/pen/qvJWNd (1) 出于自身安全原因... Chrome 不会打开指向 SWF 的直接链接(因此您不能将 SWF url 放在地址栏中)。您还 cannot dynamically add Flash 稍后在页面加载阶段未首先处理。 (2) 是的,SWF 必须嵌入到 html 文件中,然后在呈现之前检查该文件。在你的情况下......你提供给 Chrome 的 html 文件只有一个“选择文件”按钮,没有嵌入 Flash。页面加载完成后,Chrome 浏览器不会被告知现在加载/插入随机的.swf
文件。
那么,有没有办法让它在其他浏览器中工作?它似乎也不适用于边缘以上是关于我如何将文件输入链接到对象嵌入的源的主要内容,如果未能解决你的问题,请参考以下文章
如何将 Kotlin 错误链接到 Android Studio 中的源?
如何将值从 javascript 传递到嵌入式 flex 对象?