Dropify.js图片宽高自适应的方法


Posted in Javascript onNovember 27, 2017

最近发现了一个比较好用的图片上传插件, Dropify.js ,具体使用方法挺简单的,这里就不介绍了。

但是由于我希望图片样式是宽度固定,高度自适应的,而这个插件好像无法自适应高度,只能在固定的区域内显示图片,看的非常不舒服。

Dropify.js图片宽高自适应的方法

看了一下插件的源码,发现可以在预览图片时,调整图片高度。需要修改css和js,下面贴下代码。

<!-- 插件容器 -->
<div class="blog-title-img clear">
  <input type="file" class="dropify" data-max-file-size-preview="3M" data-allowed-file-extensions="jpeg jpg png gif bmp">
</div>

css可以写在自己的css文件中:

/*这个是图片的容器*/
.title-img{ 
  width:660px;
  margin:40px auto 0;
}

/*下面是需要修改的样式*/
.dropify-wrapper .dropify-preview{
  padding:0 !important;
}
.dropify-wrapper .dropify-preview .dropify-render img{
  width:100%;
  height:auto;
  -webkit-transform:none;
  transform:none;
  top:0;
}
.dropify-wrapper{
  border:0;
  background-color:#f7f8f9;
  padding:0!important;
}

下面是js需要修改的部分,打开源码文件,找到Dropify.prototype.setPreview方法

Dropify.prototype.setPreview = function(previewable, src)
{
  this.wrapper.removeClass('has-error').addClass('has-preview');
  this.filenameWrapper.children('.dropify-filename-inner').html(this.file.name);
  var render = this.preview.children('.dropify-render');
  this.hideLoader();
  if (previewable === true) {

    // 存一下wrapper,wrapper.width()是css中自己设置的固定的宽,我设置的是660px
    var wrapper = this.wrapper; 

    // 首次上传时,获取图片真实的宽和高,按比例计算显示时图片的高
    var height = (wrapper.width() / this.file.width) * this.file.height; 

    // 如果初始化时使用默认图片,则file.height不存在,需要用另一种方式获取图片真实的宽和高
    if(!height){
        // 新建一个image,将图片路径赋给新的image
      var i = new Image(), src = Comm.getRoot() + src;
        i.src = src;

        // 这里需要等图片加载完,才能获取到准确的宽和高。
        $(i).load(function(){

          // 计算方式和上面相同
          height = (wrapper.width() / i.width) * i.height;
          wrapper.height(height);
        });
    } else {
      wrapper.height(height);
    }
    
    var imgTag = $('<img />').attr('src', src);
    
    if (this.settings.height) {
      imgTag.css("max-height", this.settings.height);
    }
    imgTag.appendTo(render);
  } else {
    $('<i />').attr('class', 'dropify-font-file').appendTo(render);
    $('<span class="dropify-extension" />').html(this.getFileType()).appendTo(render);
  }
  this.preview.fadeIn();
};

改造完成后,不管上传还是默认图片,都可以宽度固定,高度自适应了。改造完成后效果:

Dropify.js图片宽高自适应的方法

改造完成

Dropify.js图片宽高自适应的方法

改造完成

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js可突破windows弹退效果代码
Aug 09 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
Mar 21 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
js拼接html字符串的注意事项
Oct 13 Javascript
详解微信小程序 页面跳转 传递参数
Dec 08 Javascript
javascript 封装Date日期类实例详解
May 28 Javascript
Vue.js组件通信的几种姿势
Oct 23 Javascript
简单了解JavaScript中常见的反模式
Jun 21 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
Dec 25 Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 Javascript
关于Vue Router的10条高级技巧总结
May 06 Vue.js
jfinal与bootstrap的登出实战详解
Nov 27 #Javascript
JQuery 又谈ajax局部刷新
Nov 27 #jQuery
Bootstrap实现翻页效果
Nov 27 #Javascript
jQuery Datatables表头不对齐的解决办法
Nov 27 #jQuery
JS使用贪心算法解决找零问题示例
Nov 27 #Javascript
Vue.js实现分页查询功能
Nov 15 #Javascript
JS实现网页抢购功能(触发,终止脚本)
Nov 27 #Javascript
You might like
php下通过POST还是GET来传值
2008/06/05 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
PHP7变量处理机制修改
2021/03/09 PHP
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
用js生产批量批处理执行命令
2008/07/28 Javascript
JQuery 选择和过滤方法代码总结
2010/11/19 Javascript
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
[02:41]辉夜杯现场一家三口 “我爸玩风行 我玩血魔”
2015/12/27 DOTA
一个基于flask的web应用诞生 用户注册功能开发(5)
2017/04/11 Python
PyQt5每天必学之事件与信号
2018/04/20 Python
windows下cx_Freeze生成Python可执行程序的详细步骤
2018/10/09 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
Django框架使用内置方法实现登录功能详解
2019/06/12 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
new_zeros() pytorch版本的转换方式
2020/02/18 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
如何利用input事件来监听移动端的输入
2016/04/15 HTML / CSS
欧铁通票官方在线销售网站:Eurail.com
2017/10/14 全球购物
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
iHerb中文官网:维生素、保健品和健康产品
2018/11/01 全球购物
编程用JAVA解析XML的方式
2013/07/07 面试题
应用艺术专业个人的自我评价
2014/01/03 职场文书
初中三好学生事迹材料
2014/01/13 职场文书
设备动力科岗位职责范本
2014/02/23 职场文书
个人剖析材料及整改措施
2014/10/07 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
2014年英语教学工作总结
2014/12/17 职场文书
导游词之山东孔庙
2019/11/04 职场文书
CSS完成视差滚动效果
2021/04/27 HTML / CSS
实例讲解Python中sys.argv[]的用法
2021/06/03 Python