tp一步 文件上传
html部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<JS href="__PUBLIC__/JS/jquery-1.11.3.js" />
<JS href="__PUBLIC__/JS/jQuery-2.2.0.min.js" />
<JS href="__PUBLIC__/JS/jquery.validate.js" />
<JS href="__PUBLIC__/JS/ajaxfileupload.js" />
<JS href="__PUBLIC__/JS/messages_zh.js" />
<CSS href="__PUBLIC__/layui/css/layui.css" />
<JS href="__PUBLIC__/layui/layui.js" />
</head>
<body>
<form action="">
<div class="left layui-upload">
<div class="layui-upload-list" id="tupian">
<img class="layui-upload-img" id="demo1" style="width: 100px;height: 100px;border-radius: 90px;">
</div>
<div>
<!--图片上传-->
<!--<button class="layui-btn">-->
<!--<span style="text-align: center;position: absolute">修改头像</span>-->
<!--<input type="file" id="test1" name="file" style="opacity: 0;width: 60px;height: 30px;"/>-->
<!--</button>-->
<input type="file" onchange="preview(file)" id="test1" name="file" style="width: 60px;height: 30px;">
</div>
</div>
<button id="xx5" style="margin-top: 50px;width: 50px;height:30px;background-color: #e2bebb;border: none;">1515</button>
<input type="text" name="name">
<div id="_show" style="width: 200px;height: 200px;border: 1px solid red;"></div>
</form>
</body>
</html>
<script>
//图片预览第一部分
function preview(file){
var prevDiv = document.getElementById('_show');
if (file.files && file.files[0]){
var reader = new FileReader();
reader.onload = function(evt){
prevDiv.innerHTML = '<img src="' + evt.target.result + '" width="100px" height="100px" />';
};
reader.readAsDataURL(file.files[0]);
} else {
prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
}
}
</script>
<script>
$(function(){
//图片预览第二部分
// layui.use('upload', function() {
// var upload = layui.upload;
// var uploadInst = upload.render({
// elem: '#test1'
// ,auto:false
// , choose: function (obj) {
// //预读本地文件示例，不支持ie8
// obj.preview(function (index, file, result) {
// $('#demo1').attr('src', result); //图片链接（base64）
// });
// }
// });
// });
$("#xx5").on("click",function(){
var fileObj = new FormData($("input[type=file]"));
fileObj.append("file",$("input[type=file]")[0].files[0]);
$.ajax({
url: 'tupian' ,
type: 'POST',
dataType:"json",
data: fileObj,
cache: false,
contentType: false,
processData: false,
success: function (msg) {
alert(msg);
},
error: function (returndata) {
alert(returndata);
}
});
});
})
</script>
控制器部分:
$imgDir = "Public/liaoping";
if(! file_exists($imgDir)){
mkdir($imgDir);
}
$fileName = uniqid().date("Ymd").$_FILES["file"]["name"];
move_uploaded_file($_FILES["file"]["tmp_name"],$imgDir."/".$fileName);
echo json_encode($fileName);
}
