码迷,mamicode.com
首页 > Web开发 > 详细

tp一步 文件上传

时间:2017-11-15 21:49:05      阅读:251      评论:0      收藏:0      [点我收藏+]

标签:tran   $.ajax   auto   ges   url   img   reader   修改头像   inpu   

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>

 

控制器部分:

   public function tupian(){
        $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);
    } 

 

tp一步 文件上传

标签:tran   $.ajax   auto   ges   url   img   reader   修改头像   inpu   

原文地址:http://www.cnblogs.com/ITGR/p/7840367.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!