分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

上传图片(photoClip)

发布时间:2023-09-06 01:14责任编辑:傅花花关键词:上传图片

首先我们需要引入4个js包(这4个包总共106.6KB)

<script src="__STATIC__/hammer.min.js" ></script><script src="__STATIC__/iscroll-zoom.min.js"></script><script src="__STATIC__/lrz.all.bundle.js" ></script><script src="__STATIC__/PhotoClip.min.js"></script>

html:

<!--上传图片功能-->
<div id="src_0" class="weui_uploader_input_wrp"> ???<input type="file" id="file" class="upload_img_btn"></div>
<!--预览图片功能-->
<li hidden class="weui_uploader_file upload_img_box_file" id="view" data-id=""><span class="del">×</span></li>
<!--剪裁图片功能-->
<div class="upload_img_box" id="upload_img_box">
???<div class="pic middle" id="clipArea"></div>
???<button type="submit" class="weui_btn vote_detail_btn btn" id="clipBtn">裁剪</button>
</div>

css:

.upload_img_box {width: 100%;min-width: 320px;max-width: 640px;background: #fff;position: fixed;top: 0;bottom: 0;left: 0;right: 0;z-index: 99999;display: none;}.upload_img_box .pic {width: 100%;position: absolute;top: 0;bottom: 1.05rem;left: 0;}.middle {width: 100%;display: flex;display: -webkit-box;display: -moz-box;-webkit-box-pack: center;-moz-box-pack: center;-webkit-box-align: center;-moz-box-align: center;}.upload_img_box .btn {width: 60%;height: .65rem;background: #f8a513;color: #fff;position: absolute;bottom: .2rem;left: 0;right: 0;margin: 0 auto;}button.weui_btn, input.weui_btn {width: 100%;border-width: 0;outline: 0;}.uploadify-button, input[type=file] {background: #33ab07;border-radius: 3px;padding: 10px 0;display: block;width: 100%;text-align: center;color: #fff;font-size: 16px;text-decoration: none;border: none;}.upload_img_btn {position: absolute;top: 0;bottom: 0;left: 0;right: 0;opacity: 0;z-index: 2;}.weui_uploader_input_wrp {position: relative;margin-left: 0.34rem;height: 1.2rem;width: 0.9rem;border: 1px solid #D9D9D9;}.weui_uploader_file {position: relative;margin-left: 0.34rem;height: 1.2rem;width: 0.9rem;background: center center no-repeat;background-size: cover;border: 1px solid #D9D9D9;}.weui_uploader_file .del {width: .2rem;height: .2rem;border-radius: 50%;background: rgba(0,0,0,.5);font-size: .22rem;color: #fff;text-align: center;line-height: .2rem;position: absolute;top: -0.1rem;right: -0.1rem;}

上传图片(photoClip)

原文地址:http://www.cnblogs.com/cczlovexw/p/7602818.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved