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 相关文章推荐
Javascript实现的分页函数
Dec 22 Javascript
JS字符串函数扩展代码
Sep 13 Javascript
javascript父、子页面交互技巧总结
Aug 08 Javascript
jQuery实现平滑滚动到指定锚点的方法
Mar 20 Javascript
javascript实现tab响应式切换特效
Jan 29 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
js放大镜放大购物图片效果
Jan 18 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
Feb 07 Javascript
webpack3之loader全解析
Oct 26 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
Dec 27 Javascript
基于layPage插件实现两种分页方式浅析
Jul 27 Javascript
react中hook介绍以及使用教程
Dec 11 Javascript
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
在“咖啡之国”感受咖啡文化
2021/03/03 咖啡文化
php chr() ord()中文截取乱码问题解决方法
2008/09/08 PHP
php计算数组不为空元素个数的方法
2014/01/27 PHP
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
php中获取主机名、协议及IP地址的方法
2014/11/18 PHP
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
基于jQuery替换table中的内容并显示进度条的代码
2011/08/02 Javascript
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
jQuery中slice()方法用法实例
2015/01/07 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
最简单的vue消息提示全局组件的方法
2019/06/16 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
[03:14]DOTA2斧王 英雄基础教程
2013/11/26 DOTA
[57:55]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第二场 12.12
2020/12/16 DOTA
Python 抓取动态网页内容方案详解
2014/12/25 Python
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
在MAC上搭建python数据分析开发环境
2016/01/26 Python
Django模板Templates使用方法详解
2019/07/19 Python
详解python中的index函数用法
2019/08/06 Python
使用python-opencv读取视频,计算视频总帧数及FPS的实现
2019/12/10 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
波兰数码相机及配件网上商店: Cyfrowe.pl
2017/06/19 全球购物
进步之星获奖感言
2014/02/22 职场文书
员工工作表现评语
2014/04/26 职场文书
医院安全生产月活动总结
2014/07/05 职场文书
毕业生实习证明
2014/09/19 职场文书
幼儿园国培研修日志
2015/11/13 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers
一文搞懂php的垃圾回收机制
2021/06/18 PHP