您的位置：首页 > Web前端 > JQuery

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

2016-02-26 14:28 996 查看

一、前台代码：

<!DOCTYPE html>
<html>
<head>
<title>jquery.fileupload.js使用测试</title>
<script src="jquery-1.12.0.min.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.iframe-transport.js"></script>
<script src="jquery.fileupload.js"></script>
<script src="jquery.xdr-transport.js"></script>
<style type="text/css">
.bar {
margin-top:10px;
height:10px;
max-width: 370px;
background: green;
}
</style>
</head>
<body>
<input id="fileupload" type="file" name="files[]" multiple>
<span class="proportion"></span>
<!-- 上传进度条及状态： -->
<div class="progress">
<div class="bar" style="width: 0%;"></div>
<div class="upstatus" style="margin-top:10px;"></div>
</div>

<!-- 预览框： -->
<div class="preview" style="margin-top:20px;"></div>
</body>
</html>
<script type="text/javascript">
$('#fileupload').fileupload(
{
url: 'upfilemore.php',
dataType: "json",
multipart:true,
done:function(e,data){
//done方法就是上传完毕的回调函数，其他回调函数可以自行查看api
//注意data要和jquery的ajax的data参数区分，这个对象包含了整个请求信息
//返回的数据在data.result中，这里dataType中设置的返回的数据类型为json
if(data.result.sta) {
// 上传成功：
$(".preview").append("<div style='margin-top:10px;'><img src="+data.result.previewSrc+"></div>");
$(".preview").append("<div>"+data.result.msg+"</div>");
} else {
// 上传失败：
$(".upstatus").append("<div style='color:red;'>"+data.result.msg+"</div>");
}

},
progressall: function (e, data) {//上传进度
var progress = parseInt(data.loaded / data.total * 100, 10);
$(".progress .bar").css("width", progress + "%");
$(".proportion").html("上传总进度："+progress+"%");
}
}
);
</script>

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

<?php
$fileArr = $_FILES['files'];
//设置预览目录
$previewPath = "upload/preview/";
creatDir($previewPath);
//ajax返回数组
$data = array('sta'=>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);
}
}
}
}
}

三、效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： php jquery.fileupload.js 多图上传预览

相关文章推荐

新的分享

章节导航