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 闭包究竟是什么
Apr 12 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
Nov 12 Javascript
浅谈js的setInterval事件
Dec 05 Javascript
jQuery中:focus选择器用法实例
Dec 30 Javascript
纯js实现仿QQ邮箱弹出确认框
Apr 29 Javascript
jQuery获取多种input值的简单实现方法
Jun 20 Javascript
微信小程序 页面传参实例详解
Nov 16 Javascript
浅谈js中几种实用的跨域方法原理详解
Dec 02 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
Vue的props父传子的示例代码
May 20 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
Jul 28 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
PHP 远程文件管理,可以给表格排序,遍历目录,时间排序
2009/08/07 PHP
ThinkPHP3.1新特性之查询条件预处理简介
2014/06/19 PHP
php上传图片客户端和服务器端实现方法
2015/03/30 PHP
php将日期格式转换成xx天前的格式
2015/04/16 PHP
PHP实现的贪婪算法实例
2017/10/17 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
网上抓的一个特效
2007/05/11 Javascript
firefox插件Firebug的使用教程
2010/01/02 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
2010/11/16 Javascript
jQuery操作input type=radio的实现代码
2012/06/14 Javascript
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
jQuery中parent()方法用法实例
2015/01/07 Javascript
JavaScript基于setTimeout实现计数的方法
2015/05/08 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
vue print.js打印支持Echarts图表操作
2020/11/13 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
[02:32]DOTA2亚洲邀请赛 C9战队出场宣传片
2015/02/07 DOTA
python批量生成本地ip地址的方法
2015/03/23 Python
python连接数据库的方法
2017/10/19 Python
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
python实现按行分割文件
2019/07/22 Python
python rsa实现数据加密和解密、签名加密和验签功能
2019/09/18 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
解决Python中导入自己写的类,被划红线,但不影响执行的问题
2020/07/13 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
Python操作PostgreSql数据库的方法(基本的增删改查)
2020/12/29 Python
内容编辑个人求职信
2013/12/10 职场文书
物流仓储计划书
2014/01/10 职场文书
挂科检讨书范文
2014/02/20 职场文书
新春联欢会主持词
2014/03/24 职场文书
小组口号大全
2014/06/09 职场文书
小学秋季运动会报道稿
2014/09/30 职场文书
教师工作总结范文2014
2014/11/10 职场文书
2015年端午节活动方案
2015/05/05 职场文书
python爬取某网站原图作为壁纸
2021/06/02 Python