头像剪裁/图片上传案例

最新推荐文章于 2022-03-01 10:11:10 发布

金刚大力士

最新推荐文章于 2022-03-01 10:11:10 发布

阅读量511

点赞数

分类专栏： JavaScript基础知识点文章标签：头像裁剪上传 js上传图片

JavaScript基础知识点专栏收录该内容

20 篇文章 0 订阅

订阅专栏

注意：请勿复制源码，需要源码的可以发邮件至2445478193@qq.com

<!DOCTYPE>
<html lang="en">
<head>
	<title>用户头像剪裁</title>
	<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
	<link rel="stylesheet" href="jquery.Jcrop.css">
	<script src="jquery-1.12.4.js"></script>
	<script src="jquery.Jcrop.js"></script>
	<script src="ajaxfileupload.js"></script>
	<link rel="stylesheet" href="main.css" type="text/css" />
	<link rel="stylesheet" href="demos.css" type="text/css" />
	<style type="text/css">

/* Apply these styles only when #preview-pane has
   been placed within the Jcrop widget */
.jcrop-holder #preview-pane {
  display: block;
  position: absolute;
  z-index: 2000;
  top: 10px;
  right: -450px;
  padding: 6px;
  border: 1px rgba(0,0,0,.4) solid;
  background-color: white;

  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;

  -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
}

/* The Javascript code will set the aspect ratio of the crop
   area based on the size of the thumbnail preview,
   specified here */
#preview-pane .preview-container {
  width: 250px;
  height: 170px;
  overflow: hidden;
}

</style>
</head>
<body>
<div class="container">
	<div class="row">
		<div class="span12">
			<div class="jc-demo-box">
				<div class="page-header">
					<h1>头像剪裁</h1>
				</div>
				<img src="images/test.jpeg" id="target" />
				<div id="preview-pane" >
					<div class="preview-container">
						<img src="images/test.jpeg" class="jcrop-preview" style="width: 450px,height:auto;" />
					</div >
					<div style='float:left;display:inline;'>
						<a class='btn_addPic' href="javascript:void(0);">
							<span><EM>+</EM>添加图片</span> 
							<input id="upload_image" type="file" name="upimage" accept="image/*" class = "filePrew"/>
						</a>
					</div>
					<div style='float:right;display:inline;'>
						<a class='btn_addPic' href="javascript:void(0);" onclick='submit()'>
							<span>提交</span> 
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
<script type="text/javascript">
	var global_api = "";
	var boundx ="";//页面图片宽度
	var boundy ="";//页面图片高度
	var tag = false;
	$(function() {

		// Create variables (in this scope) to hold the API and image size
		//创建变量(在这个范围)的API和图像大小
		var jcrop_api,

		// Grab some information about the preview pane
		//获取一些信息预览窗格
		$preview = $('#preview-pane'),
		$pcnt = $('#preview-pane .preview-container'),
		$pimg = $('#preview-pane .preview-container img'),
		xsize = $pcnt.width(),
		ysize = $pcnt.height();

		$('#target').Jcrop({
			boxWidth:200,
      		boxHeight:200,
			onChange: updatePreview,
			onSelect: updatePreview,
			aspectRatio: xsize / ysize
			},function(){
			// Use the API to get the real image size
			//使用API来获得真实的图像大小
			var bounds = this.getBounds();
				boundx = bounds[0];
				boundy = bounds[1];
			// Store the API in the jcrop_api variable
			//jcrop_api变量中存储API
			jcrop_api = this;
			// Move the preview into the jcrop container for css positioning
			//预览进入jcrop容器css定位
			$preview.appendTo(jcrop_api.ui.holder);
		});
		function updatePreview(c){
			if (parseInt(c.w) > 0)
			global_api=c;
			{
				var rx = xsize / c.w;
				var ry = ysize / c.h;
				$pimg.css({
					width: Math.round(rx * boundx) + 'px',
					height: Math.round(ry * boundy) + 'px',
					marginLeft: '-' + Math.round(rx * c.x) + 'px',
					marginTop: '-' + Math.round(ry * c.y) + 'px'
				});
			}
		};
		//=======选择图片回显===============
		$('#upload_image').change(function(event) {
		// 根据这个 <input> 获取文件的 HTML5 js 对象
			var files = event.target.files, file; 
			if (files && files.length > 0) {
				// 获取目前上传的文件
				file = files[0];
				// 下面是关键的关键，通过这个 file 对象生成一个可用的图像 URL
				// 获取 window 的 URL 工具
				var URL = window.URL || window.webkitURL;
				// 通过 file 生成目标 url
				var imgURL = URL.createObjectURL(file);
				// 用这个 URL 产生一个 <img> 将其显示出来
				$('.jcrop-holder img').attr('src', imgURL);
					$('.preview-container img').attr('src', imgURL);
				}
		});
		//=============是否选择了本地图片==================
		$("#upload_image").change(function(){
			tag=true;
		});
	});
	//========================================================
	//======图片保存===========
	function submit(){
		if(tag&&global_api != ""){
			ajaxFileUpload();
		}else{
			alert('你是不是什么事情都没干？');
		}
	}
	// ajax文件上传
	function ajaxFileUpload() {
		$.ajaxFileUpload({
			url: 'uploadphoto', //用于文件上传的服务器端请求地址
			secureuri: false, //一般设置为false
			fileElementId: 'upload_image', //文件上传空间的id属性
			dataType: 'json', //返回值类型 一般设置为json
			data:{x:global_api.x,y:global_api.y,w:global_api.w,h:global_api.h,pw:boundx,ph:boundy,unid:'test'}, //一同上传的数据 
			success: function (data){ //服务器成功响应处理函数
				if(data.result){
					alert('成功');
				}else{
					alert('失败');
				}
				window.location.reload();//刷新当前页面
			}
		});
	}

</script>
</html>

所需文件

金刚大力士

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
头像剪裁/图片上传案例

注意：请勿复制源码，需要源码的可以发邮件至2445478193@qq.com&lt;!DOCTYPE&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;title&gt;用户头像剪裁&lt;/title&gt; &lt;meta http-equiv="Content-type" content="text/html;
复制链接

扫一扫

专栏目录