我们做内容管理系统后台,经常会用到一个功能就是图片裁剪并上传. 这个功能需要浏览器安装flash, 我把我项目当中经常用到一个图片裁剪上传的插件分享给大家.需要用到的可以参考,或者是直接留言要源码都可以的.
图片上传的代码,选择图片后调用uploadfile 方法,传递需要裁剪后的图片大小
<a href="javascript:void(0);" id="upCarImg" class="a-upload" style="width: 80px;" onclick="uploadfile(this,328,200)">选择图片</a>
<span class="size_pic" style="width: 250px;">(图片最佳尺寸为：328*200)</span>
点击后显示上面的选择图片框,选择图片即可
页面中加入以下js
<script type="text/javascript">
//点击上传图片
function uploadfile(obj,width,heigth) {
var uploadurl = "{:U('Compet/upload_pic',true,true,true)}?sessionId=123456&time=" + Math.floor((Math.random() * 100) + 1);
cropping( uploadurl, 'file', width, heigth,obj);
}
//图片上传返回
function flashCallBack1(elm, data, formName) {
var json_value = jQuery.parseJSON(data);
switch(json_value.code) {
case '000':
$("#imgBlock").html("");
$("#imgBlock").html('<img src="' + json_value.imgsrc + '" name="carImg" width="328" height="200" id="carImg">');
$("#upImg").val(json_value.url); //入库的路径
break;
case '102':
alert(json_value.msg);
break;
}
}
</script>
flash上传还有以下几个js和css,这几个js我就不一一写出来了.有需要的直接留言,索要源码即可
<link rel="stylesheet" type="text/css" href="/cropping/history/history.css" />
<script type="text/javascript" src="/cropping/history/history.js"></script>
<!-- END Browser History required section -->
<script type="text/javascript" src="/cropping/swfobject.js"></script>
<script type="text/javascript" src="/cropping/yappam.fileupload.js"></script>
