自用简易版图片上传回显功能
2018-01-11 12:03
211 查看
PHP代码:
HTML代码:
JS代码:
实现多图上传回显等功能,点击图片删除,PHP代码为thinkPHP图片上传功能
public function upload(){ $upload = new \Think\Upload();// 实例化上传类 $upload->maxSize = 3145728 ;// 设置附件上传大小 $upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型 $upload->rootPath = './Uploads/'; // 设置附件上传根目录 $info = $upload->upload(); if(!$info) {//上传失败 $this->error($upload->getError()); }else{// 上传成功 print_r(json_encode($info)); } } public function delete(){ $src = I('post.src'); unlink($src); }
HTML代码:
<form action="__URL__/savepic" method="post" > <input id="file" type="file" name="photo" /> <input id="pic" type="hidden" name="pic"> <button>提交</button> </form>
JS代码:
$('#file').change(function(){ var $file = $(this); var F = $file[0].files[0]; var formdata = new FormData(); formdata.append('pic',F); $.ajax({ type:'post', url:'/TEST/index.php/Home/Index/upload', data: formdata, processData : false, contentType : false, success:function(msg){ var data = eval('('+msg+')'); console.log(data.pic); var pic = data.pic.savepath+data.pic.savename;//当前照片的名字 var src = './Uploads/'+pic;//完整地址 $('body').append('<img class="imgs" src="'+src+'" alt="">'); $('.imgs').bind('click',function(){ //点击删除相片 $(this).remove(); $.ajax({ type:'post', url:'/TEST/index.php/Home/Index/delete', data:'src='+$(this).attr('src'), success:function(){ } }); }) } }); })
实现多图上传回显等功能,点击图片删除,PHP代码为thinkPHP图片上传功能
相关文章推荐
- 利用SpringMVC原生封装的对象实现图片上传及图片回显功能的实现及案例代码
- 配合七牛云简易使用kindeditor编辑器的图片上传功能
- Android实战简易教程-第二十八枪(基于Bmob实现头像图片设置和网络上传功能!)
- 图片回显(上传前预览)功能
- 如何用input标签和jquery实现多图片的上传和回显功能
- Android实战简易教程-第二十八枪(基于Bmob实现头像图片设置和网络上传功能!)
- web前端——实现上传图片预览功能
- WEB前端实现裁剪上传图片功能
- sharepoint 2010 扩展富文本框上传图片功能extend InputFormTextBox for uploading image
- 浅谈 Html5 带进度条的的文件图片(带本地回显)上传(后台代码)
- vue 实现剪裁图片并上传服务器功能
- vue.js 实现图片本地预览 裁剪 压缩 上传功能
- SilvetLight 实现的一个上传图片时功能动态裁剪部分区域和缩放图片的功能
- JS中利用FileReader实现上传图片前本地预览功能
- js无刷新上传图片,服务端有生成缩略图,剪切图片,iphone图片旋转判断功能
- nodejs + express + 上传图片功能
- JavaScript实现无刷新上传预览图片功能
- 安卓选择图片上传功能【支持多选拍照预览等】
- 《React-Native系列》26、 ReactNative实现图片上传功能
- ajaxfileupload插件上传图片功能,用MVC和aspx做后台各写了一个案例