1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 上传插件dropzone.js实例

上传插件dropzone.js实例

时间:2021-09-12 05:57:59

相关推荐

上传插件dropzone.js实例

dropzone.js默认是Ajax上传图片给服务器,那么如何获取到图片名呢?其实我们是可以通过dropzone的success函数获取到服务器返回的数据

dropzone.js在HTML的配置如下;

Dropzone.autoDiscover = false;//防止报"Dropzone already attached."的错误$(".dropzone").dropzone({url: "__URL__/upload/",addRemoveLinks: true,dictRemoveLinks: "x",dictCancelUpload: "x",paramName:"userImg",maxFiles: 10,maxFilesize: 5,acceptedFiles: "image/*",init: function() {//res为服务器响应回来的数据this.on("success", function(file, res) {//将json字符串转换成json对象var obj = JSON.parse(res);//res为dropzone.js返回的图片路经file.path = res;if( obj.status == 200 ){//将服务器得到的数据生成一个隐藏域。做商品添加的时候就可以获取到了var input = '<input type="hidden" name="'+obj.details.savename+'" value="'+obj.details.savepath+obj.details.savename+'" />';$('.myform').append(input);}else{alert('上传失败');}});this.on("removedfile", function(file) {$.ajax({url: "改成你的php删除图片的路径",type: "post",//file.path可以获取到点击删除按钮的那张图片data: { 'path': file.path }});});}});

PHP的代码如下(Thinkphp代码):

public function upload(){ /*添加商品 :商品名、商品图片*/// 实例化上传类 $upload = new \Think\Upload();// 设置附件上传大小 $upload->maxSize =3145728 ;// 设置附件上传类型 $upload->exts=array('jpg', 'gif', 'png', 'jpeg');//A开发者写了upload() B开发// 设置附件上传目录 $upload->savePath ='./Public/Uploads/'; //返回上传信息$info = $upload->uploadOne($_FILES['userImg']); // dump($info);exit;if( !$info ) {// 上传错误提示错误信息// $this->error($upload->getError()); $data['status'] = 404;//错误信息$data['msg'] = $upload->getError();echo json_encode($data);}else{// 上传成功 (图片路径、图片名字)$data['status'] = 200;$data['msg']= 'UPLOAD SUCCESS';//图片原始名字$data['details']['originName'] = $info['name'];$data['details']['savename'] = $info['savename'];$data['details']['savepath'] = $info['savepath'];echo json_encode($data);}}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。