读取图像并上传，之后答案

【问题标题】：read images and upload, after读取图像并上传，之后
【发布时间】：2012-08-13 00:01:36
【问题描述】：

我正在努力完成的事情

[x] 1) 用户填写表单

[x] 2) 用户通过“拖放 (html5)”或“单击选择图像”将图像添加到表单中并在页面上显示预览。（完毕）在这里很容易添加代码来触发将这些图像上传到服务器，但我现在还不想要。

[x] 3) 用户点击“添加我和我的办公桌” --> 如果用户帐户不存在，则创建用户帐户

[x] 4) 添加了办公桌，并添加了与正确用户的连接。

[x] 5) 使用same name (id) as the desk_id. 创建一个folder

::::THE QUESTION::::

6) -->> now我要upload那些拖拽的，或者选中的图片to that folder。

:::::::::::::::::::

我在这里找到的信息已经走到了这一步：http://www.html5rocks.com/en/tutorials/file/dndfiles/（实际页面真的很震撼！9

我知道这个很棒的解决方案：http://blueimp.github.com/jQuery-File-Upload/ 但这对于我正在尝试做的事情来说太过分了，而且我碰巧很自豪我已经完成了其他所有工作，而且我真的认为我已经很接近了。

不断出现的单词和表达式：读取 blob、检查数组 blob、从沙箱读取、canvas.toDataURL()

感觉答案就在这里：http://www.html5rocks.com/en/tutorials/file/xhr2/ 和/或这里http://www.html5rocks.com/en/tutorials/file/dndfiles/或这里/ http://www.html5rocks.com/en/tutorials/file/filesystem/（在“复制用户选择的文件”下），或在这里http://robertnyman.com/2010/12/16/utilizing-the-html5-file-api-to-choose-upload-preview-and-see-progress-for-multiple-files/

你可以说我在这之后的下一步：Preview an image before it is uploaded 但也许我可以朝着正确的方向前进？ :)

我当然看过这些： HTML5 Pre-resize images before uploading facebook js api - HTML5 canvas upload as a photo

当前显示来自 DND 文件的预览，如下所示：

for (var i = 0, f; f = uppladdadeFiler[i]; i++) {

    // Only process image files.
    if (!f.type.match('image.*')) {
      continue;
    }

    var reader = new FileReader();

    // Closure to capture the file information.
    reader.onload = (function(theFile) {
      return function(e) {
        // Render thumbnail.
        var span = document.createElement('span');
        span.innerHTML = ['<img class="thumb preview" src="', e.target.result,
                          '" title="', escape(theFile.name), '"/>'].join('');
        document.getElementById('listImages').insertBefore(span, null);

        var span2 = document.createElement('span');
        span2.innerHTML = ['<img class="thumb inside" src="', e.target.result,
        '" title="', escape(theFile.name), '"/>'].join('');
        document.getElementById('huvudbilden').insertBefore(span2, null);
      };        
    })(f);
        $('#valdaBilder').show();

    // Read in the image file as a data URL.
    reader.readAsDataURL(f);
  }

【问题讨论】：

毕竟...问题是什么？
抱歉输入太长，我把问题标记出来了 (:::QUESTION ::::)
我认为您应该在第一次触摸时上传图像（例如，当它们被用户选择时），当过程完成时，将这些图像移动到指定文件夹。这并不复杂。
这样吗？ stackoverflow.com/questions/2082138/…
查看用户与之交互的方式，您可能应该有一个清理过程以在一段时间后删除未使用的目录/文件夹。你知道它是怎么回事。

标签： php html image-uploading image-upload

【解决方案1】：

我会给你一些意见，希望能引导你走向正确的方向。请注意，由于两个原因，我没有提供现成的工作答案 - 1. 我太懒了:) 2. 据我所知，一旦你掌握了要点，你就足够聪明了它......所以这里是：

首先要做的是有一个名为“上传文件”的按钮，并在其上附加一个 fn，例如 uploadFiles()。现在这个函数将如下所示：

function uploadFiles()
{
    var file = files[0]; 
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function()
    { 
        if (xhr.readyState==4 && xhr.status==200) 
        alert(xhr.responseText);
    };   
    xhr.open('POST', '/upload.php', true);
    xhr.setRequestHeader('X-FILE-NAME', file.name);
    xhr.send(file);
}

好的，解释如下：

var file = files[0];

files 对象数组应该是您在拖放事件监听器函数中创建的东西，它将是代表您拖放到 dropzone 中的文件的文件对象。通常你会这样创建它们：files = event.dataTransfer.files; 创建一个名为 files 的 FileList object 在示例中我只考虑 dropzone 中的第一个文件 - 因此 files[0]

我想其余的代码是不言自明的。需要注意的一点是：

 xhr.setRequestHeader('X-FILE-NAME', file.name);
 xhr.send(file);

如您所见，我们正在向服务器发送原始二进制数据内容。因此，后期操作正在将文件包含的原始二进制数据写入服务器流。这一点很重要，因为这会影响服务器读取此发布数据的方式。

服务器端上传.php：我只是要读取上传文件的前 1000 个字节并将其打印回客户端（根据上面的 javascript 代码，它会在浏览器中提醒它）

<?php
$streamHandle = fopen("php://input","rb");
$streamContent = fread($streamHandle,1000);
echo $streamContent;
?>

很多人对如何在服务器端读取内容感到困惑，考虑使用$_POST，或者$_FILES，但是如果你使用X-FILE-NAME发送数据，那么你必须打开一个句柄来读取它到php://input，这是正在运行的php进程的标准输入流。

一旦您读取了流，只需将其fwrite-ing 到您想要的任何目录中的新文件中。

就像我说的，这不是一个交钥匙解决方案，您可以复制粘贴到您的特定代码中，但我希望这可以帮助您找到正确的方向来使用 HTML5 的拖放和文件上传文件Javascript提供的API来支持它。

【讨论】：