博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
上传插件dropzone.js实例
阅读量:5021 次
发布时间:2019-06-12

本文共 2561 字,大约阅读时间需要 8 分钟。

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 = '';                    $('.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);          }   }

转载于:https://www.cnblogs.com/cxint/p/6861731.html

你可能感兴趣的文章
C#窗体控件简介ListBox
查看>>
真正突破均线压力线的技术语言
查看>>
学习Linux课程第十一天
查看>>
C# DES (ECB模式) 加密解密 --单倍长
查看>>
android桌面快捷方式跳转到指定activity
查看>>
IBM中枪后,下一个是谁?
查看>>
使用python+flask让你自己api(教程源代码)
查看>>
Oracle 语法
查看>>
Solr使用入门指南
查看>>
C语言单元測试
查看>>
LLVM每日谈之四 Pass初探
查看>>
linux vim 行缩进,批量移动多行
查看>>
一些注册表值
查看>>
NVIDIA DIGITS 学习笔记(NVIDIA DIGITS-2.0 + Ubuntu 14.04 + CUDA 7.0 + cuDNN 7.0 + Caffe 0.13.0)...
查看>>
随笔2
查看>>
PHP-PRC
查看>>
SQL Server SQL字符串拼接
查看>>
spring 依赖注入
查看>>
所有input输入完成后,改变按钮颜色
查看>>
校园导航系统之用弗洛伊德算法求加权图的最短路径
查看>>