Question

我想要完成的事情

[x] 1）用户填写表格

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

[x] 3）用户点击“添加我和我的桌面” - ＆gt;创建用户帐户（如果尚不存在）

desk [x] 4）添加了Desk，并且还添加了与正确用户的连接。

[x] 5）使用folder

创建same name (id) as the desk_id.

::::THE QUESTION::::

6） - ＆gt;＆gt; 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);
  }

Answer 1

我会给你一些意见，希望能引导你朝着正确的方向前进。请注意，由于两个原因，我没有提供现成的工作答案 - 1.我只是太懒了:)和2.从我所看到的你很聪明，一旦得到要点就弄清楚了它...所以这里：

要做的第一件事就是有一个名为“上传文件”的按钮，并像uploadFiles()一样附加一个fn。现在这个函数看起来如下所示：

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对象数组应该是您在拖放eventlistener函数中创建的对象，它们是表示放入dropzone的文件的文件对象。通常你创建它们：files = event.dataTransfer.files;创建一个名为FileList object的{{1}}在示例中我只考虑dropzone中的第一个文件 - 因此files

我猜其余代码非常明显。需要注意的一点是：

files[0]

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

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

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

很多人对如何在服务器端阅读内容感到困惑，并考虑使用<?php $streamHandle = fopen("php://input","rb"); $streamContent = fread($streamHandle,1000); echo $streamContent; ?>或$_POST，但如果您使用$_FILES发送数据，那么您必须通过打开X-FILE-NAME的句柄来读取它，这是运行php进程的标准输入流。

一旦你读完了这个流，只需要php://input将它放到你想要的任何目录中的新文件中。

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

之后读取图像并上传

1 个答案: