如何通过文件选择按钮将本地SWF文件加载到Ruffle播放器中

阿华AIGC实验室

2026-4-14

嘿，我完全懂你想要实现的功能——让用户能通过文件选择器上传本地的SWF文件，然后用Ruffle直接加载它，而不是只能加载预设路径的固定文件对吧？没问题，我来帮你把代码改对。

你原来的代码思路是对的，问题就出在plr.load()这一行的参数上，Ruffle的load方法是可以直接接受本地File对象的，不需要文件路径。下面是修改后的完整代码，我标注了关键的修改点：

<!DOCTYPE html>
<html>
<title>emu</title>
<script src="https://unpkg.com/@ruffle-rs/ruffle"></script>
<div id="gameWin"></div>
<input type="file" id="flash" accept="application/x-shockwave-flash">
<button onclick="runSWF()">Click to load the SWF!</button>
<script>
function runSWF() {
    // 获取最新的Ruffle播放器实例
    var ruf = window.RufflePlayer.newest();
    var plr = ruf.createPlayer();
    var cont = document.querySelector("#gameWin");
    
    // 先清空容器里的旧播放器（避免多次点击重复添加）
    cont.innerHTML = '';
    cont.appendChild(plr);

    var fileInput = document.querySelector("#flash");
    if (fileInput && fileInput.files[0]) {
        // 直接传入用户选择的File对象，Ruffle支持这种加载方式
        plr.load(fileInput.files[0]);

        // 如果你遇到兼容性问题，也可以用Blob URL的方式加载（注释掉上面一行，解开下面的注释）
        // const blobUrl = URL.createObjectURL(fileInput.files[0]);
        // plr.load(blobUrl);
        // // 记得在播放器卸载时释放URL，防止内存泄漏
        // plr.addEventListener("unload", () => {
        //     URL.revokeObjectURL(blobUrl);
        // });
    } else {
        alert("You forgot to input your SWF!!");
    }
}
</script>
</html>

关键修改说明：

替换load参数：把原来的INPUT FILE NOT FILE PATH换成了fileInput.files[0]，这就是用户通过文件选择器选中的本地SWF文件对象，Ruffle可以直接解析它。
清空旧播放器：添加了cont.innerHTML = ''，这样用户多次点击按钮时，不会在容器里堆积多个播放器实例。
备选方案（Blob URL）：如果直接传File对象遇到问题（比如某些浏览器的特殊限制），可以用URL.createObjectURL()生成一个临时的本地URL来加载，记得在播放器不用的时候用URL.revokeObjectURL()释放这个URL，避免内存浪费。