0

我想要完成的事情

[x] 1) 用户填写表格

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

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

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

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

::::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/ AND / OR HERE http://www.html5rocks.com/en/tutorials/file/dndfiles/或 HERE / 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/

您可以说我在此之后的下一步：在上传之前预览图像， 但也许我可以朝着正确的方向前进？:)

当然我看过这些： 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);
  }
4

1 回答 1

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;它创建了一个FileList object命名files在示例中我只考虑 dropzone 中的第一个文件 - 因此files[0]

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

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

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

服务器端 upload.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 的拖放和文件 API 提供的文件上传Javascript 来支持它。

于 2012-08-13T04:30:22.047 回答