文档章节

JavaScript 上传插件dropzone.js实例

phpweishunlong
 phpweishunlong
发布于 2017/05/17 00:10
字数 503
阅读 80
收藏 0

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

###dropzone.js在HTML的配置如下: //使用dropzone.js Dropzone.autoDiscover = false;//防止报"Dropzone already attached."的错误 $(".dropzone").dropzone({

    //请求一个PHP来做上传
    url: "__URL__/upload/",

    //是否显示删除图片按钮
    addRemoveLinks: true,

    //删除按钮样子
    dictRemoveLinks: "x",

    //取消上传样式
    dictCancelUpload: "x",

    //<input type="text" name="pic">
    paramName:"pic",//$_FILES['pic']

    //最大文件上传数
    maxFiles: 10,

    //文件的大小,单位M
    maxFilesize: 5,

    //可以上传哪些类型
    acceptedFiles: "image/*",//  'video/*' 上传视频
    init: function() {

        //res为服务器响应回来的数据
        //res 是php返回文件信息
        //file 是一个dropzone提供一个属性,这个属性可以在dropzone所有方法都使用
        this.on("success", function(file, res) {
            var obj = JSON.parse(res);
            //res为dropzone.js返回的图片路经
            file.path = res;
            //拿到图片路径
            var filePath = obj['details'].savepath + obj['details'].savename;

            if ( obj.status == 200 ) {
                //将服务器得到的数据生成一个隐藏域。做商品添加的时候就可以获取到了
                var input = '<input type="hidden" name="pic[]" value="'+filePath+'" />';
                $('.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;//3M

    // 设置附件上传类型   
    $upload->exts = array('jpg', 'gif', 'png', 'jpeg');
    // $upload->exts = array('wmv','mp4');

    $upload->rootPath = './Public/';

    // 设置附件上传目录   
    $upload->savePath = './Uploads/'; 

    //返回上传信息
    $info = $upload->uploadOne($_FILES['pic']);   

    if( !$info ) {
        // 上传错误提示错误信息
        $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);
    }
}

© 著作权归作者所有

共有 人打赏支持
phpweishunlong
粉丝 1
博文 64
码字总数 26288
作品 0
广州
程序员
私信 提问
几款极好的 JavaScript 文件上传插件

jQuery File Uploader 这是最受欢迎的 jQuery 文件上传组件,支持批量上传,拖放上传,显示上传进度条以及校验功能。 支持预览图片、音频和视频,支持跨域上传和客户端图片缩放,支持的服务端...

hoojo
2013/09/26
0
0
上传文件开源库 - DropZone JS

DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews. It’s lightweight, doesn’t depend on any other library (like jQuery) and is ......

Alex_曰生
2015/09/25
0
0
stream将推出类型Dropzonejs效果

最近比较忙,预计未来3个月推出以下功能: 新增只支持form上传,以满足类似又拍云的form上传需要; 推出类似Dropzonejs上传插件DEMO效果; 更新twinkling.cn的文档...

java_speed
2015/06/10
0
0
Stream的Dropzonejs样式演示

Stream新增Demo - Dropzonejs样式:http://p.twinkling.cn/dropzone.html 拖拽上传 图片回显 自动优化显示图片和普通文件

java_speed
2015/08/09
0
3
12 个开发人员的实用代码编辑器

Compilr Compilr 是一个在线的集成开发怀集(IDE),目前支持9种编程语言:C、C++、C#、Java、JavaScript、PHP、Python、Ruby 和 Visual Basic。 Compilr 由坐落于加拿大新斯科舍省的 Ninja ...

ChildhoodAndy
2012/12/28
0
1

没有更多内容

加载失败,请刷新页面

加载更多

apache顶级项目(二) - B~C

apache顶级项目(二) - B~C https://www.apache.org/ Bahir Apache Bahir provides extensions to multiple distributed analytic platforms, extending their reach with a diversity of s......

晨猫
46分钟前
0
0
day152-2018-11-19-英语流利阅读

“超级食物”竟然是营销噱头? Daniel 2018-11-19 1.今日导读 近几年来,超级食物 superfoods 开始逐渐走红。不难发现,越来越多的轻食餐厅也在不断推出以超级食物为主打食材的健康料理,像是...

飞鱼说编程
今天
3
0
SpringBoot源码:启动过程分析(二)

接着上篇继续分析 SpringBoot 的启动过程。 SpringBoot的版本为:2.1.0 release,最新版本。 一.时序图 一样的,我们先把时序图贴上来,方便理解: 二.源码分析 回顾一下,前面我们分析到了下...

Jacktanger
昨天
3
0
Apache防盗链配置,Directory访问控制,FilesMatch进行访问控制

防盗链配置 通过限制referer来实现防盗链的功能 配置前,使用curl -e 指定referer [root@test-a test-webroot]# curl -e "http://www.test.com/1.html" -x127.0.0.1:80 "www.test.com/1.jpg......

野雪球
昨天
3
0
RxJava threading

因为Rx针对异步系统设计,并且Rx也自然支持多线程,所以新的Rx开发人员有时会假设Rx默认是多线程的。在其他任何事情之前,重要的是澄清Rx默认是单线程的。 除非另有说明,否则每次调用onNex...

woshixin
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部