##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",
//
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 = '';
$('.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);
}
}