不使用 HTML 表单元素将图像文件上传到服务器答案

【问题标题】：Uploading image files to server without using HTML form element不使用 HTML 表单元素将图像文件上传到服务器
【发布时间】：2012-01-14 19:50:45
【问题描述】：

我需要在不使用 html 表单标签的情况下在服务器上上传图片。有没有简单的方法来做到这一点。实际上，我一直在构建一个应用程序，允许用户上传他的照片或从网络摄像头拍摄一张新照片，如果用户单击上传按钮，则照片将移动到服务器。当用户上传图片并按下上传按钮时，它工作正常，因为我一直在使用带有 type='file' 的 HTML 输入标签，但是当我从网络摄像头获取图片并将其渲染到 HTML5 画布标签上时，我点击上传按钮，没有图片移动到服务器，因为输入标签中没有文件。在这两种情况下，我都使用相同的画布元素和 img 标签向用户展示。

有没有一种方法可以在不使用表单元素的情况下上传，或者有没有一种方法可以将我从 Canavas 元素获得的图像对象分配到同一个表单输入元素中？？

欢迎所有答案

在此先感谢

服务器端代码

    function bytesToSize1024($bytes, $precision = 2) {
    $unit = array('B','KB','MB');
    return @round($bytes / pow(1024, ($i = floor(log($bytes, 1024)))), $precision).' '.$unit[$i];
}

$sFileName = $_FILES['image_file']['name'];
$sFileType = $_FILES['image_file']['type'];
$sFileSize = bytesToSize1024($_FILES['image_file']['size'], 1);

 $target = "upload/"; 
 $target = $target . basename( $_FILES['uploaded']['name']) ; 
 $ok=1;
$error=$_FILES["image_file"]["error"];


$uploaddir = '/var/www/example119/upload/';
$uploadfile = $uploaddir . basename($_FILES['image_file']['name']);

  if(!empty($_FILES))
  {
     if(move_uploaded_file($_FILES['image_file']['tmp_name'], "$target$sFileName")) 
     {
     echo "The file ". basename( $_FILES['image_file']['name']). " has been uploaded...";
     } 
     else {
     echo "Sorry, there was a problem uploading your file. {$error}";
     }
  }
  else
    {
    echo "_files is empty";
    }

发出 HTTP 请求的 Javascipt 代码

function startUploading() {
    // cleanup all temp states

    iPreviousBytesLoaded = 0;
    var oProgress = document.getElementById('progress');
    oProgress.style.display = 'block';
    oProgress.style.width = '0px';

    // get form data for POSTing
    //var vFD = document.getElementById('upload_form').getFormData(); // for FF3
    var vFD = new FormData(document.getElementById('upload_form')); // this is for when user upload from browser box
    var vvFD=document.getElementById('preview1'); //added by TODO to test
    // create XMLHttpRequest object, adding few event listeners, and POSTing our data
    var oXHR = new XMLHttpRequest();        
    oXHR.upload.addEventListener('progress', uploadProgress, false);
    oXHR.addEventListener('load', uploadFinish, false);
    oXHR.addEventListener('error', uploadError, false);
    oXHR.addEventListener('abort', uploadAbort, false);
    oXHR.open('POST', 'example_upload/upload.php');
    //oXHR.send(vFD);
    oXHR.send(vvFD);

    // set inner timer
    oTimer = setInterval(doInnerUpdates, 300);
}

【问题讨论】：

标签： php javascript html

【解决方案1】：

也许您应该尝试通过 POST 发送图像数据。它没有任何大小限制，内容可以采用任何格式。

【讨论】：

只是出于兴趣，您将如何选择要上传的文件？当然，您需要一个文件输入来让用户访问他们的文件系统..？如果有其他方法（不使用 Flash 或用户可能没有的任何其他插件），我很想知道。
如果你发送一个实际的文件，你当然使用文件输入。但是，如果 - 就像问题所暗示的那样 - 想要将一些任意数据上传到服务器并将其存储在那里，您可以使用 POST 方法。没有办法不涉及 Flash 或其他插件或让您访问用户文件系统的良好、旧的文件输入字段，这当然只是一个合理的安全预防措施。
啊，是的，很好的安全预防措施 - 正是这些安全预防措施让自定义文件输入的外观和感觉变得如此困难！
没错。这有时会让你的电脑旁边的墙看起来很奇怪。但即使敲打头部也无济于事。
我从网络摄像头获取图像并将其渲染为 HTML5 画布元素，然后我有一个上传按钮，通过按下此按钮，我将 HTML5 画布转换为图像并希望保存该图像。希望你能解决我的问题？？

【解决方案2】：

不，您不能在没有表单标签的情况下上传。有一些似乎使用 Ajax 的解决方法，例如 iframe 或使用 Flash。

【讨论】：

感谢您的回答，有没有办法让我更改输入文件标签的 src，而不是打开浏览器框来选择文件，例如，如果我有一些 img 标签并想保存它从 img 标签到服务器的图像？？

【解决方案3】：

如果您不想使用表单元素，那么您将如何获取用户的输入？您可以使用 Flash、Java，但这只会让您的工作更加困难。我可能会建议使用表单输入，使用 Javascript 处理它，然后将其发送到 PHP Uploader Script.You 可以将用户重定向到该 PHP 页面并执行在那里工作或使用 AJAX 进行工作并获取一个整数，该整数将代表您上传的新图片，然后将其插入您的数据库或您存储它们的任何地方并向用户展示他的新图片..

【讨论】：

有没有办法让我更改输入文件标签的 src，而不是打开浏览器框来选择文件，例如，如果我有一些 img 标签并想从 img 标签保存该图像到服务器？？
我从网络摄像头获取图像并将其渲染为 HTML5 画布元素，然后我有一个上传按钮，通过按下此按钮，我将 HTML5 画布转换为图像并希望保存该图像。希望你能得到我的问题？？ ——
您不能更改输入文件标签的 SRC。它违反了各种安全问题。