我正在尝试创建一个文件预览系统。
当用户单击上传按钮并选择文件时,我使用 HTML5 FILE API 获取所有文件信息并为文件创建缩略图。
用户可以取消部分文件的上传,也可以添加更多文件。
我现在拥有的是这样的:
<p><input id="blob" name="blob" type="file" size="75" multiple /></p>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input id="blobtype" name="blobtype" type="text" size="20" />
<input id="bloburl" name="bloburl" type="text" size="50" />
<input id="salvar" name="salvar" type="submit" value="salvar" />
</form>
<p id="result"></p>
还有我的 javascript:
function cbu(file)
{
if (window.URL){ return window.URL.createObjectURL(file);}
else if (window.webkitURL){ return window.webkitURL.createObjectURL(file);}
else if (window.createObjectURL){ return window.createObjectURL(file);}
else if (window.createBlobURL){ return window.createBlobURL(file); }
}
document.getElementById("blob").onchange = function(event)
{
var result = document.getElementById("result");
var i = 0, j = event.target.files.length;
for (i = 0; i < j; i++)
{
var url = cbu(event.target.files[i]);
var img = document.createElement("img");
img.onload = function(){ }
result.appendChild(img);
img.src = url;
document.getElementById("blobtype").value = event.target.files[i].type;
document.getElementById("bloburl").value = url;
}
};
它会生成这样的缩略图:
<img src="blob:b9a8e310-05b3-48ba-ba24-9ca7cf287f71">
当用户提交表单时,此值blob:b9a8e310-05b3-48ba-ba24-9ca7cf287f71
将发送到 PHP 文件。
所以我的问题是,如何将此 blob url 转换为文件,以便将其保存在我的应用程序中?
有更好的方法吗?
感谢您的帮助!