带有图像上传器的 HTML Textarea [关闭]

Question

我有一个可用的评论框，但想添加上传图片的选项。然后图像将显示在底部的文本区域中，就像 facebook 一样。

member-index.php页面上的代码是：

 <form action="../login/comment-exec.php" method="POST">
    <textarea name="comment" id="feeds" rows="5"  ></textarea>
<input type="hidden" value="<?php $_SESSION['SESS_MEMBER_ID']?>" name="members_id" />
    <input type="submit"  class="postbutton" name="submit" value="Post" />
    </form>

点击提交按钮后，它会将其发送到一个 PHP 页面，该页面将其上传到 Mysql 我如何将图像上传器集成到此 Textarea。

Answer 1

您需要在表单中添加此内容：

<input type="file" name="imagefile"> 和 enctype="multipart/form-data" 在你的

即：
<form action="../login/comment-exec.php" method="POST" enctype="multipart/form-data">

然后在表单处理程序的某个地方：

$allowed_filetypes = array('.jpg','.gif','.bmp','.png'); // These will be the types of file that will pass the validation.
$max_filesize = 9999999999; // Maximum filesize in BYTES - SET IN to a low number for small files
$upload_path = './uploads/'; // The place the files will be uploaded to (currently a 'files' directory).

$filename = $_FILES['imagefile']['name']; // Get the name of the file (including file extension).
$ext = substr($filename, strpos($filename,'.'), strlen($filename)-1); // Get the extension from the filename.

// Check if the filetype is allowed, if not DIE and inform the user.
if(!in_array($ext,$allowed_filetypes))
die('The file you attempted to upload is not allowed.');

// Now check the filesize, if it is too large then DIE and inform the user.
if(filesize($_FILES['imagefile']['tmp_name']) > $max_filesize)
die('The file you attempted to upload is too large.');

// Check if we can upload to the specified path, if not DIE and inform the user.
if(!is_writable($upload_path))
die('You cannot upload to the specified directory, please CHMOD it to 777.');

// Upload the file to your specified path.
if(move_uploaded_file($_FILES['imagefile']['tmp_name'],$upload_path . $filename))

// Echo success and the uploaded file.
echo 'Your file upload was successful, view the file <img src="' . $upload_path . $filename . '" title="Anything you want">'; // It worked.
else
echo 'There was an error during the file upload. Please try again.'; // It failed

// rest of your code to be placed below

数据库注意：为了在数据库中插入上传的文件或对其的引用，图像文件本身可能需要在此过程中重命名，或为其设置唯一 ID .我在该领域没有任何专业知识，但我知道您的记录需要是唯一的。

例如，人们从 iPod Touch 或 iPhone 等上传 JPG。图像的默认名称为 image.jpg。任何人从这些设备上传图片但未重命名，将自动覆盖之前上传的image.jpg；只是思考的食物。

Answer 2

不确定是否将上传数据嵌套到文本区域，但这里有一组很好的图像/文件上传脚本可能会有所帮助。

http://www.w3schools.com/php/php_file_upload.asp

您始终可以对此脚本运行 ajax 调用，将上传结果加载到 textarea...或文本区域下方的 div 以向用户显示他们上传的内容。希望对你有帮助...

Answer 3

如果您像 facebook 那样做，您不希望在发送表单的同时发送文件。当您将图片上传到 facebook（或大多数流行网站）时，它实际上会在提交表单的文本部分之前将图片上传到他们的服务器。

有几种方法可以做到这一点，将其添加到代码中的最简单方法是使用 HTML5 FileReader 类 (https://developer.mozilla.org/en-US/docs/Web/API/FileReader)，它的作用是加载文件内容的 base64 编码版本，将其设置为表单中的一个字段，然后在另一端构造文件。

<form action="../login/comment-exec.php" method="POST"> <textarea name="comment" id="feeds" rows="5" ></textarea> <input type="hidden" value="<?php $_SESSION['SESS_MEMBER_ID']?>" name="members_id" /> <input type="hidden" name="filedata" value="" /> <input type="file" onchange="loadFile(event);" /> <input type="submit" class="postbutton" name="submit" value="Post" /> </form>

对于更改的 loadFile 事件，您需要查看 FileReader，它非常简单，但作为示例有点太长了，这里有一个很棒的链接，它也支持拖放：http://www.html5rocks.com/en/tutorials/file/dndfiles/