用PHP归档的BLOB URL [英] BLOB URL to file with PHP
问题描述
我正在尝试创建文件预览系统.
I'm trying to create a file preview system.
当用户单击上传按钮并选择文件时,我使用HTML5 FILE API获取所有文件信息并为文件创建缩略图.
When the user click in a upload button and select files, I use the HTML5 FILE API to get all the file info and create a thumbnail for the file.
用户可以取消某些thoose文件的上传,也可以添加更多文件.
The user can cancel the upload of some of thoose files and add more files too.
我现在所拥有的是:
<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:
And my 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;
}
};
它会像这样提供缩略图:
It genarate a thumbnail like this:
<img src="blob:b9a8e310-05b3-48ba-ba24-9ca7cf287f71">
此值blob:b9a8e310-05b3-48ba-ba24-9ca7cf287f71
在用户提交表单时发送到PHP文件.
This value blob:b9a8e310-05b3-48ba-ba24-9ca7cf287f71
is send to a PHP file when user submit the form.
所以我的问题是,如何将这个Blob网址转换为文件,以便可以将其保存在我的应用程序中?
So my question is, how can I transform this blob url into a file so I can save it in my app?
有更好的方法吗?
感谢您的帮助!
推荐答案
好吧,我一直在寻找解决方案,但我找到了一个解决方案:画布.
well, I keep looking for solutions and I found this one: Canvas.
Canvas元素具有toDataUrl()方法,该方法返回其包含的图像的数据URL.
Canvas element have the toDataUrl() method that returns a Data URL for the image that it contains.
所以我继续做同样的事情,但是当我提交表单时,我使用以下功能:
So I keep doing the same thing but when I submit the form I use the following function:
function putImage(){
var url = document.getElementById("img1").src; // 'img1' is the thumbnail - I had to put an id on it
var canvas = document.getElementById("MyCanvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = url;
img.onload = function () {
// Desenha a imagem no canvas...
ctx.drawImage(img,0,0);
// Grava o Data URL na imagem...
var myImage = canvas.toDataURL("image/png");
document.getElementById("dataurl").value = myImage;
}
}
};
我在画布页面上又创建了一个元素:
I create one more element on the page for canvas:
<canvas id="MyCanvas">This browser or document mode doesn't support canvas</canvas>
以及表单上的另一个用于保存数据URL的元素:
and one more element on the form to save the Data URL:
<input id="dataurl" name="dataurl" type="text" size="50" />
好吧,现在我可以在PHP中获得所有信息,并执行以下操作:
well, now I can get it all in PHP and do something like this:
if($_POST)
{
//echo '<pre>'; print_r($_POST); echo '</pre>';
$blob = $_POST['bloburl'];
$type = $_POST['blobtype'];
$data = $_POST['dataurl'];
$contents_split = explode(',', $data);
$encoded = $contents_split[count($contents_split)-1];
$decoded = "";
for ($i=0; $i < ceil(strlen($encoded)/256); $i++) {
$decoded = $decoded . base64_decode(substr($encoded,$i*256,256));
}
$fp = fopen('imagembaixada.jpg', 'w');
fwrite($fp, $decoded);
fclose($fp);
}
}
现在,我的图像已保存.
Now my image is saved.
它可以工作,但是效率很低.
It works, but looks pretty inefficient.
如果有人知道在上传图片之前创建图片预览的更好方法,请告诉我!
If someone knows a better way to create a preview for images before upload them, please tell me!
这篇关于用PHP归档的BLOB URL的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!