php照片预览附件,图片上传前预览，两种方式可实现

表单提交，前端html:

/**上传头像**/

$('#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]);

}

});

后台接收：

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:

添加图片

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 = '

'+

''+

''+

''+

''+

'

';

$('.ace-thumbnails').append(_html);

$('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);

}

else {

$.alert('添加失败',result.msg,'error');

}

});

});

后台接收：

/**

* @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

{$vo.enum_name}

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("");

});

});