JavaScript 上传插件dropzone.js实例
JavaScript 上传插件dropzone.js实例
phpweishunlong 发表于8个月前
JavaScript 上传插件dropzone.js实例
  • 发表于 8个月前
  • 阅读 33
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

##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);
    }
}
共有 人打赏支持
粉丝 1
博文 64
码字总数 26259
×
phpweishunlong
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: