文档章节

JavaScript 上传插件dropzone.js实例

phpweishunlong
 phpweishunlong
发布于 2017/05/17 00:10
字数 503
阅读 64
收藏 0
点赞 0
评论 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
码字总数 26259
作品 0
广州
程序员
几款极好的 JavaScript 文件上传插件

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

ibm_hoojo ⋅ 2013/09/26 ⋅ 0

安装mantis 2.11.1

1、下载 下载地址: https://www.mantisbt.org/download.php 2、解压缩后上传 个人比较喜欢FileZilla(看过他家的bug工具BugZilla的安装,知难而退了)。服务器我用的万网虚拟主机和阿里云R...

glen_xu ⋅ 06/11 ⋅ 0

将一个前端项目改写为chromo插件(一)

编写第一个chrome插件? 编写chrome插件完全就是前端知识加上一些专门的知识。 假设文件夹下有文件 嗯,现在看来他只是普通的html,其实,你只要在当前文件夹下加上文件,chrome浏览器就可以把...

saltfish666 ⋅ 05/27 ⋅ 0

如何有效实现前端压缩图片并上传功能

  随着现在手机的像素越来越高,很多照片动辄几兆甚至十几兆,上传后在服务器端压缩已经越来越不能满足当今的需求。这对于许多技术人员来说,处理起来这样的问题往往不知道该怎么下手,那么...

燚轩科技 ⋅ 04/23 ⋅ 0

JavaScript中的this指针 理论化this指针的定义

JavaScript现在应用之广泛,远超其他任何语言,只要是一个合格的网站应用,基本上多多少少都会有JS的存在。在JavaScript中,this的指向被不少Coder所不解,但其实JS中的this理解起来也是相当...

superwebmaster ⋅ 05/29 ⋅ 0

一天掌握构建化工具Grunt、gulp、webpack(下)

1、gulp篇 中文主页: http://www.gulpjs.com.cn/ 上面那一篇博客我们已经讲述了如何创建工程以及安装所有的环境和准备,如果没有看到的话,链接在下面 https://my.oschina.net/mdxlcj/blog/1...

木九天 ⋅ 04/27 ⋅ 0

爬虫获取 js 动态数据 (1)

爬虫遇到 js 动态数据时,主要解决方法有两种: 使用一些库,例如 Selenium,来模拟浏览器环境抓取数据。但这样做对内存和 CPU 的消耗都比较大,爬虫效率低,应尽量避免。 手动分析 js 请求,...

anye137 ⋅ 06/05 ⋅ 0

thinkphp模型层Model、Logic、Service讲解

thinkphp模型层Model、Logic、Service讲解 时间:2014-08-24 15:54:56 编辑:一切随缘 文章来源:php教程网 已阅读:771 次 js特效源码,就从这里开始 我有疑问【PHP186论坛提问】 jS游戏桌球...

thinkyoung ⋅ 2015/09/01 ⋅ 0

HiShop2.x版本中的上传插件分析,得出所用的模板语言为Underscore.js 1.6.0且自己已修改

效果: 上传组件非常的酷,但是分析其使用JS写法使用了模板语言的,代码如下:   

easonjim ⋅ 2016/12/27 ⋅ 0

iOS下JS与OC互相调用(六)--WKWebView + WebViewJavascriptBridge

iOS下JS与OC互相调用(六)--WKWebView + WebViewJavascriptBridge 转载:原地址 https://www.jianshu.com/p/e951af9e5e74 上一篇文章介绍了UIWebView 如何通过WebViewJavascriptBridge 来实现......

法斗斗 ⋅ 05/11 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

十五周二次课

十五周二次课 17.1mysql主从介绍 17.2准备工作 17.3配置主 17.4配置从 17.5测试主从同步 17.1mysql主从介绍 MySQL主从介绍 MySQL主从又叫做Replication、AB复制。简单讲就是A和B两台机器做主...

河图再现 ⋅ 今天 ⋅ 0

docker安装snmp rrdtool环境

以Ubuntu16:04作为基础版本 docker pull ubuntu:16.04 启动一个容器 docker run -d -i -t --name flow_mete ubuntu:16.04 bash 进入容器 docker exec -it flow_mete bash cd ~ 安装基本软件 ......

messud4312 ⋅ 今天 ⋅ 0

OSChina 周一乱弹 —— 快别开心了,你还没有女友呢。

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享吴彤的单曲《好春光》 《好春光》- 吴彤 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :小萝莉街上乱跑,误把我认错成...

小小编辑 ⋅ 今天 ⋅ 7

mysql in action / alter table

change character set ALTER SCHEMA `employees` DEFAULT CHARACTER SET utf8mb4 DEFAULT COLLATE utf8mb4_general_ci ;ALTER TABLE `employees`.`t2` CHARACTER SET = utf8mb4 , COLLAT......

qwfys ⋅ 今天 ⋅ 0

Java 开发者不容错过的 12 种高效工具

Java 开发者常常都会想办法如何更快地编写 Java 代码,让编程变得更加轻松。目前,市面上涌现出越来越多的高效编程工具。所以,以下总结了一系列工具列表,其中包含了大多数开发人员已经使用...

jason_kiss ⋅ 昨天 ⋅ 0

Linux下php访问远程ms sqlserver

1、安装freetds(略,安装在/opt/local/freetds 下) 2、cd /path/to/php-5.6.36/ 进入PHP源码目录 3、cd ext/mssql进入MSSQL模块源码目录 4、/opt/php/bin/phpize生成编译配置文件 5、 . ./...

wangxuwei ⋅ 昨天 ⋅ 0

如何成为技术专家

文章来源于 -- 时间的朋友 拥有良好的心态。首先要有空杯心态,用欣赏的眼光发现并学习别人的长处,包括但不限于工具的使用,工作方法,解决问题以及规划未来的能力等。向别人学习的同时要注...

长安一梦 ⋅ 昨天 ⋅ 0

Linux vmstat命令实战详解

vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况。这个命令是我查看Linux/Unix最喜爱的命令...

刘祖鹏 ⋅ 昨天 ⋅ 0

MySQL

查看表相关命令 - 查看表结构    desc 表名- 查看生成表的SQL    show create table 表名- 查看索引    show index from  表名 使用索引和不使用索引 由于索引是专门用于加...

stars永恒 ⋅ 昨天 ⋅ 0

easyui学习笔记

EasyUI常用控件禁用方法 combobox $("#id").combobox({ disabled: true }); ----- $("#id").combobox({ disabled: false}); validatebox $("#id").attr("readonly", true); ----- $("#id").r......

miaojiangmin ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部