DropzoneJS:在以<img>格式上传前预览所选图片
DropzoneJS是一个开源的JavaScript库，用于在网页中实现文件上传功能。它提供了一个简单易用的界面，允许用户通过拖拽文件或点击上传按钮来选择文件并上传。
在以<img>格式上传前预览所选图片是DropzoneJS的一个特性。它允许用户在选择图片后，在上传之前即可预览所选的图片。这对于需要用户确认所选图片是否正确或进行编辑的应用场景非常有用。
DropzoneJS的优势包括：
- 简单易用：DropzoneJS提供了简洁的API和丰富的配置选项，使开发者能够轻松地集成文件上传功能到他们的网站或应用中。
- 拖拽上传：用户可以通过拖拽文件到指定区域来选择文件并上传，提供了更直观的交互方式。
- 图片预览：DropzoneJS支持在选择文件后即时预览图片，方便用户确认所选图片是否正确。
- 上传进度显示：在文件上传过程中，DropzoneJS会显示上传进度，让用户了解上传的状态。
- 文件类型限制：开发者可以通过配置选项限制上传文件的类型，确保只接受指定格式的文件。
- 自定义样式：DropzoneJS提供了丰富的CSS类和事件回调，使开发者能够自定义上传区域的样式和行为。
DropzoneJS的应用场景包括但不限于：
- 图片上传：在社交媒体、电子商务等网站中，用户可以使用DropzoneJS来上传图片，方便快捷地分享或展示图片。
- 文件上传：在博客、论坛等网站中，用户可以使用DropzoneJS来上传各种类型的文件，如文档、音频、视频等。
- 头像上传：在用户注册或个人资料编辑页面，用户可以使用DropzoneJS来上传头像图片，提供更好的用户体验。
腾讯云提供了一系列与文件上传相关的产品和服务，其中包括对象存储（COS）和云存储（CFS）。对象存储（COS）是一种高可用、高可靠、可扩展的云存储服务，适用于存储和处理大规模非结构化数据。云存储（CFS）是一种高性能、可扩展的共享文件存储服务，适用于文件共享、数据备份、容器存储等场景。
腾讯云对象存储（COS）产品介绍链接：https://cloud.tencent.com/product/cos
腾讯云云存储（CFS）产品介绍链接：https://cloud.tencent.com/product/cfs
相关·内容
我正在对dropzonejs图片上传器做一些修改。我想允许最多12张图片上传。我看到了maxFiles的配置，但在设置为12之后，它仍然允许添加文件并生成缩略图预览。有没有办法修改，一旦达到12的限制，它将不再生成缩略图或将文件添加到上传列表中？
浏览 13提问于2017-02-06得票数 0
回答已采纳
我使用的是dropzone.js，当我将鼠标悬停在上传的图片预览上时，我想消除模糊效果。 您可以在示例中从dropzone的主页直接在网站上观察到此行为。https://www.dropzonejs.com/ 谢谢你们！
浏览 23提问于2018-12-28得票数 0
我正在尝试将DropZoneJS (found )和JavascriptLoadImage (found )结合起来创建一个解决方案，用户可以在其中拖放一个文件来上传，并且根据图像中的EXIF元数据信息，它将在必要时旋转它(包括预览缩略图)。我认为所有必要的部分都提供了：
DropZoneJS提供了包含文件对象的"addedfile“事件。在连接该事件处理程序之后，我可以将其参数传递给JavascriptLoadImage.parseMetaData函数，并正确读取存储的定向值：
var myDropZone = $("#my-awesome-dropzone").dr
浏览 9提问于2014-03-31得票数 5
回答已采纳
1回答
我正在使用dropzonejs javascript库来上传我的图片。如何使用dropzonejs添加水印？ 任何代码和帮助将非常感谢。
浏览 37提问于2021-02-10得票数 0
我上传图片，并把它放在资产文件夹中的角度7动态。但是，当我尝试预览图像时，如果不重新启动ng服务，图像将无法显示。有没有什么方法可以让我在assets文件夹之外访问图片，这样我就不需要在每次上传新图片时都重新启动ng服务器。 ts:
export const IMAGE_PATH="/assets/"; HTML :
<div class="product-img">
<img [src]="imageUrl+product.imageFileName">
</div>
浏览 6提问于2020-03-20得票数 1
1回答
我真的不太理解上传多个文件和预览背后的概念。我检查了DropzoneJS，它看起来很不错，我觉得我可以用它做很多事情。
我有一个例子:我有一个用户(id: 801)创建了一个新的post (id: TBD，因为这个post还没有创建)。我有一个表image_post，其中包含特定帖子的图像，以及一个image表，其中包含图像详细信息。现在，我有了Dropzone表单，它应该将图像上传到我在.php文件中指定的文件夹，该文件是用来处理来自Dropzone的ajax请求的。假设用户上传了2张图片，我将它们存储到一个temp文件夹中。用户提交新帖子的创建，它会收到一个ID: 10001。临时文件在磁
浏览 0提问于2015-11-21得票数 0
有没有可能在DropzoneJs中上传不同大小的文件？我使用的是vue-dropzone，它是用dropzonejs制作的，我必须为srcset上传不同大小的相同文件。 例如:我想上传1000x500像素的test.png文件。有没有可能同时上传原始分辨率和500x250px的图片？
浏览 18提问于2019-02-05得票数 0
回答已采纳
我想拖放许多图像与弹出的CakePHP3。我尝试过dropzonejs.com，但是dropzonejs是使用表单的动作来直接上传图片。我想把这些上传图像和另一个输入元素放在.ctp文件的形式。
浏览 0提问于2015-11-18得票数 0
我正在使用dropzonejs上传图片。
我希望获得服务器响应一旦文件成功上传。
我怎么能拿到呢？
浏览 1提问于2020-01-05得票数 0
回答已采纳
我有一个问题，图片上传，你可以看到演示。我有简单的html
<input type="file" id="files" multiple>
<div class="preview"></div>
当用户选择要上传的图片时，他可以看到上传内容的预览。
我的js
$("#files").on("change", previewFiles);
function previewFiles() {
var preview = $('.preview');
浏览 2提问于2020-07-31得票数 0
回答已采纳
我有用dropzonejs插件上传图片的Rails应用程序。在上传图片之前，我正在创建Album。然后我想上传图片到一个新的专辑。
Dropzone.options.myDropzone = {
init: function() {
this.on("processing", function(file) {
# Performing album creation via $.ajax
# $.ajax return ID of an album, but JS already skipped before I set new URL
});
浏览 1提问于2016-02-19得票数 0
回答已采纳
1回答
我对有意见。显然，当图像的分辨率超过72dpi时，不会生成缩略图，所有内容都会停在这里。
你可以通过上传不同类型的图片在dropzonejs网站上自己尝试。(小于72dpi的图像不会显示为缩略图)
有什么办法来解决这个问题吗？
浏览 1提问于2013-05-14得票数 0
我使用的是Ubuntu20.04，当我用铬上传图片时，我可以看到所选文件的图像预览。
现在在ubuntu22.04中，我看不到图像预览。
📷
我试过：
安装Gnome寿司
列表项首选项/性能显示缩略图
浏览 0提问于2022-05-16得票数 14
我正在练习dropzoneJS，我想知道如何获取列表中某个文件的索引，因为我想删除与我上传的文件相关的数组元素。
我创建了一个名为uploadedImages的数组。
var uploadedImages = []; //I somehow made it to store the image array from database
我想将addedfile函数上的文件名存储到uploadImages
myDropzone.on("addedfile", function(file) {
uploadedImages.push(file.name);
});
然后过滤
浏览 0提问于2016-01-10得票数 1
1回答
我有一个表单，它有一个名称和一个图像(徽标)。我使用angularjs作为客户端语言，用dropzonejs作为图像上传库。当用户单击编辑时，我希望他看到他之前上传的图像预览。为此，我使用了。问题是，如果我上传了一个新的图像后，我预加载的图像，我无法看到新的图像的预览。这是我的预加载图像代码。(它有一个角方向)
if(scope.initialFileAddress != null && scope.initialFileAddress != "")
mockFile = {name: scope.initialFileName, size: 100
浏览 1提问于2014-08-04得票数 0
回答已采纳
2回答
有没有办法让我用天使画出我所选择的图像.就像你在堆叠堆里上传照片.当您选择图片时，图片将首先呈现，然后才能上传.
我对这件事很陌生，所以请容忍我..
控制器
$scope.uploadFile = function(parameter){
console.log(parameter[0]);
$scope.profilePic = parameter[0];
};
<div class="row">
<div class="col-md-12">
<img src="{{profil
浏览 3提问于2016-04-15得票数 0
3回答
我想上传一个图片，并创建一个预览的角度4。
模板如下：
<div>
<input type="file" (onchange)="handleUpload($event)">
<img [src]="Logo" >
</div
每当选择一个文件时，我想调用一个函数handleUpload()。此函数将变量Logo的值设置为所选文件的路径。我无法获得路径，因为函数handleUpload($event)没有被调用。
组件类如下所示：
export class App {
Logo:string;
浏览 4提问于2017-05-23得票数 5
回答已采纳
2回答
我有一个django模板与表单元素，其中包括一些输入文本编辑和提交按钮和一个用户头像上传与DropzoneJS。问题是，我不能在我的表单中把DropzonJs放在div中，因为它引发了一个csrf_token error。当我在dropzoneJS;的div中放入一个csrf_token时，没有任何变化。我发现csrf_token只适用于HTML表单元素。这是我的模板：
<form role="form" method="POST">
{% csrf_token %}
<h5>Edit Profile Details<
浏览 3提问于2015-06-01得票数 1
1回答
将上传的图像预览垂直居中
、、、
我在我的站点上显示了一个用户上传的图像预览，但我希望能够在div中将其垂直居中。我尝试在上传完成后使用Javascript设置图像的margin-top，如下所示(其中$img是有问题的图像)：
reader.onloadend = (function() {
var $parentDiv = $img.parent();
$img.css('margin-top', ($parentDiv.height() - $img.height()) / 2);
});
我读过的让我相信，一旦文件上传完成，就会调用onloadend，这似乎就是事实。但是，无论图像的大小
浏览 0提问于2012-06-26得票数 1
回答已采纳
我有个问题。我想在上传之前看到我所选图片的预览。我的代码是完美的工作，只有一个图片上传。当我做了4个地方上传照片。4张不同的4张照片，然后这个不起作用。我试图更改I，类也为每次上传。但失败了。
我的密码在这里..。HTML
<div class="input-sec">
<label class="p-label" for="rear"><span style="font-size:15px;font-weight:bold;">Rear</spa
浏览 2提问于2016-12-02得票数 1
回答已采纳
2回答
在上传it.To之前，我试着预览一个图片，当用户上传图片时，我有一个会加载图片的图片。
通过单击预览图像，用户可以取消上传，而预览的图像将是disappear.However，如果用户已经选择了图像，然后在选择要上载的文件时单击“取消”(因为他改变了主意等)，以前选择的图像仍然会保留，不会消失。
是否要删除在这种情况下预览的图像？
HTML：
<input type='file' id='input1'>
<img id='imagepreview1'>
jQuery：
$(document).ready(function
浏览 4提问于2013-12-02得票数 1
回答已采纳
我使用dropzonejs上传照片到我的网站。问题是，当我单击下拉区域上传时，它将不会将“图片库”作为一种选项来显示，如下图所示：
如何添加画廊作为一个选项？
浏览 6提问于2014-12-26得票数 2
回答已采纳
1回答
强制回调以重新加载文件
、、、、
我正在使用php和jQuery工具上传和裁剪图片。效果很好。但是我想在上传和裁剪图片后进行预览。我得到了预览，但这是在收获之前的图片。我想这张照片是从任何缓存里拍出来的。当我在服务器上检出真正的文件时，它会被裁剪。
您知道如何才能强制下面的函数真正从服务器获得新的文件吗？
这就是代码，在这里，我将url返回到预览表单中的div。
new ImgSelect( $('#imgselect_container'), {
cropComplete: function(image) {
$('.avatar').html('<img src
浏览 3提问于2015-04-08得票数 0
回答已采纳
2回答
我正在使用一个旧的项目，我可以上传许多图片，但这一个，我只需要一个。上传时，我应该看看上传了什么(预览)。当我第一次上传的时候，我看到了图像。如果上传了不同的图片，我仍然会看到第一张图片。我不想那样，我需要预览最后上传的图片。
JavaScript:
$('.receipt.upload').on('change', function(e) {
let id = e.target.id;
let files = e.target.files;
let image = files[0];
let reader = new FileReader();
浏览 6提问于2016-11-05得票数 0
回答已采纳
我正在处理一些关于多文件上传的问题。我的项目处理一个表单--用户输入多个图像，这些图像保存到数据库中，但首先暂时将图像存储在目录中，以显示各种类型的预览。在我的课堂上，在处理图片上传的过程中，我试图将图片重命名如下所示。
如果我一次上传一个图像，预览会工作，每个图像都是唯一的，有一个唯一的名称。但是，如果我单击“上传”按钮并在选择图像时保持控制(即一次选择多个图像)，它们都会保存为相同的名称，而预览的图像将显示我所选择的第一个图像的重复图像。
如何添加与该会话相对应的数字:上传的图片数量，如“图像名称-1.jpg”、“图像名称-2.jpg”等等？
protected function hand
浏览 2提问于2015-05-27得票数 1
回答已采纳
1回答
如何添加一个简单的图像上传功能？
、、、、
我想给我的新网站一个功能，我可以通过一个按钮上传1张图片，并在另一个.html页面上存储(本地存储)图像，然后如果我获取它的绝对网址，我可以在论坛网站上发布它的预览会显示，到目前为止，我有一个功能，让我上传和预览图片。但我想去另一个层次。
HTML:
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">
Javascript:
<sc
浏览 0提问于2015-12-31得票数 0
我试着用dropzonejs库上传图片。我已经跟踪了有关下拉区域的文档，但是我得到了内部服务器错误。
html：
<form action="http://localhost/visitingcy/public/management/create-thing"
class="dropzone"
id="my-awesome-dropzone">
<input type="hidden" name="_token" value="{{ csrf_token()
浏览 2提问于2016-01-13得票数 0
回答已采纳
2回答
因此，我试图制作一个组件来选择多个图像并显示一个预览，这样用户就可以看到所选的图像并决定上传与否。
下面是我选择图像并显示预览的代码：
const [fileObj, setFileObj] = useState([]);
const loadImageHandler = (event) => {
setImageUpload(event.target.files);
setShowProgress(true);
for (let i = 0; i < event.target.files.length; i++) {
setFileOb
浏览 17提问于2022-08-27得票数 0
回答已采纳
2回答
Javascript:：图像预览
、、、、
我想预览4张图片，然后我上传到我的拉拉应用程序。当我上传第一张图片时，我可以看到第一张预览图像。
但是，如果我上传第二张图片，则第一张预览图像将更改为第二张图片。但是我无法在第二个预览字段中看到第二个图片预览。
同样的事情发生在第三张和第四张照片上。只有第一个预览字段更改。
如何显示4个图像预览？
html
<div class="image-preview" id="imagePreview">
@if(isset($post))
<img src="" id="ima
浏览 4提问于2020-01-15得票数 0
回答已采纳
2回答
我试着在上传之前预览一张图片，我想拆开一张小的图片，然后点击变成完整的大小，但是直到现在它还没有工作。我正在使用，来自他们的file.thumb也不起作用。
data() {
return {
url:null,
}
}
watch: {
files: {
handler: function(){
this.files.forEach((file,index) =>{
const file = e.target.file[0];
this.
浏览 4提问于2020-02-06得票数 0
1回答
动态更改div的位置
、、、
我有一个图像上传按钮在我的页面和区域预览这些图像。我只想改变显示这些图像的方式。目前我有这样的-
我想用这种方式来预览-
一点解释-当用户上传图片时，上传的图片应该替换上传按钮div，按钮框将向右移动。当用户上传下一个图像时，将重复相同的过程。上传按钮框将继续向右移动，图像将取代它的位置。
for (var i=1; i<obj.image.length; i++) {
var img_div_pre = document.createElement("div");
img_div_pre.class
浏览 1提问于2014-11-05得票数 0
我已经从下载了fotobook插件。这些图片只能通过facebook上传。是否可以直接上传图片，但在线预览无法正常工作？
请参阅位置。
如果我点击这些照片，一个空白的透明屏幕就会出现，图像不会显示。如何让它变得正确？
浏览 1提问于2012-02-22得票数 1
我正在Rails中创建一个应用程序，用户可以使用JavaScript在html5画布上绘制。使用JavaScript，我可以将画布转换为图像，这样用户就可以很容易地右键单击画布并保存图像：
var img = new Image;
img.onload = function(){
ctx.drawImage(img,0,0);
};
img.src = window.mapImgUrl;
然而，问题是画布存在于一个窗体上。我想以某种方式将图像结果添加到数据库中，这样我就可以在应用程序的其他视图上显示以前的图纸。我设置了CarrierWave和亚马逊网络服务来上
浏览 10提问于2016-08-09得票数 0
回答已采纳
3回答
我在iTunes连接中上传了5.5英寸显示器的应用预览，然后使用新的媒体管理器对所有较小的类使用相同的资产。以下为背景图片：
如您所见，当我试图保存/提交我的应用程序供评审时，我得到了以下错误：
您的应用程序预览无法上载，因为您已选择使用更大的显示大小的应用程序预览。
我做错了什么？
浏览 4提问于2016-08-15得票数 1
2回答
在用ajax上传之前，我正在尝试显示一个预览和图片名称。我使用显示预览，同时使用".name“方法显示文件名，问题是它显示了所有预览但是所有图像都有相同的名称，最后一个文件名。谢谢!
$('input').change(function(){
for (var i=0; i<this.files.length; i++){
var reader = new FileReader()
reader.onload = function (e) {
$('ul').append('&
浏览 3提问于2014-04-07得票数 0
回答已采纳
2回答
我想用画布来预览图片，上传后图片应该是带有输入标签的预览 我已经尝试使用img标签，并使用img标签为画布制作img src，我也尝试使用onclick函数，但这不起作用 HTML <canvas id="canvasImg"></canvas>
<input type="file" id="fileInp"> JS const input = document.getElementById('fileInput');
const canvas = document.getElementByI
浏览 34提问于2019-09-23得票数 0
回答已采纳
3回答
我正在尝试建立一个上传图片系统:当上传100%完成时，使用ajax，用户可以看到图片的预览。最后，他可以选择是否保存图片。我的问题是:在任何情况下，如果他选择或不保存图片，图片将已经上传。如果用户正在更改当前的url或正在关闭当前页面，那么删除图片的最佳方法是什么？
浏览 5提问于2013-07-16得票数 1
回答已采纳
2回答
我有一个网页，将允许用户上传他们的图片，将作为他们的个人资料图片。我有这样的代码：
<form method = "post" action = "" enctype="multipart/form-data">
<input type = "hidden" name = "size" value = "1000000">
<input type = "file" name = "image">
<in
浏览 3提问于2017-04-01得票数 1
1回答
我想在提交之前显示上传视频文件的预览。由于下面的JS，我已经成功地用图片完成了这个任务，但是它没有处理视频文件.
$(document).ready(function() {
if (window.File && window.FileList && window.FileReader) {
$("#files").on("change", function(e) {
var files = e.target.files,
filesLength = files.length;
浏览 1提问于2015-01-06得票数 1
在将图片发送到服务器之前，难以实现使用户能够上传图片和预览图片的逻辑。因此，基本上上传一个配置文件图片，并预览它之前，保存它。一直试图使用FileReader API来促进这一点。这是我的代码：
const [fileDataURL, setFileDataURL] = useState(null);
const [profilePic, setProfilePic] = useState(null);
...
useEffect(() => {
let fileReader, isCancel = false;
if(profil
浏览 5提问于2022-09-26得票数 0
所以我想在图像上传前预览图像使用bootstrap carousel或vuejs中的任何旋转木马，但我无法做到这一点，如果有人有想法，请与我分享。谢谢
浏览 41提问于2020-02-13得票数 1
回答已采纳
使用文件上传控制器浏览图像，所选图像应在页面中预览为图像缩略图。
<input type="file" id="imageSelector" multiple="multiple" />
var uploadImageCtrl = document.querySelector('#imageSelector');
uploadImageCtrl.addEventListener('change', function () {
var files = this.files;
for(va
浏览 3提问于2016-04-01得票数 3
我已经成功地显示了一个上传图像的预览。现在我需要知道它的naturalWidth。 然而，当我访问我的图像的naturalWidth时，它会返回之前上传的图像的宽度。 例如:第一张图片的宽度为100，第二张图片的宽度为200。当我上传第一张图片时，警报值为0。当我上传第二张图片时，它的值是100。 以下是我的代码的一部分。 var reader = new FileReader();
reader.onload = function(e) {
$('#img').css("display", "block").attr('src
浏览 14提问于2020-07-10得票数 0
1回答
我有一个购物车模式，用户可以上传他们的图像。在我上传图片之前，我将图片展示给用户。当用户想要更改图像时，他们单击close按钮，我将图像元素的src设为空，但当用户上传另一个图像时，我无法显示预览。当我将图像元素登录到控制台时，我看到了图像的src，但是当我查看元素字段时，我看不到img元素中的任何src，也不能向用户显示图像。 你能帮帮我吗? 提前谢谢。 我使用FileReader上传图片。 我的代码： if (file.files && file.files[0]) {
var reader = new FileReader();
rea
浏览 10提问于2020-09-17得票数 0
1回答
我正在开发一个网络应用程序，允许用户上传他们的图像，他们被修改，然后显示在网页上。Dropzonejs用于允许用户拖放和预览他们的图像。理想的设计将是一个拖放区域在网站的一边，而修改后的图像在另一边，一旦用户单击适当的按钮。我是新来的酒瓶，我不知道什么是最好的方式是实现这个目标。这是我到目前为止所拥有的。
以下是/static文件夹中的Javascript函数，该文件夹负责负责修改图像的一个按钮。
$('#modify1').click(function() {
$.ajax({
type: "POST",
url: "/transp
浏览 0提问于2019-08-20得票数 0
回答已采纳
1回答
使用cropper和ng文件上传
、、、、
我正在使用ng文件上传预览和上传图像。在上传图片之前，我希望让用户对图像进行裁剪。我尝试使用ng-img-裁剪，但这没有我想要的特性(纵横比定制)，但裁剪()。我现在唯一的问题是如何使用裁剪器对图像进行预览。图像src最终成为一个blob ie "blob:XYZ“。有人用这种方法成功地使用过农作物吗？有可能吗？
浏览 2提问于2015-09-18得票数 6
1回答
我输入了多个选定的文件，他们在浏览器中预览：
<input type="file" name="imageUploader[]" id="imageUploader" multiple/>
使用jQuery预览：
<script>
$(document).ready(function()
{
function readURL(input)
{
if (input.files)
{
var htm
浏览 0提问于2015-03-16得票数 0
我正在开发一个上传脚本，在那里你可以上传图片，这是直接预览。选择文件后，它会将其传递给php脚本，该脚本会回显图片。第一段代码中的jQuery将此代码插入到我的预览中。在图片之后，我打印了一些输入域。在输入字段中，您可以输入要在图片上显示的文本，如果单击预览，则会修改图片并将其显示在另一张图片所在的位置，但输入字段应留在原处。我的代码：
<script type="text/javascript"><!--//--><
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
