1.html
<div class="form-group">
<label class="col-sm-1 control-label no-padding-right" for="form-field-4">
详情页展示图 </label>
<div class="col-sm-9">
<div style="float: left" id="tushow">
<volist name='pimg' id='v'>
<li style="float: left;list-style: none;margin-right: 5px">
<img src="{$v}" alt="" width="100" height="100" /><input type="hidden" name="uploadfile[]" value="{$v}" /><p style="text-align: center"><a style="cursor:pointer" onclick="javascript:ondel(this)">删除</a></p></li>
</volist>
</div>
<div class="col-xs-10 col-sm-5" style="clear: none">
<input id="fileupload" type="file" name="files[]" multiple>
</div>
<span class="help-inline col-xs-12 col-sm-7" style="clear: none">
<span class="middle">建议像素:1364*600</span>
</span>
</div>
</div>
2.js
<script src="/Public/upload/js/jquery.ui.widget.js"></script>
<script src="/Public/upload/js/jquery.iframe-transport.js"></script>
<script src="/Public/upload/js/jquery.fileupload.js"></script>
<script type="text/javascript">
$('#fileupload').fileupload({
url: '/uploads.html',
dataType: "json",
multipart:true,
done:function(e,data){
if(data.result.sta) {
// 上传成功:
$("#tushow").append('<li style="float: left;list-style: none"><img src="'+data.result.previewSrc+'" alt="" width="100" height="100" /><input type="hidden" name="uploadfile[]" value="'+data.result.previewSrc+'" /><p style="text-align: center"><a style="cursor:pointer" onclick="javascript:ondel(this)">删除</a></p></li>');
// $(".preview").append("<div>"+data.result.msg+"</div>");
} else {
// 上传失败:
// $(".upstatus").append("<div style='color:red;'>"+data.result.msg+"</div>");
alert('上传失败,请重试');
}
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$(".progress .bar").css("width", progress + "%");
$(".proportion").html("上传总进度:"+progress+"%");
}
});
function ondel(t){
// alert(t);
$(t).parent().parent().remove();
}
</script>
3.php
public function uploads(){
// var_dump($_FILES['files']);exit;
$ret=uploadmore($_FILES['files']);
echo $ret;
}
function uploadmore($files){
// $fileArr = $_FILES['files'];
$fileArr = $files;
define(ROOT,dirname(dirname(dirname(dirname(__FILE__)))));
// var_dump(ROOT);exit;
//设置预览目录
$times=date('Ymd');
$previewPath = "/Public/attached/".$times."/";
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];
$sss=move_uploaded_file($fileArr['tmp_name'][0],ROOT.$previewSrc);
// var_dump($fileArr['tmp_name'][0]);var_dump($previewSrc);exit;
if(!$sss) {
$data['sta'] = FALSE;
$data['msg'] = $fileArr['name'][0].'图片上传失败!';
} else {
$data['msg'] = $fileArr['name'][0].'图片上传成功!';
$data['previewSrc'] = $previewSrc;
}
}
}
return 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);
}
}
}
}
}
本文为看恩吧原创文章,转载无需和我联系,但请注明来自knsay.com