普通的单图头像上传预览效果,比较轻巧
视图的显示,用透明度来隐藏原本点击的input=file,展示自己想要的样式
<div style="margin-top:10px;"><button>选择图片</button> 建议尺寸:640*320,支持jpg/png/gif格式,大小不超过200K
<div id="repeat_file" style="width:60px;height:25px;overflow:hidden;position:relative;top:-20px;opacity:0;filter: Alpha(Opacity=0);">
<input type="file" style="" class="absmiddle" name="uploadedfile" id="uploadedfile"><input type=hidden name=Maxsize value=16384000>
</div>
</div>
js方面,插件有小bug,加了小修改
$(function(){
var count = -1;
$("#repeat_file").on("change", "#uploadedfile", function (){
count++;
// $("#upload_status").html("图片上传中....");
ajaxFileUpload();
$("#uploadedfile").replaceWith("<input type='file' id='uploadedfile' class='absmiddle' name='uploadedfile' title=" + count + "' />");//重新生成新的
});
function ajaxFileUpload(){
$.ajaxFileUpload({
url:'<?= Yii::app()->createUrl("user/dealerUser/loadImage");?>', //处理上传文件的程序文件,见下面的php文件代码
secureuri:false,
fileElementId:'uploadedfile',
dataType:'json',
success:function(data){
if(data.msg)
{
alert(data.msg);
}
else
{
$('#mimg').attr('src','dealer/uploads/'+data.file_url).show();
$("#uimg").attr('value',data.file_url);
// $("#upload_status").html(data.file_url);
}
}
});
return false;
}
})
controller处理业务
public function actionLoadImage()
{
$res["msg"] = "";//提示信息
if(empty($_FILES) || $_FILES['uploadedfile']['error'] == 1)
{
$res['msg'] = "图片大小不能超过35K,请重新上传";
}
else
{
if(file_exists($_FILES['uploadedfile']['tmp_name']))
{
$imageName = $_FILES['uploadedfile']['name'];
$ext = substr($imageName, strrpos($imageName, '.')+1);
// $saveName = time() . ".".$ext;
if(in_array(strtolower($ext), array('jpg','jpeg')))
{
if($_FILES["uploadedfile"]["size"] / 1024 <= 35)
{
if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'],'dealer/uploads/'.$imageName)){
$res['file_url'] = $imageName;
}
else
{
$res["msg"] = "文件上传失败,请重试";
}
}
else
{
$res['msg'] = "图片大小不能超过35K,请重新上传";
}
}
else
{
$res["msg"] = "图片格式不对,请上传jpg/jpeg格式";
}
}
else
{
$res["msg"] = "请选择要上传的文件";
}
}
$res['msg'] = iconv('GB2312', 'UTF-8', $res['msg']);
echo json_encode($res);
exit();
}