jquery.fileupload.js插件使用初探--多图片上传预览

 一、前台代码：

 

二、后台php代码，即文件upfilemore.php的代码：

 

 

TRUE,'msg'=>'图片上传成功！');
//检查是否为图片
$ext = getExt($fileArr['name'][0]);
$arrExt = array('jpg','jpeg','gif','png');
if(!in_array($ext,$arrExt)) {
    $data['sta'] = FALSE;
    $data['msg'] = 'Error:文件《'.$fileArr['name'][0].'》不是图片或采用了不合适的扩展名！';
} else {
    //文件上传到预览目录    
    if($fileArr['error'][0] == 0) {             
        $previewName = 'pre_'.md5(mt_rand(1000,9999)).time().'.'.$ext;
        $previewSrc = $previewPath.$previewName;
        // $fileName = $fileArr['name'][0];
        if(!move_uploaded_file($fileArr['tmp_name'][0],$previewSrc)) {
            $data['sta'] = FALSE;
            $data['msg'] = $fileArr['name'][0].'图片上传失败！';
        } else {
            $data['msg'] = $fileArr['name'][0].'图片上传成功！';
            $data['previewSrc'] = $previewSrc;
        }           
    }
}
 
echo json_encode($data);
//获取文件扩展名
function getExt($filename) {
    $ext = pathinfo($filename, PATHINFO_EXTENSION);
    return $ext;
}
//创建目录并赋权限
function creatDir($path) {
    $arr = explode('/',$path);
    $dirAll = '';
    $result = FALSE;
    if(count($arr) > 0) {
        foreach($arr as $key=>$value) {
            $tmp = trim($value);
            if($tmp != '') {
                $dirAll .= $tmp.'/';
                if(!file_exists($dirAll)) {
                    mkdir($dirAll,0777,true);                   
                }
            }
        }
    }
}

三、效果图：

 

 

相关资料：
jQuery-File-Upload插件源码：https://github.com/blueimp/jQuery-File-Upload
Home wiki地址：https://github.com/blueimp/jQuery-File-Upload/wiki
api地址：https://github.com/blueimp/jQuery-File-Upload/wiki/API
options地址：https://github.com/blueimp/jQuery-File-Upload/wiki/Options
示例demo下载地址1：https://download.csdn.net/detail/smm188/9716174
示例demo下载地址2：https://github.com/smm188/jquery-file-upload-php-demo.git