步浪
2017-02-26
7659
前台代码：
<html>
<head>
<title>ajax上传文件</title>
<style type="text/css">
#con{
width:500px;
height:500px;
border:1px solid #ddd;
margin:50px auto;
}
#look{
width:300px;
height:300px;
border:1px solid #aaa;
margin:10px auto;
text-align: center;
line-height:300px;
color:#aaa;
}
#uploadBtn{
display:block;
width:100px;
line-height:35px;
background:#3F9F00;
color:#fff;
text-align: center;
margin:20px auto;
cursor:pointer;
}
</style>
</head>
<body>
<div id="con">
<div id="look">预览区</div>
<span id="uploadBtn">点击上传</span>
<input type="file" style="display:none;" id="uploadFile" name="uploadFile" onchange="uploadFile()"/>
</div>
<script type="text/javascript" src="__ROOT__/Public/js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="__ROOT__/Public/js/ajaxfileupload.js"></script>
<script type="text/javascript">
$("#uploadBtn").click(function(){
$("#uploadFile").click();
});
function uploadFile(){
var url = "{:U('home/index/uploadPic')}";
$.ajaxFileUpload({
url: url,
type: 'post',
secureuri: false, //一般设置为false
fileElementId: "uploadFile", // 上传文件的name属性名
dataType: 'text', //返回值类型，一般设置为json
success: function(data){
var imgName=delHtmlTag(data.replace(/\"/g,""));
var imgsrc = "http://127.0.0.1/uploadFile/"+imgName;//此处填写你的图片存储地址
var Img = "<img src="+imgsrc+" height='300'width='300'>";
$("#look").html(Img);
//写存储数据库逻辑
},
error: function(data, status, e){
alert(e);
console.log(data);
}
});
}
function delHtmlTag(str){
return str.replace(/<[^>]+>/g,"");//去掉所有的html标记
}
</script>
</body>
</html>后台代码：
$config = array(
'maxSize' => 3145728,
'rootPath' => './uploadFile/',
'saveName' => array('uniqid',''),
'exts' => array('jpg', 'gif', 'png', 'jpeg'),
'autoSub' => true,
'subName' => array('',''),
);
$upload = new \Think\Upload($config);// 实例化上传类
$info = $upload->upload();
$path = $info['uploadFile']['savename'];
$this->ajaxReturn($path);ajaxfileupload下载：点击下载
整套源码下载：
热门推荐
最新文章
官方公众号