<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>WebUploader+裁剪图片</title>
<link rel="stylesheet" href="amaze1.0.0/amazeui.min.css"/>
<link rel="stylesheet" href="amaze1.0.0/font-awesome.css"/>
<link rel="stylesheet" type="text/css" href="css/webuploader.css" />
<link rel="stylesheet" type="text/css" href="css/cropper.min.css" />
<link rel="stylesheet" type="text/css" href="css/app.css" />
</head>
<body>
<header data-am-widget="header" class="am-header am-header-default am-header-fixed zn-header-bg">
<h1 class="am-header-title">上傳圖片</h1>
</header>
<div class="zn-uploadphotos-head am-text-sm">
<p>照片沖印（尺寸：6寸(4R)，相紙：柯达皇家光面）需上傳<span id="upload_limit" data-value="50">50</span>張</p>
</div>
<form class="am-form zn-back-bgf0f2" id="product_form" action="" method="post">
<div class="zn-uploadphotos zn-back-bgf0f2">
<div id="container" data-id="8">
<div id="uploader">
<div class="btns">
<div id="filePicker2"></div>
<div class="uploadBtn">开始上传</div>
</div>
<div class="queueList">
<div id="dndArea" class="placeholder">
<div id="filePicker"></div>
</div>
<ul id="filelist" class="filelist zn-uploadphotos-list am-gallery am-avg-sm-2 am-avg-md-4 am-avg-lg-8 am-gallery-default am-no-layout">
</ul>
</div>
<div class="statusBar">
<div class="progress">
<span class="text">0%</span>
<span class="percentage"></span>
</div>
<div class="info"></div>
</div>
</div>
</div>
</div>
<div data-am-widget="navbar" class="am-navbar am-no-layout zn-com-ubtn am-text-center am-text-sm am-g" >
<input type="hidden" name="f_id" value="8" />
<button class="am-btn am-u-sm-6 am-btn-default" data-am-offcanvas="{target: '#zn-uploadphotos-uploaded'}"type="button">已上传图片</button>
<button class="am-btn am-u-sm-6 am-btn-danger" type="button" id="product_submit">提交</button>
</div>
</form>
<div class="am-popup zn-photodiy-popup"tabindex="-1" id="zn-photodiy-edit">
<div class="am-popup-inner">
<div class="am-popup-hd">
<h4 class="am-popup-title">照片编辑</h4>
<span data-am-modal-close class="am-close" data-am-modal-cancel>×</span>
</div>
<div class="am-popup-bd">
<div class="am-g">
<div class="am-u-sm-12 am-u-md-7 am-u-lg-7 ">
<div class="img-container">
<img src="" id="image_cropper" alt="Picture">
</div>
<button class="am-btn am-btn-default zn-photodiy-editma" data-method="reset" type="button" title="Reset">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("reset")">还原</span>
</button>
</div>
<div class="am-u-sm-12 am-u-md-5 am-u-lg-5">
<h5 class="zn-photodiy-edittle">冲印范围设置</h5>
<label class="am-radio zn-photodiy-editradio">
<input type="radio" name="radio1" value="裁剪照片" data-am-ucheck checked>
<b>裁剪照片</b> 虚线框内为实际冲印范围
</label>
<p>
<button class="am-btn zn-photodiy-editbtn" data-method="rotate" data-option="-90" type="button">
<span class="docs-tooltip">
<span class="fa fa-undo" aria-hidden="true"></span>
</span>
</button>
<button class="am-btn zn-photodiy-editbtn" data-method="rotate" data-option="90" type="button" title="Rotate Right">
<span class="docs-tooltip" >
<span class="fa fa-repeat" aria-hidden="true"></span>
</span>
</button>
<button class="am-btn zn-photodiy-editbtn" data-method="zoom" data-option="-0.1" type="button" title="Zoom Out">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("zoom", -0.1)">
<span class="fa fa-search-minus" aria-hidden="true"></span>
</span>
</button>
<button class="am-btn zn-photodiy-editbtn" data-method="zoom" data-option="0.1" type="button" title="Zoom In">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("zoom", 0.1)">
<span class="fa fa-search-plus" aria-hidden="true"></span>
</span>
</button>
</p>
<label class="am-radio zn-photodiy-editradio">
<input type="radio" name="radio1" value="留白边" data-am-ucheck>
<b>留白边</b> 不裁切照片，虚线内如果有白边，实际冲印后也会有白边
</label>
<h5 class="zn-photodiy-edittle">选择冲印张数</h5>
<div class="am-form-group zn-com-count">
<span class="zn_importimg_dealinp zn-com-sub" id="diy_num_dec" onclick="diyNum.decDiyNum()">-</span>
<input type="text" value="1" class="zn-com-num" id="diy_num" onblur="diyNum.setDiyNum(this.value)">
<span class="zn_importimg_dealinp zn-com-add" id="diy_num_inc" onclick="diyNum.incDiyNum()">+</span>
</div>
<p class="am-pagination-right">
<button type="button" class="am-btn am-btn-warning am-radius" data-am-modal-close data-am-modal-cancel id="cancel">取消</button>
<button type="button" class="am-btn am-btn-danger am-radius" data-am-modal-close data-am-modal-confirm id="confirm">确定</button>
</p>
</div>
</div>
<div class="zn-photodiy-edittext"><span class="fa fa-exclamation-triangle" aria-hidden="true"></span>请点击照片拖动照片选择冲印范围，虚线框外的图像将被裁减删除</div>
</div>
</div>
</div>
<div id="zn-uploadphotos-uploaded" class="am-offcanvas zn-uploadphotos-uploaded">
<div class="am-offcanvas-bar am-offcanvas-bar-flip">
<div class="am-offcanvas-content">
<h2><i class="fa fa-file-image-o" aria-hidden="true"></i>已上传的照片列表</h2>
<ul id="uploaded_list" class="zn-uploadphotos-uploadedlist am-gallery am-no-layout">
</ul>
</div>
</div>
</div>
<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="themes/amaze1.0.0/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="amaze1.0.0/amazeui.min.js"></script>
<script type="text/javascript" src="amaze1.0.0/amazeui.dialog.min.js"></script>
<script type="text/javascript" src="js/webuploader.min.js"></script>
<script type="text/javascript" src="js/cropper.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript">
var config = {
// 安�
webuploader+cropper图片裁剪，旋转，上传，PC和H5通用
4星 · 超过85%的资源 需积分: 43 63 浏览量
2018-12-04
17:08:58
上传
评论 2
收藏 974KB ZIP 举报 
webuploader+cropper图片裁剪，旋转，上传，PC和H5通用.zip （32个子文件） 
image-upload 
index.html 9KB uploads 
edit-img.png 96KB
img1.jpg 10KB img2.jpg 33KB images bg.png 3KB progress.png 1KB icons.png 3KB image.png 2KB success.png 2KB js 
cropper.min.js 29KB
expressInstall.swf 756B app.js 32KB Uploader.swf 140KB jquery-1.7.2.min.js 93KB webuploader.min.js 70KB fonts fontawesome-webfont.woff2 75KB fontawesome-webfont.eot 75KB FontAwesome.otf 122KB fontawesome-webfont.woff 88KB fontawesome-webfont.ttf 149KB amaze1.0.0 amazeui.ie8polyfill.min.js 34KB admin.css 5KB amazeui.min.css 249KB address.min.js 347KB amazeui.address.min.css 2KB font-awesome.css 37KB amazeui.min.js 206KB amazeui.dialog.min.js 4KB iscroll.min.js 32KB css cropper.min.css 4KB webuploader.css 515B app.css 14KB资源评论
hnnyzj882019-05-31还不错，对我目前有点帮助
