此为ajax异步上传
首先是form表单里的代码
Photo:<input type="file" name="photo" id="up_photo"><br>
<input type="hidden" name="thumb" value="" id="thumb"><br> //这里是为了获取图片的名称
<img src="" style="display:none" id="img_thumb" width="150" height="180"><br> //先隐藏,然后点击上传后会显示一张预览图,后有详细解释
ajax代码
$("#up_photo").on("change",function(){
//用html方式上传
var cont=new FormData($("#frmlogin")[0]); //转换成DOM方法
$.ajax({
url:"{:U('Index/ajax_upload')}", //跳转至控制器
type:"POST",
data:cont,
dataType:"JSON",
cache:false,
processData:false,
contentType:false,
success:function(data){
if (data.status) {
$("#img_thumb").attr('src',"./upload/" +data.msg);
$("#img_thumb").show(); //显示预览图
$("#img_thumb").val("./upload" +data.msg);
}else{
dialog.error(data.msg);
}
},
});
控制器代码
public function ajax_upload(){
$upload=new \Think\Upload();
$upload->maxSize=3145728;
$upload->exts=array('jpg','gif','png','jpeg');
$upload->rootPath="./upload/";
$upload->savePath='images/';
$upload->autoSub=false;
$info=$upload->upload();
if($info){
$file=$info['photo']['savepath'].$info['photo']['savename'];
return show_ajax(1,$file);
}else{
return show_ajax(0,$upload->getError());
}
}
效果图