如何将文件输入与对象嵌入的源链接起来？

Question

如何将文件输入与对象嵌入的源链接起来？

5

我应该如何将任何媒体文件（swf/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

- Mister SirCode

如果我理解你的意思正确的话，你需要使用FlashVars。在服务器处理上传后，服务器应该以以下方式返回带有已上传文件的绝对/相对/任何链接的HTML标签：https://dev59.com/sFPTa4cB1Zd3GeqPiVUh - Organis

很抱歉让你失望，但我不明白你的意思，我认为那个问题与我的无关。我只是想让上传的文件进入我的对象数据和电影值，这样我就可以简单地打开swfs或其他媒体并运行它们。 - Mister SirCode

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- VC.One · Accepted Answer

我建议在基本的Flash嵌入中使用标签而不是标签（设置代码更少）。

要实现您的目标，您需要执行以下操作：

- 检查所选文件的类型（请参见下面代码中的 var type = file.type;）。 - 为此类文件创建适当的元素（标记）（请参见代码中的 document.createElement("video");）。 - 删除容器中已存在的任何元素... .removeChild(container.childNodes[0])。 - 通过使用.appendChild(someNewElement)将新元素放入同一容器中（例如：一个

）。

您可以尝试像下面这样的内容：

这里的

包含在标签中，它本身是您新创建（或动态）元素的容器。请注意，它的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内容。