xml地图|网站地图|网站标签 [设为首页] [加入收藏]

上传插件dropzone,jQuery图片拖动组件Dropzone用法示

来源:http://www.ccidsi.com 作者:最新解决方案 人气:178 发布时间:2019-05-06
摘要:dropzone.js暗中认可是Ajax上传图片给服务器,那么什么样收获到图片名吧?其实我们是能够通过dropzone的success函数获取到服务器重返的数量 正文实例讲述了jQuery图片拖动组件Dropzone用法。

dropzone.js暗中认可是Ajax上传图片给服务器,那么什么样收获到图片名吧?其实我们是能够通过dropzone的success函数获取到服务器重返的数量

正文实例讲述了jQuery图片拖动组件Dropzone用法。分享给我们供我们参考,具体如下:

dropzone.js在HTML的布局如下;

澳门皇家赌场网站,dropzone 主要功用:援助拖动图片上传,提供图片预览,等效果 参考地址:

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 ThinkUpload();

           // 设置附件上传大小    
          $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);
          }
   }
  1. 设置 npm install dropzone ,会下载三个dropzone

  2. dropzone文件夹dist 下有三个文本二个dropzone.js 三个dropzone.css 将那八个公文增多到页面上

  3. 初叶化Dropzone ,demo代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="jquery.min.js"></script>
  <script src="dropzone.min.js"></script>
  <link rel="stylesheet" href="dropzone.css">
</head>
<body>
<div id="dropz" class="dropzone"></div>
<script>
  $(function () {
    $("#dropz").dropzone({
      url: "fileUpload.htm",
      maxFiles: 10,
      maxFilesize: 512,
      acceptedFiles: ".jpg"
    });
  })
</script>
</body>
</html>

本文由68399皇家赌场发布于最新解决方案,转载请注明出处:上传插件dropzone,jQuery图片拖动组件Dropzone用法示

关键词: 68399皇家赌场

上一篇:canvas 画时钟 会动呦

下一篇:没有了

最火资讯