Uploader/demo2.html at master · cztflove/Uploader · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="wap-font-scale" content="no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Demo-剪裁模式</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="css/upload.css" rel="stylesheet">
<style type="text/css">
	.main{margin:0 auto;width:800px;}
	.upload-preview-wrapper{margin:0;padding:0;min-height:300px;border:1px solid #ddd;list-style:none;}
	.upload-preview-wrapper:after{content:"";display:block;height:0;clear:both;}
	.upload-preview-wrapper li{margin:10px;width:100px;height:100px;background-size:cover;background-position:center center;border:1px solid #eee;float:left;}
	.upload-option-wrapper{padding:15px 10px;background-color:#eee;text-align:right;}
	.btn{display:inline-block;margin-left:10px;padding:8px 15px;color:#fff;background-color:#0d76c0;cursor:pointer;}
	.btn:hover{background-color:#0c6cb0;}
</style>
</head>
<body>
	<div class="main">
		<ul class="upload-preview-wrapper">
		</ul>
		<div class="upload-option-wrapper">
			<div class="btn" id="filePicker">选择文件</div>
			<div class="btn" id="submit">上传</div>
		</div>
	</div>
	<script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
    <script src="js/webuploader.js"></script>
    <script src="js/hammer.min.js"></script>
    <script src="js/iscroll-zoom.js"></script>
    <script src="js/lrz.all.bundle.js"></script>
    <script src="js/photoClip.min.js"></script>
    <script src="js/uploader.js"></script>
    <script type="text/javascript">
    	window.onload = function(){
    		myUploader = new uploader({
    			auto: false,
	    		isCrop: true,
	    		onclipFinish: function(src){
	    			var dom  = '<li style="background-image:url('+src+')"></li>';
	    			$('.upload-preview-wrapper').append(dom);
	    		}
    		});
    	};
    </script>
</body>
</html>