我如何将文件输入链接到对象嵌入的源答案

【问题标题】：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 标记到上传的文件：stackoverflow.com/questions/4671867/…
很抱歉让您失望了，但我不明白您的意思，我认为这个问题与我的问题无关，我只是想让上传的文件转到我的对象数据和值中电影那样，我可以简单地打开 swfs 或其他媒体，然后运行它。

标签： html object flash codepen

【解决方案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 文件。
那么，有没有办法让它在其他浏览器中工作？它似乎也不适用于边缘