53 views

php+jquery+ajax无刷新图片上传和剪切,模拟flash head上传示例

By | 2019年8月6日

还不熟练,所以今天我使用Ajax来做一个图像上传和剪切的例子。个人感觉很好,现在分享吧。我使用thinkhp的框架,首先分享使用的插件。演示下载。

ajaxfileupload.js ajax上传文件的插件。

jquery.imgareaselect.min.js 图片裁切插件

jquery.min.js jquery框架文件

先写好需要的样式

wKiom1MmhELhpdruAAA-joD8gyU102.jpg

wKioL1MmhEaRIzMPAAIU3q4ae0s503.jpg

对应的html代码

<input type=”text” name=”” id=”pics” /><a href=”#” class=”OpenDialog”>上传图片</a>
<div class=”dialog” style=”position: fixed;bottom:200px;left:50px;background: #ffffff;width:600px;height:320px;z-index:2000″>
<div class=”span12″ style=”padding:0 20px;”>
<div class=”jc-demo-box”>
<img src=”./images/pics_default.png” id=”target” alt=”图片预览” style=”float:left;width:320px;height:240px;margin-right:20px;”/>
<div id=”preview-pane” style=”float:left;”>
<div class=”preview-container” style=”margin-bottom: 10px;”>
<img src=”./images/pics_default.png” class=”jcrop-preview” alt=”Preview” />
</div>
<form action=”__URL__/uploadsImg” class=”ajaxPic” enctype=”multipart/form-data” method=”post”>
<input type=”button” value=”选择图片” onclick=”document.all.tt.click()” class=”btn btn-info”/>
<INPUT TYPE=”file” name=”tt” style=”display:none” id=”tt”>
<input type=”submit” value=”提交上传” class=”btn btn-danger”/>
</form>
</div>
<div class=”clearfix”></div>
</div>
</div>
<form action=”__URL__/cutImg” method=”post” class=”ajaxCut” style=”padding-top:10px;padd-bottom:20px;”>
<input type=”hidden” id=”x” name=”x” />
<input type=”hidden” id=”y” name=”y” />
<input type=”hidden” id=”x1″ name=”x1″ />
<input type=”hidden” id=”y1″ name=”y1″ />
<input type=”hidden” id=”w” name=”w” />
<input type=”hidden” id=”h” name=”h” />
<input type=”hidden” name=”filename” value=””>
<input type=”submit” value=”完成裁切” class=”btn btn-primary”/>
<input type=”button” value=”取消” class=”btn btn-default closeDialog”/>
</form>
</div>

样式css

div.clearfix{clear:both;}
div.dialog{display:none;}
div.modal-backdrop{position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 1030;background-color: #000;opacity: 0.5;}
.jcrop-holder #preview-pane {
display: block;
position: absolute;
z-index: 2000;
top: 10px;
right: -240px;
padding: 6px;
background-color: white;
}
#preview-pane .preview-container {
width: 160px;
height: 120px;
overflow: hidden;
}
div.jcrop-holder{
width:400px;
}

ok,然后,第一步是实现子弹窗口的效果。点击上传按钮,弹出class=dialog上传图片的分区。

$(‘.OpenDialog’).click(function(){
$(‘div.dialog’).show();
$(‘<div class=”modal-backdrop”></div>’).appendTo(‘body’);
return false;
})
第二步是点击上传文件就上传并且无刷新替换到预览区域的图片地址

$(‘form.ajaxPic’).submit(function(){
$.ajaxFileUpload({
url: $(this).attr(‘action’),
secureuri: false,
fileElementId: ‘tt’,
dataType: ‘json’,
success: function(ajax){
var img1 = $(‘div.jc-demo-box’).find(‘img’);
var $pimg = $(‘.jcrop-preview’);
var $pcnt = $(‘#preview-pane .preview-container’), xsize = $pcnt.width(), ysize = $pcnt.height();
var $preview = $(‘#preview-pane’);
img1.attr(‘src’, ajax.data);
$(‘input[type=hidden][name=filename]’).val(ajax.data);
$(‘<img/>’).attr(‘src’, ajax.data).load(function(){
$(‘#target’).css({
width: this.width,
height: this.height,
})
$pimg.css({
width: this.width,
height: this.height,
})
})
$(‘#target’).imgAreaSelect({
aspectRatio: ‘160:120’,
onSelectChange: preview
});
function preview(img, selection){
var scaleX = 160 / selection.width;
var scaleY = 120 / selection.height;
var width = $(‘#target’).width();
var height = $(‘#target’).height();
$(‘.jcrop-preview’).css({
width: Math.round(scaleX * width) + ‘px’,
height: Math.round(scaleY * height) + ‘px’,
marginLeft: ‘-‘ + Math.round(scaleX * selection.x1) + ‘px’,
marginTop: ‘-‘ + Math.round(scaleY * selection.y1) + ‘px’
});
$(‘#x’).val(selection.x1);
$(‘#y’).val(selection.y1);
$(‘#x1’).val(selection.x2);
$(‘#y1’).val(selection.y2);
$(‘#w’).val(selection.width);
$(‘#h’).val(selection.height);
}
}
})
return false;
})

这里使用了用于Ajax上载的插件。上载成功后,将加载裁剪器。如无规定,可自由切割,切割面积的比例为“160:120”。

最后,单击以完成剪切后,弹出框将隐藏,地址将被带回。

//ajax上传裁切
$(‘form.ajaxCut’).submit(function(){
var thumbnail = $(‘.img-thumbnail’);
var dialog = $(‘.dialog’);
$.ajax({
url: $(this).attr(‘action’),
type: ‘post’,
data: $(this).serialize(),
dataType: ‘json’,
success: function(ajax){
thumbnail.attr(‘src’, ajax.data);
$(‘#pics’).val(ajax.data);
$(‘input[type=button].closeDialog’).trigger(‘click’);
}
})
return false;
})

图片上传对应的php代码

function uploadsImg(){
import(‘ORG.Net.UploadFile’);
$upload = new UploadFile();// 实例化上传类
$upload->maxSize = 3145728 ;// 设置附件上传大小
$upload->allowExts = array(‘jpg’, ‘gif’, ‘png’, ‘jpeg’);// 设置附件上传类型
$savePath=’./uploads/’.date(‘Ymd’).’/’;
if (!file_exists($savePath)){
if (!mkdir($savePath)){
$this->ajaxReturn(‘创建文件夹’.$savePath.’失败,请检查uploads文件夹权限是否为777′);
}
}
$upload->savePath =$savePath; // 设置附件上传目录
if(!$upload->upload()) {// 上传错误提示错误信息
$info=$upload->getErrorMsg();
}else{// 上传成功 获取上传文件信息
$info = $upload->getUploadFileInfo();
}
if (!is_array($info)){
$this->ajaxReturn($info);
}else{
import(‘ORG.Net.Image’);
$img=new Image($info[0][‘savepath’].$info[0][‘savename’],1,’320′,’240′,$info[0][‘savepath’].’s_’.$info[0][‘savename’]);
$img->outimage();
$picRealPath=J(__ROOT__.’/’.$img->getImageName());
$this->ajaxReturn($picRealPath);
}
}

这里是使用thinkhp上传自己的图片,但是上传后,为了不让太大、太小或不规则的图形影响到剪切效果,所以要适当的剪切图片。然后将图像上传的地址返回到Ajax

图片裁切代码

function cutImg(){
$dfile=’./uploads/’.date(‘Ymd’).’/’;
if(!file_exists($dfile)){
if (!mkdir($dfile)){
$this->ajaxReturn(‘创建文件夹’.$dfile.’失败,请检查uploads文件夹权限是否为777′);
}
}
$sfile=$_REQUEST[‘filename’];
$sfile=str_replace(__ROOT__, ‘.’, $sfile);
$file_tmp=explode(‘/’, $sfile);
$file=$file_tmp[count($file_tmp)-1];
$x=$_REQUEST[‘x’];
$y=$_REQUEST[‘y’];
$x1=$_REQUEST[‘x1’];
$y1=$_REQUEST[‘y1’];
$width=$_REQUEST[‘w’];
$height=$_REQUEST[‘h’];
import(‘ORG.Net.Image’);
$value1=$x.’,’.$y;
$value2=$width.’,’.$height;
$dfile=$dfile.’small_’.$file;
$img=new Image($sfile,2,$value1,$value2,$dfile);
$img->outimage();
$filename=$img->getImageName();
$filename=J(__ROOT__.’/’.$filename);
$this->ajaxReturn($filename);
}

本文编辑于2019年08月6日,属于云漫网络原创内容,由特约作者(CDN行业资深从事人)首发在win-man.com,云漫网络每日更新发布行业原创内容,转载请注明出处。否则属侵权行为一定追究责任。

本文转载于:http://win-man.com
本文关键词:cdn网站加速,视频cdn加速,cdn 动态加速
作者:CDN行业资深从事人

发表评论

电子邮件地址不会被公开。 必填项已用*标注