表单提交,前端html:
<img id="avatar" style="width: 220px;height: 230px;" alt="image" src="__AVATAR__/boy.png"/>
<input id="image" name="image" type="file" style="display: none">
<script>
/**上传头像**/
$('#avatar').click(function () {
$("#image").trigger('click');
});
$('#image').on('change', function () {
var imgdate = $(this).get(0);
var showing = document.getElementById('avatar');
if (imgdate.files && imgdate.files[0]) {
showing.src = window.URL.createObjectURL(imgdate.files[0]);
}
});
</script>
后台接收:
<?php
public function after_write()
{
if(!empty(Request::instance()->file('image')) && $this->validate !== 'Users.pass')
{
$this['image'] = $this->upload($this['uid']);
$this->validate(false)->setEvent(false)->save($this->data);
}
}
protected function upload($id)
{
$file = Request::instance()->file('image');
$image = $file->move(IMAGE_PATH,$id);
if($image){
return VIEW_IMAGE_PATH . '/' . $image->getSaveName();
}
}
?>
ajax提交,前端html:
<form id="fileForm" enctype="multipart/form-data" action="{:url('uploadImg')}" method="post">
<input type="file" id="file" name="file" style="display: none;">
</form>
<button type="button" class="btn btn-white btn-success btn-round" onclick="upload();">
添加图片
</button>
<script>
function upload() {
$('#file').trigger('click');
}
$('#file').on('change',function () {
var uid = $('.ace-thumbnails').data('uid');
var num = parseInt($('.ace-thumbnails').find('li').length)+1;
$('#fileForm').ajaxSubmit(function (result) {
if(result.code){
var _html = '<li>'+
'<input type="hidden" name="img['+num+'][id]" value="" >'+
'<input type="hidden" name="img['+num+'][uid]" value="'+uid+'" >'+
'<img id="img_card_'+num+'" width="150" height="150" alt="150x150" src="'+result.data+'" />'+
'<input type="hidden" name="img['+num+'][image]" id="input_card_'+num+'" value="'+result.data+'">'+
'</li>';
$('.ace-thumbnails').append(_html);
$('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
}
else {
$.alert('添加失败',result.msg,'error');
}
});
});
</script>
后台接收:
<?php
/**
* @note上传图片
*/
public function uploadImg(){
$file = Request::instance()->file('file');
if(empty($file)){
$this->error('上传数据为空');
}
else{
$info = $file->move(IMAGE_PATH.'/temp/',time().rand(100,999));
if($info == false){
$this->error($file->getError());
}
else{
$image = VIEW_IMAGE_PATH.'/temp/'.$info->getSaveName();
$this->success('上传成功',null,$image);
}
}
}
?>
ajax提交,前端html
<form id="fileForm" enctype="multipart/form-data" action="{:url('uploadImg')}" method="post">
<input type="file" id="file" name="file" style="display: none;">
</form>
<button type="button" class="btn btn-purple btn-white btn-round" onclick="upload({$key});">{$vo.enum_name}</button>
var imgId;//全局变量
//文件上传触发
function upload(id) {
$('#file').trigger('click');
imgId = id;
}
$('#file').on('change',function () {
$('#fileForm').ajaxSubmit(function (result) {
if(result.code){
$('#img'+imgId).find('ul img').attr('src', result.data);
$('#img'+imgId).find('ul input').val(result.data);
}
else {
layer.alert(result.msg,{icon:2});
}
$("#file").val("");
});
});