ajaxUpload
/
index.html

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

	<style>
		#image-box-b {
			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;">
		<button id="jbupload-btn" style="padding: 10px 20px;">单图上传</button>
		<div id="image-box-j">
	</div>

	</div>

	</div>
</div>

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

	$(document).ready(function() {
		$("#bupload-btn").on("click", function() {
			new BUpload({
				src:'imgFile',
				upload_url : "php/default/upload_json.php",
				list_url : "php/default/file_manager_json.php",	//图片列表数据获取url
				search_url : "php/default/image_search_json.php",	//图片搜索页面url
				grap_url : "php/default/image_grap_json.php", //搜索网络图片的抓取url
				max_filesize : 1024,
				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);
				}
			});

		});

		$("#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
				search_url : "php/qiniu/image_search_json.php",	//图片搜索页面url
				grap_url : "php/qiniu/image_grap_json.php", //搜索网络图片的抓取url
				max_filesize : 1024,
				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/default/upload_json.php",
			src : "imgFile",
			datas : [
				'http://ovsekfapp.bkt.clouddn.com/image-15089178398221.jpg',
				'http://ovsekfapp.bkt.clouddn.com/image-15089178396084.jpg',
				'http://ovsekfapp.bkt.clouddn.com/image-15089178403045.jpg',
				'http://ovsekfapp.bkt.clouddn.com/image-15089178408275.jpg',
				'http://ovsekfapp.bkt.clouddn.com/image-15089178425421.jpg'
			],
			image_container : "image-box-j",
			onSuccess : function (url) {
				$("#image-box-j").find("img").jpreview();
			}
		});

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

</script>

</body>
</html>