拖放区缩略图宽度图像大小

2024-06-19

如何更改上传图像的缩略图大小?我在我的javascript中尝试过thumbnailWidth:"350",但是这不会增加缩略图大小,而缩略图只是看起来放大了。如何操作图像缩略图大小?

HTML:

<section id="create">
<form action="upload.php" class="dropzone" id="uploadphoto"></form>
</section>

CSS:

.dropzone {
position: relative;
border: 10px dotted #FFF;
border-radius: 20px;
color: white;
font: bold 24px/200px arial;
height: 400px;
margin: 100px auto;
text-align: center;
width: 400px;
}

.dropzone:hover {
border: 10px dotted #0C3;

.dropzone.dropped {
background: #222;
border: 10px dotted #444;
}

.dropzone.in {
width: 600px;
height: 200px;
line-height: 200px;
font-size: larger;
}

.dropzone img {
border-radius: 10px;
vertical-align: middle;
max-width: 95%;
max-height: 95%;
}

JavaScript:

Dropzone.options.uploadphoto = {
maxFilesize: 25, //MB
dictDefaultMessage: "Drag and Drop Posters    or click",
acceptedFiles: ".jpeg,.jpg,.png,.gif,.JPEG,.JPG,.PNG,.GIF,.pdf,.pub",
thumbnailWidth:"350",
accept: function(file, done) {
    console.log("uploaded"); //debuging the upload
    done();
},
init: function() {
 this.on("addedfile", function() {
  if (this.files[1]!=null){
    this.removeFile(this.files[0]);
       }
    });
  }
};

使用与配置选项中使用的相同值覆盖 CSS

.dropzone .dz-preview .dz-image {
  width: 250px;
  height: 250px;
}


Dropzone.options.myAwesomeDropzone = {
  ....
  thumbnailWidth: 250,
  thumbnailHeight: 250,
  ....
}

See the JS 小提琴在这里 https://jsfiddle.net/n3wwac7v/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

拖放区缩略图宽度图像大小 的相关文章

  • 谷歌地图 - 缩放时保持居中

    在 Google 地图中 我希望在放大或缩小时能够将地图中心保持在我所在位置的标记上 这是 Ingress 所做的事情 无论您在何处双击 或双击 或在何处捏合 地图都会保持以标记为中心 所以有可能 我现在想到的最好的是 google map
  • 制作一个透明的圆形按钮,带有不透明边框和文本/字体很棒的图标

    基本上我想要一个性感的 反应灵敏的圆形按钮 它是透明的 这样你就可以通过它看到背景 但有一个不透明的轮廓 这样你就可以看到按钮和不透明的文本 或者也许我会在稍后阶段添加一个字体很棒的图标 这是我的 JS 小提琴 这样你就可以看到我正在尝试做
  • JS - 文件读取器 API 获取图像文件大小和尺寸

    您好 我正在使用以下代码来使用文件读取器 API 获取上传图像
  • 带有透明边框的响应式箭头进度条

    我正在尝试构建一个进度条 如结帐中常见的那样 问题是 箭头之间的边界是透明的 整个事情应该是反应灵敏 到目前为止我已经明白了 http codepen io MrBamblele pen rVBeoz http codepen io MrB
  • 在 React 中使用 document.querySelector?我应该使用 refs 代替吗?如何?

    我现在正在 React 中构建一个轮播 滚动到我正在使用的各个幻灯片document querySelector像这样 useEffect gt document querySelector slide activeSlide scroll
  • JavaScript 检查 null 与 undefined 以及 == 和 === 之间的区别

    如何检查变量是否null or undefined和有什么区别null and undefined 有什么区别 and 很难在 Google 上搜索 如何检查变量是否null or undefined 是变量null if a null o
  • 如何在html5画布中向前和向后移动圆圈中的对象?

    我正在 html5 canvas 中开发一个小应用程序 我需要使用键盘按键以圆周运动移动对象 我可以使用键盘按键移动对象 但存在错误 该对象不会从同一位置向后或向前移动 任何人都可以帮助我完成此操作 请检查以下代码 任何形式的帮助将非常感激
  • 在 Google 地图上显示路径时出现问题

    我有多个经度和纬度点 例如 1 long lat starting point 2 long lat 3 long lat 4 long lat 我的代码如下
  • 使用 CSS 显示 div 内容后淡出

    我正在尝试在单击按钮时显示通知 单击按钮实际上会检查电子邮件验证 我知道要显示一个包含错误消息内容的 div 但是 我想淡出错误消息 比如说 5 秒后 我想用CSS来实现它 以下是我的尝试 它只是隐藏了一切 signup response
  • 通过 Scriptaculous 拖放防止 JavaScript 点击事件

    我的页面上有一些可拖动的元素 这些相同的元素有一个导航到另一个页面的点击事件 我试图确定在用户拖动时防止触发单击事件的最佳方法 但如果不拖动则仍然允许单击事件 有人对实现这一目标的最佳方法有任何想法吗 我通过使用类似以下内容解决了这个问题
  • 在 contenteditable div 中的插入符处插入 html

    我有一个带有 contenteditable 设置的 div 并且我正在使用 jquery 捕获按键 以在按下 Enter 键时调用 PreventDefault 如同这个问题 https stackoverflow com questio
  • Google+ 风格的平铺照片库

    有没有人见过一个 javascript 库 它会生成一个照片库 类似于 Google 和现在的 Facebook 组织照片的方式 其中一些照片被裁剪 但所有照片都无缝地填充了一个空间 像这样的东西 我正在四处挖掘并发现了这个 虽然有点不同
  • 在函数字符串上使用 eval

    我在做 eval function console log Hello World 但这给出了错误 Uncaught SyntaxError Unexpected token 为什么这是错误的 The eval操作员期望Program作为输
  • NicEdit 数据不在 POST 中

    我确信我在这里错过了一些非常简单的东西 我已经搜索过 但似乎找不到答案 用这个简单的形式 我如何将 NicEdit 框中的内容发送到我的 HTTP POST 我得到的只是原始文本区域值而不是编辑后的版本 h2 Test Page h2
  • 三行无表 CSS 布局,中间行填充剩余空间

    我需要的是一个包含 3 行的基于像素高度的 div 最上面一行的高度根据内容而变化 底行具有固定高度 中间行填充任何剩余空间 一切都是宽度 100 我一直在努力构建一个 div 和基于 CSS 的布局几个小时 这让我从字面上看seconds
  • 带有边框半径的CSS中的完美圆不起作用

    圆往往是椭圆形的 我想要的是完美的圆 border radius 100 不起作用我想知道为什么 http jsfiddle net 8gD2m 1 http jsfiddle net 8gD2m 1 badge display inlin
  • 没有jquery的动画,左右滑动

    我试图在显示 div 时将其向左滑动 在隐藏它时将其向右滑动 但我不想使用 jQuery 有没有一种方法可以在不使用javascript库的情况下制作简单的动画并支持IE7和IE8 这是我的显示 隐藏js function showHide
  • 根据 Google Apps 脚本中的另一个数组过滤数组

    我对 JavaScript 相当陌生 可能需要一些帮助来解决我在处理 Google Apps 脚本时遇到的问题 我打算做的是根据数组过滤数据 该数组是从特定工作表中的特定单元格中获取的 其中包含我不想保留在数据中的字符串元素 换句话说 包含
  • 为什么我不能分配 const 但我可以控制台记录它?

    我做了一些java脚本练习 让几个链接按字母顺序排列 这是 HTML a href a is good a a href c is good a a href b is good a JavaScript const allhref doc
  • Bootstrap轮播不滑动

    我一直在尝试使用 Bootstrap Carousel 并在一定程度上取得了成功 我也可以单击并更改图像 但我有一个问题 只是不滑动而已 我哪里做错了 html div class carousel slide ol class carou

随机推荐

  • Microsoft Teams 中私人消息的传入 Webhook

    我可以从 C 应用程序或 PS 脚本创建传入 Webhook 将 JSON 消息发送到 MSFT 文档所解释的通道 但是 我想使用传入的 webhook 将 JSON 消息从我的应用程序发送到用户 作为私人消息 就像 Slack 允许的那样
  • 按日期合并多个日志文件,包括多行

    我有几个包含所有以时间戳开头的行的日志 因此以下内容可以按预期合并它们 cat myLog1 txt myLog2 txt sort n gt combined txt 问题是 myLog2 txt 还可以包含没有时间戳的行 例如 java
  • 为什么我们需要 scala 中的特征?

    所以 我试图制作一个 Finagle 服务器 与哨兵交谈 不重要 并偶然发现了一个案例 我需要从两个继承classes 不是特质 同时 我们称它们为class SentryHandler extends Handler and class
  • 如何设置视频分辨率?

    我正在使用 aForge 并尝试设置来自 USB 网络摄像头的视频源的分辨率 以便它正确适合图片框 我的目标分辨率是 800x600 但我得到的默认分辨率约为 640x480 当我尝试设置分辨率时 收到消息 无法修改只读字段的成员 有 aF
  • 如何通过 python 中的函数运行列表?

    我试图通过我创建的函数运行我的列表 但不断收到错误 我不知道出了什么问题 温度 F temp f 19 21 21 21 23 功能 def fahrToCelsius tempFahrenheit return tempFahrenhei
  • 如何在其他核心上运行每个线程?

    我有一个 udp 服务器接收数据并计算它 每个角色我都有两个线程 我的CPU是8个多核 我以不同的速度发送数据 但最多我只使用了 cpu 两核 50 的 14 如果我发送更多的数据值 我的缓冲区将填满并且不会使用更多的CPU 为什么每个核心
  • 如果基于 Spring 注解的控制器位于 jar 文件内,则该控制器无法工作

    我的子模块中有一些基于注释的控制器 这些模块作为 jar 文件部署 jar 文件中基于注释的控制器未加载到 spring 配置中 我使用 Eclipse 中的导出实用程序手动导出 jar 文件 有人遇到过这个问题吗 当您使用 Eclipse
  • 命名管道性能问题

    我使用命名管道进行 C 和 Delphi 之间的过程间通信 C 使用System IO Pipes包 而 Delphi 使用Libby s pipes pas 不幸的是 通信几乎是高性能的 分析显示通信占用了整个运行时间的 72 其余的用于
  • 使用 LAMBDA 在 Excel 中生成所有排列

    这是一个经常被问到和回答的问题 如何在 Excel 中生成所有排列 2011 https stackoverflow com questions 5724373 permutations in excel 2016 https stacko
  • pyCUDA无法打印结果

    最近 我使用 pip 为我的 python3 4 3 安装 pyCUDA 但我在测试示例代码时发现 https documen tician de pycuda tutorial html getting started https doc
  • PHP—array_merge_recursive() - 相同键没有数组

    php a php gt data1 tag gt div classes gt 1 2 3 php gt data2 tag gt section classes gt 2 3 4 5 6 php gt result array merg
  • iOS 自定义滑块删除两端的最小和最大空间

    我正在尝试使用自定义滑块 class MySlider UISlider override func trackRect forBounds bounds CGRect gt CGRect let customBounds CGRect o
  • NHibernate 对象 ID 返回不正确的值

    我正在使用 NHibernate 这不是家庭作业 假设我检索了一个类型的对象Faculty 假设 XYZ 大学工程学院 来自数据库 它有 5 个与其类型关联的子对象Department根据数据库表 应包含 ID 2 4 5 8 和 9 我的
  • Android,如何限制TextView的宽度(并在文本末尾添加三个点)?

    我有一个TextView我想限制它的字符 实际上 我可以做到这一点 但我正在寻找的是如何在字符串末尾添加三个点 这表明文本已经继续 这是我的 XML 但没有点 尽管它限制了我的文本
  • StreamingTemplateEngine 异常 MissingPropertyException

    如何避免在 Map 中模板缺少参数时出现 MissingPropertyException 并将未找到的值替换为 null import groovy text StreamingTemplateEngine import groovy t
  • 如何获取与我当前所在商店相关的产品所属类别 ID

    我在产品页面上并拥有产品对象 但是当我尝试使用以下方式获取类别 id 时 product gt getCategoryIds or product gt getResource gt getAttribute category ids gt
  • 为什么 Rails 应用程序在底部显示数据库信息?

    我创建了一个博客 每当我添加帖子时 帖子索引页面底部总会显示数据库中的记录列表 home html erb 像这样
  • C# 创建包含多个文件的 ZIP 存档

    我正在尝试创建包含多个文本文件的 ZIP 存档 如下所示 Dictionary
  • 在 Javascript 中本地化字符串

    我目前正在使用 resx文件来管理我的 NET 服务器端资源 我正在处理的应用程序还允许开发人员将 JavaScript 插入各种事件处理程序中以进行客户端验证等 对我来说本地化 JavaScript 消息和字符串的最佳方法是什么 理想情况
  • 拖放区缩略图宽度图像大小

    如何更改上传图像的缩略图大小 我在我的javascript中尝试过thumbnailWidth 350 但是这不会增加缩略图大小 而缩略图只是看起来放大了 如何操作图像缩略图大小 HTML section section