用PHP创建文件的BLOB URL

用PHP创建文件的BLOB URL,php,javascript,blob,fileapi,Php,Javascript,Blob,Fileapi,我正在尝试创建一个文件预览系统 当用户点击上传按钮并选择文件时,我使用HTML5文件API获取所有文件信息并为文件创建缩略图 用户可以取消某些文件的上载,并添加更多文件 我现在得到的是: <p><input id="blob" name="blob" type="file" size="75" multiple /></p> <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?

我正在尝试创建一个文件预览系统

当用户点击上传按钮并选择文件时,我使用HTML5文件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>


嗯,我一直在寻找解决方案,我发现了这个:画布

Canvas元素具有toDataUrl()方法,该方法返回其包含的图像的数据URL

因此,我一直在做同样的事情,但当我提交表单时,我使用以下功能:

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;
        }
    }
};
我在页面上为画布再创建一个元素:

<canvas id="MyCanvas">This browser or document mode doesn't support canvas</canvas>
此浏览器或文档模式不支持画布
以及表单上另一个用于保存数据URL的元素:

<input id="dataurl" name="dataurl" type="text" size="50" />

好吧,现在我可以在PHP中获取所有信息,并执行如下操作:

<img src="blob:b9a8e310-05b3-48ba-ba24-9ca7cf287f71">
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);
    }
}
if($\u POST)
{
//回显“”;打印($\u POST);回显“”;
$blob=$_POST['bloburl'];
$type=$\u POST['blobtype'];
$data=$_POST['dataurl'];
$contents_split=分解(',',$data);
$encoded=$contents\u split[计数($contents\u split)-1];
$decoded=“”;
对于($i=0;$i
现在我的图像已保存

它可以工作,但看起来效率很低

如果有人知道一个更好的方法来创建一个预览图片之前上传,请告诉我

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);
    }
}