tp3.2ajax上传文件,tp框架下，使用ajaxfileupload插件做ajax上传，并实时预览

前台代码：

#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;

}

$("#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 = "";

$("#look").html(Img);

//写存储数据库逻辑

},

error: function(data, status, e){

alert(e);

console.log(data);

}

});

}

function delHtmlTag(str){

return str.replace(/]+>/g,"");//去掉所有的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下载：点击下载

整套源码下载：