文档章节

JavaScript 上传插件dropzone.js实例

phpweishunlong
 phpweishunlong
发布于 2017/05/17 00:10
字数 503
阅读 87
收藏 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
原创jquery图片上传预览插件uploadView

勾国印原创jquery图片上传前预览插件uploadView,支持自定义允许上传图片的最大尺寸、允许上传图片的格式、预览图片的宽度和高度以及上传成功后回调函数,兼容手机端和PC端。 大家在开发网站...

够过瘾
2015/10/24
5.5K
0

没有更多内容

加载失败,请刷新页面

加载更多

Spark in action on Kubernetes - Playground搭建与架构浅析

前言 Spark是非常流行的大数据处理引擎,数据科学家们使用Spark以及相关生态的大数据套件完成了大量又丰富场景的数据分析与挖掘。Spark目前已经逐渐成为了业界在数据处理领域的行业标准。但是...

阿里云官方博客
1分钟前
0
0
小白大数据学习路线

学习大数据首先了解大数据技术得板块划分: 数据计算(离线计算):Hadoop、spark 数据计算(实时计算):storm、spartstreaming、flink 其他框架:zookeeper 数据采集:flume、Kafka 数据存...

董黎明
13分钟前
0
0
mariadb 内存占用优化

本文由云+社区发表 作者:工程师小熊 摘要:我们在使用mariadb的时候发现有时候不能启动起来,在使用过程中mariadb占用的内存很大,在这里学习下mariadb与内存相关的配置项,对mariadb进行调...

腾讯云加社区
55分钟前
2
0
spring security 自定义登录认证

spring security 自定义认证登录 1.概要 1.1.简介 spring security是一种基于 Spring AOP 和 Servlet 过滤器的安全框架,以此来管理权限认证等。 1.2.spring security 自定义认证流程 1)认证...

EasyProgramming
55分钟前
1
0
Win下Jenkins-2.138源码编译及填坑笔记

源码编译篇 1、 安装JDK1.8-181,操作系统添加JDK环境变量。Java -version验证一下。 注:Jenkins2.138版本,JDK必须jkd1.8.0-101以上,不支持Java9,Maven必须3.5.3以上。 2、 解压Maven3....

编程SHA
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部