Uploader
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<title>图片上传demo</title>
	<meta charset="utf-8" />

	<style>
		#image-box-b,#image-box-j {
			overflow: hidden;
			zoom: 1;
		}
		.img-box {
			float: left;
			position: relative;
			width: 150px;
			height: 150px;
			zoom: 1;
			overflow: hidden;
			margin: 5px;
		}
	</style>
</head>
<body style="background: #424f63">

<div style="padding:100px;">
	<button id="bupload-btn" style="padding: 10px 20px;">多图上传（本地上传）</button>
	<button id="bupload-btn1" style="padding: 10px 20px;">多图上传（七牛云上传）</button>

	<div id="image-box-b"></div>

	<div style="padding-top: 20px;">

		<div id="image-box-j">
			<a id="jbupload-btn" class="add-img" title="添加图片"></a>
		</div>
	</div>

</div>

<script src="libs/jquery.min.js"></script>
<script src="libs/jpreview.min.js"></script>
<script src="libs/JDialog.min.js"></script>
<script src="bupload/BUpload.js"></script>
<script src="jupload/JUpload.js"></script>
<script>

	$(document).ready(function() {
		$("#bupload-btn").on("click", function() {
			var locker = JDialog.lock();
			new BUpload({
				src:'imgFile',
				upload_url : "php/default/upload_json.php",
				list_url : "php/default/file_manager_json.php",	//图片列表数据获取url
				max_filesize : 4096,
				max_filenum : 10,
				callback : function(data) {

					$.each(data, function(idx, item) {
						$("#image-box-b").append('<span class="img-box"><img src="'+item+'" data-src="'+item+'" /></span>');
					});
					$('#image-box-b').find("img").each(function(idx, ele) {
						$(ele).imageCrop(150, 150);
					});
					$('#image-box-b').find("img").jpreview();
					console.log(data);
				},
				close: function() {
					locker.hide();
				}
			});

		});

		$("#bupload-btn1").on("click", function() {
			new BUpload({
				src:'imgFile',
				upload_url : "php/qiniu/upload_json.php",
				list_url : "php/qiniu/file_manager_json.php",	//图片列表数据获取url
				max_filesize : 4096,
				max_filenum : 10,
				callback : function(data) {
					$.each(data, function(idx, item) {
						$("#image-box-b").append('<span class="img-box"><img src="'+item+'" data-src="'+item+'" /></span>');
					});
					$('#image-box-b').find("img").each(function(idx, ele) {
						$(ele).imageCrop(150, 150);
					});
					$('#image-box-b').find("img").jpreview();
					console.log(data);
				}
			});

		});

		$("#jbupload-btn").JUpload({
			url : "php/qiniu/upload_json.php",
			src : "imgFile",
			datas : [],
			image_container : "image-box-j",
			onSuccess : function (item) {
				$("#image-box-j").find("img").jpreview();
			}
		});

		$("#image-box-j").find("img").jpreview();
	});

</script>

</body>
</html>