两个版本, 一个是选择文件, 一个是直接拖拽。 当然也有合并到一起的办法, 参考这里。直接将下列文件放到和flash同一目录然后用浏览器打开并将swf上传或者拖拽到改网页即可。
点击上传版
<!DOCTYPE>
<html>
<head>
<title>SWF player</title>
</head>
<style>
#container{
display: flex;
min-height:100%;
flex-direction:column;
align-items:stretch;
}
#file {
padding-bottom: 1em;
border-bottom: double 6px #ccc;
margin-bottom: 1em;
}
#file input {
font-size: 30px;
}
</style>
<body>
<div id="container">
<div id="file">
<input type="file" id="swfinput" onchange="showSWF(this.files);">
</div>
<div class="swf">
<object>
<embed id="swfobj" src="" width="100%">
</object>
</div>
</div>
</body>
<script>
function showSWF(files){
var numFiles=files.length;
for (var i=0; i<numFiles; i++){
var file=files[i];
//console.log(file.name, file.size, file.type);
var source=file.name;
var swfobj=document.getElementById("swfobj");
var inputh=document.getElementById("file").offsetHeight;
var containerh=document.getElementById("container").offsetHeight;
var swfh=containerh-inputh;
var clone=swfobj.cloneNode(true);
clone.setAttribute('src', source);
clone.setAttribute('height', swfh);
swfobj.parentNode.replaceChild(clone, swfobj);
//console.log(swfh, containerh);
}
}
</script>
</html>
拖拽版
<!DOCTYPE>
<html>
<head>
<title>SWF player</title>
</head>
<style>
#container{
display: flex;
min-height:100%;
flex-direction:column;
align-items:stretch;
}
#file {
padding-bottom: 1em;
border-bottom: double 6px #ccc;
margin-bottom: 1em;
height:45px;
text-align: center;
line-height: 45px;
background: #eef;
border: dashed 3px #eec;
}
#file input {
font-size: 30px;
}
</style>
<body>
<div id="container">
<div id="file">
Drag file to here...
</div>
<div class="swf">
<object>
<embed id="swfobj" src="" width="100%">
</object>
</div>
</div>
</body>
<script>
var dropbox;
dropbox = document.getElementById("file");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", showSWF, false);
function dragenter(e){
e.stopPropagation();
e.preventDefault();
}
function dragover(e){
e.stopPropagation();
e.preventDefault();
}
function showSWF(e){
e.stopPropagation();
e.preventDefault();
var dt=e.dataTransfer;
var files=dt.files;
var numFiles=files.length;
for (var i=0; i<numFiles; i++){
var file=files[i];
console.log(file.name, file.size, file.type);
var source=file.name;
var swfobj=document.getElementById("swfobj");
var inputh=document.getElementById("file").offsetHeight;
var containerh=document.getElementById("container").offsetHeight;
var swfh=containerh-inputh;
var clone=swfobj.cloneNode(true);
clone.setAttribute('src', source);
clone.setAttribute('height', swfh);
swfobj.parentNode.replaceChild(clone, swfobj);
//console.log(swfh, containerh);
}
}
</script>
</html>
