不要轻易放弃。学习成长的路上,我们长路漫漫,只因学无止境。学无止境

js图片压缩加裁剪(引入方便)

碧羽墨轩 2018-12-26 17:14:23 144人围观
简介话不多说,先大概讲下效果:用户点击上传图片后,页面显示所上传的图片,并且出现裁剪框和两个预览区域,最后点击裁剪按钮保存裁剪的图片到服务器上。可以利用鼠标拖拉,产生裁剪框,可以改变裁剪框大小,点击确定,返回裁剪数据。

1.先准备一个图片上传的form(隐藏起来)

<form id="uploadForm" action="提交地址" style="display: none;" >
            <input  type="file" name="pic" id="picaa" >
</form>

2.引入jquery

<script src="js/jquery-1.8.3.min.js"></script>

3.引入插件(插件内引入了js,注意路径是否正确)

<script src="uplodeThumb.js"></script>

4.点击调用(不设置,默认jQuery('#picaa').attr('data','headimgs');)

<span  id="headimgs" onclick="jQuery('#picaa').attr('data','headimgs');jQuery('#picaa').click();">点击上传证件照</span>

如果设置(<span  id="logo" onclick="jQuery('#picaa').attr('data','logo');jQuery('#picaa').click();">点击上传证件照</span>)

5.隐藏域

<input type="hidden" name="img" id="headimgsInput" value="">(默认)

如果设置(<input type="hidden" name="logo" id="logoInput" value="">)

6.实现效果

sss.png

注:本文转载自碧羽墨轩,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如有侵权行为,请联系我们,我们会及时删除。

上一篇:php实现将文字与英文互相转换

下一篇:把数组中的数据根据 type(分组)分开处理

文章评论