正文 

当前位置： 首页 > 源码 >

带有上传附件选项 HTML/JQuery 的文本区域

     2023-05-08     247

关键词：

【中文标题】带有上传附件选项 HTML/JQuery 的文本区域【英文标题】：Text area with upload attachments options HTML/JQuery 【发布时间】：2018-12-16 08:54:39 【问题描述】：

我创建了允许用户输入文本的文本区域，如下所示：

<!DOCTYPE html>
<html>
<body>

<textarea rows="4" cols="50">
Please type your favourite foods here and upload attachments if you want!</textarea>

</body>
</html>

我想让用户允许将文件附件拖放或上传到文本区域，但我不太确定如何实现这一点。我对 Web 开发很陌生，我不确定这样的功能会被称为什么。我已经创建了我想要的屏幕截图，见下文 - 类似于 gmail compose 窗口的内容。谁能帮帮我，谢谢。

用户编写并上传文件后，我会将它们保存到数据库中。

【问题讨论】：

你在寻找这样的东西吗：***.com/questions/9544977/… 嗨@vahdet 是的，但我想使用文本区域而不是 div，因为我还希望用户能够输入文本。另外，我想在窗口中显示上传的附件，如上图所示。 【参考方案1】：

我建议使用 DropzoneJS 库。

使用您需要的options 创建Dropzone 对象，并使用sending 事件将textarea 文本添加到POST 请求。

更改default template 并将您的HTML 添加到带有template-container id 的div 中。然后将previewTemplate 属性添加到myDropzone 选项中 有价值的

document.querySelector('#template-container').innerHTML

Dropzone.autoDiscover = false;
$(document).ready(function() 
  Dropzone.options.myDropzone = 
    url: $('#my-dropzone').attr('action'),
    paramName: "file",
    maxFiles: 5,
    maxFilesize: 20,
    uploadMultiple: true,
    thumbnailHeight: 30,
    thumbnailWidth: 30,
    init: function() 
      this.on('sending', function(file, xhr, formData) 
          formData.append('favouriteFoodText', document.getElementById('favourite-food-text').value);
        ),
        this.on("success", function(file, response) 
          console.log(response);
        )
    
  

  $('#my-dropzone').dropzone();
);
#b-dropzone-wrapper 
border: 1px solid black;


#b-dropzone-wrapper .full-width 
  width: 100%


#b-dropzone-wrapper textarea 
  resize: none;
  border: none;
  width: 99%;


#my-dropzone 
  top: -5px;
  position: relative;
  border: none;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.0/min/dropzone.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.0/min/dropzone.min.css" rel="stylesheet" />
<div id="b-dropzone-wrapper">
  <textarea rows=5 id="favourite-food-text" placeholder="please write some text here"></textarea>
  <form action="file-upload.php" id="my-dropzone" class="dropzone full-widht" method="post" enctype="multipart/form-data"></form>
  <input type="submit" value="Submit your entry" class="full-width" />
</div>

在服务器端提交表单后，传输的数据将被PHP解析并保存在$_POST和$_FILES超级全局数组中。

【讨论】：

太好了，我现在来测试一下。这可以让我将附件和文本保存到数据库吗？ 当我拖放文件时，它似乎没有像帖子中的图片那样附加/显示在屏幕上。 此代码需要 jQuery。浏览器控制台有错误吗？ 我一直在努力让它在 jsfiddle 中工作 - jsfiddle.net/r3dtnukw/6，请你看看。我似乎无法让它工作。 即使使用 jquery，它似乎也不会在屏幕上显示/上传数据。知道为什么吗？

带有 TinyMCE 的文本区域。提交按钮不起作用

】带有TinyMCE的文本区域。提交按钮不起作用【英文标题】：TextareawithTinyMCE.submitbuttonwon\'twork【发布时间】：2015-11-1307:31:27【问题描述】：您好，我正在使用TinyMCE制作一个带有textarea的表单，当我按下提交按钮将其发送到phpDB时，... 查看详情

带有新闻帖子的文本区域 - SQL 插入（开始新行）

】带有新闻帖子的文本区域-SQL插入（开始新行）【英文标题】：TextAreawithNewsPosts-SQLInserting(StartingNewLines)【发布时间】：2016-05-1722:47:03【问题描述】：我目前正在运行一个程序，该程序从SQL数据库中获取新闻帖子，然后将它们加... 查看详情

带有换行符的文本区域中的数据到数据库

】带有换行符的文本区域中的数据到数据库【英文标题】：Datafromtextareawithlinebreakstodatabase【发布时间】：2016-04-0512:53:14【问题描述】：我有一个简单的文本区域。单击保存按钮后，我使用角度控制器保存该数据。然后，一旦单... 查看详情

将文本附加到带有换行符的文本区域

】将文本附加到带有换行符的文本区域【英文标题】：appendtexttoatextareawithlinebreaks【发布时间】：2013-08-1904:16:18【问题描述】：我想向textarea添加一些字符串，它们是文件基名。一切都很好，但唯一的问题是它混合了所有值并且... 查看详情

IE10+ 上的 AngularJS，带有占位符的文本区域导致“无效参数”。

】IE10+上的AngularJS，带有占位符的文本区域导致“无效参数”。【英文标题】：AngularJSonIE10+,textareawithplaceholdercause"Invalidargument."【发布时间】：2013-12-1201:06:08【问题描述】：在IE10+上使用angularJS、TextArea和占位符时出现“... 查看详情

ASP.NET MVC3 - 带有@Html.EditorFor 的文本区域

】ASP.NETMVC3-带有@Html.EditorFor的文本区域【英文标题】：ASP.NETMVC3-textareawith@Html.EditorFor【发布时间】：2011-06-2301:22:03【问题描述】：我有ASP.NETMVC3应用程序，也有用于添加新闻的表单。当VS2010创建默认视图时，我只有字符串数据的... 查看详情

更好的文本区域输入

...域框，其中包含“粗体”、“斜体”、“添加超链接”等选项。我想做同样的事情......但我该怎么做呢？有这方面的例子吗？我敢肯定互联网上有一些东西。任何帮助将不胜感激。谢谢！【问题讨论】：【参考方案1】：在非常... 查看详情

带有文件上传附件的 PHP 联系表

】带有文件上传附件的PHP联系表【英文标题】：PHPContactFormw/FileUploadAttachment【发布时间】：2013-11-1100:06:40【问题描述】：我有一个简单的PHP联系表(SeenHere)，我想在其中添加文件上传选项，以便客户可以附加重要文档并使用PHP的... 查看详情

如何清除焦点上的文本区域？

...focus?【发布时间】：2011-04-1309:22:11【问题描述】：我使用带有textarea的简单表单，当用户单击textarea时，我希望清除textarea的内容。这可能吗？【问题讨论】：您确定不想只删除默认文本吗？以我的经验，这些行为可能真的很侵入... 查看详情

TinyMCE 在动态生成的文本区域上不可点击和编辑

...我使用添加新按钮重复输入组。在每组输入中，都有一个带有TinyMCE的文本区域。初始（父）文本区域工作正常，但动态生成的其他文本区域不能正常工作。TinyMC 查看详情

IE中的文本区域最大长度

...须支持IE8和9用户作为主要消费者。在某些页面上，我有带有maxleng 查看详情

检测屏幕截图中的文本区域

...irefox中，我可能想测试不同的东西，第一个打开是打开首选项。然后我需要解析Firefox的屏幕截 查看详情

为啥我的文本区域不可见？

】为啥我的文本区域不可见？【英文标题】：Whyismytextareanotvisible?为什么我的文本区域不可见？【发布时间】：2018-06-0209:23:27【问题描述】：importjavax.swing.*;publicclasstextpublicstaticvoidmain(StringArgs[])JFrameframe=newJFrame();frame.setExtendedState... 查看详情

无法获取更新的文本区域值

】无法获取更新的文本区域值【英文标题】：UnabletogetUpdatedtextareaValue【发布时间】：2011-12-2514:31:59【问题描述】：我有一个问题：我的页面上有一个如下所示的文本区域：<textareaid=\'redactor_content\'name=\'redactor_content\'style=\'width:... 查看详情

实现可调整大小的文本区域？

】实现可调整大小的文本区域？【英文标题】：Implementingaresizabletextarea?【发布时间】：2010-09-1401:07:35【问题描述】：***如何这是他们自己推出的东西，还是我可以轻松附加到我网站上的文本区域的公开可用组件？我发现了这个... 查看详情

自动滚动到文本区域的底部

...rea【发布时间】：2012-02-1812:21:58【问题描述】：我有一个带有滚动条的文本区域。我会定期向其中添加新的文本行。我希望文本区域在添加新行时自动滚动到最底部的条目（最新的条目）。我怎样才能做到这一点？textAreaStatus=new... 查看详情

为啥tinymce没有出现在动态添加的文本区域

...发布时间】：2016-09-2104:52:39【问题描述】：最近，我使用jquery、php和mysql完成了我的一个项目的无限滚动。创建之后，我面临tinymce编辑器未绑定到动态生成的文本区域的问题。我该怎么办？这是ti 查看详情

如何删除特定的文本区域字段？

】如何删除特定的文本区域字段？【英文标题】：Howtodeletespecifictextareafield?【发布时间】：2011-11-3002:27:24【问题描述】：我有一个基于javascript生成的动态表单。这是相关的javascript：functionaddRowToTable()vartbl=document.getElementById(\'conve... 查看详情