Как бы я связал входной файл с источником встраивания объекта - PullRequest
Новая
       33

Как бы я связал входной файл с источником встраивания объекта

6 голосов
/ 14 марта 2019

Как мне связать любые медиа-файлы (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

1 Ответ

2 голосов
/ 18 марта 2019

Я предлагаю использовать <embed> тег над <object> для базового встраивания Flash (без кода настройки).

Чтобы достичь своей цели, вам придется ...

  • Проверьте, какой тип файла выбран ( см .: var type = file.type; в приведенном ниже коде).

  • Создать соответствующий элемент (тег) для такого файла ( см. document.createElement("video"); в коде).

  • Удалите все уже существующие элементы в вашем контейнере ... .removeChild(container.childNodes[0].

  • Поместите новый элемент в тот же контейнер ( например: a <div>), используя .appendChild(someNewElement);

Вы можете попробовать что-то вроде ниже:
Здесь <div> находится внутри тега <a>, который сам является контейнером ваших вновь созданных (или динамических ) элементов. Обратите внимание, что его идентификатор aTag, поэтому получение ссылки по var container = document.getElementById("aTag"); означает, что позже мы сможем обновить содержимое aTag с помощью container.appendChild(tmpElement);

<!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> должен существовать с URL-адресом на основе http:// или file:// в параметре "src". Это проблема безопасности.

Проверена загрузка SWF в Firefox, и она работает нормально.
Обновленный код протестирован только на Chrome и отлично работает для загрузки содержимого Flash.

...