Dropify图片预览上传，加入等比压缩改造，并附Ajax上传base64到后台代码

chenlkissmm

于 2018-06-27 11:48:15 发布

阅读量2.2k

点赞数

本文链接：https://blog.youkuaiyun.com/chenlkissmm/article/details/80826768

版权

本文介绍了如何使用Dropify库实现图片预览上传功能，并对其进行了改造，加入了等比压缩图片的步骤。通过在Dropify.js中设置预览图片的ID，并在图片加载完成后应用等比压缩算法，将压缩后的base64编码通过Ajax上传到后台。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引入图片预览上传js文件

<link href="../../assets/plugins/dropify-master/dist/css/dropify.css" rel="stylesheet">
<script type="text/javascript" charset="utf-8" src="../../assets/plugins/dropify-master/dist/js/dropify.js"></script>

Html主体部分

<!-- 调模态框 -->
<div class="col-6 m-0 p-0 input-group-addon">
	<h2 class="col-12 m-0 p-0">
		<a href="#" data-toggle="modal" data-target="#coverModal"
			title="添加封面" class="col-12 fa fa-spin fa-picture-o"
			style="color: silver;"></a>
	</h2>
</div>
<!-- 隐藏域，接受后台传回来的图片存储地址，方便跟最后的From表单将所有数据一起存储 -->
<div class="card m-0 p-0" id="hiddenarea" style="display: none;"></div>
<!-- 封面Modal