本文主要讲述了使用tp3.2和mbuploadify.js来实现上传图片，具有一定的参考价值，分享给大家，有兴趣的朋友了解一下哦！
HTML：
<p class="form-group">
<label class="col-sm-1 control-label no-padding-right" for="form-field-4"> 图片： </label>
<p class="col-sm-9">
<input type="file" name="files" id="imgfile" multiple style="display:none;" onchange = "imgpath.value=this.value" >
<input type="textfield" id="imgpath" style="border: 0px;outline:none;cursor: pointer;width:100px;display:none;">
<input type="button" class="btn btn-white btn-info btn-sm" value="点击上传图片" onclick="imgfile.click()">
<p class="space-4"></p>
<p id="img-data" class="img-data">
<if condition="$data['savepath'] neq ''">
<span class="uploadimg">
<img src="{$data['savepath']}" style="max-width: 300px;">
<input type="hidden" name="img" value="{$data['img']}">
<a class="remove-uploadimg" title="删除">✕</a>
</span>
</if>
</p>
<p class="space-4"></p>
<p id="imgError" class="msg"></p>
</p></p>CSS：
<style>
.remove-uploadimg{ cursor:pointer;}
.uploadimg{
display: inline-block;
position: relative;
}
.uploadimg .remove-uploadimg{
position: absolute;
font-size: 20px;
top:-10px;
right: -6px;
}
.remove-uploadimg{
width:30px;
height:30px;
background-color:#ccc;
border-radius:50%;
color:red;
text-align:center;
}
.remove-uploadimg:hover{
text-decoration: none;
}</style>JS：
<script src="__PUBLIC__/js/mbUploadify.js"></script>
<script> var upload1 = new mbUploadify({
file: document.getElementById('imgfile'), /*ajax 上传地址*/
url: "{:U('Upload/mbUploadImg')}", //上传进度
progress: function(){
$('#imgpath').show();
$('#imgpath').val('上传中...');
}, /*上传失败*/
error: function(file, msg){
document.getElementById('imgError').innerHTML = msg;
}, /*ajax上传成功*/
uploadSuccess: function(res){
$('#imgpath').hide();
$('#imgpath').val(''); var data = JSON.parse(res);
document.getElementById('img-data').innerHTML = '<span class="uploadimg">' +
'<img src="'+ data.savepath +'" style="max-width: 300px;">' +
'<input type="hidden" name="img" value="'+data.id+'">'+
'<a class="remove-uploadimg" title="删除">✕</a>' +
'</span>';
}
});
$('body').on('click','.remove-uploadimg',function(){
$(this).parents('.uploadimg').remove();
})</script>PHP：
public function mbUploadImg(){ $upload = new Upload(); // 实例化上传类
$upload->maxSize = 5242880 ; // 设置附件上传大小
$upload->exts = array('jpg', 'gif', 'png', 'jpeg'); // 设置附件上传类型
$upload->rootPath = './Public/'; // 上传文件
$info = $upload->uploadOne($_FILES['files']); if($info) { // 上传成功
$data['name'] = $info['name']; $data['ext'] = $info['ext']; $data['type'] = $info['type']; $data['savename'] = $info['savename']; $data['savepath'] = "/Public/".$info['savepath'].$info['savename']; $imgId = M('upload_img')->add($data); if($imgId){ $resData['code'] = 200; $resData['msg'] = '成功'; $resData['id'] = $imgId; $resData['name'] = $data['name']; $resData['savepath'] = $data['savepath']; echo json_encode($resData); return;
}
} // 上传错误提示错误信息
return $this->ajaxReturn(['code'=>400,'msg'=>$upload->getError()]);
}相关教程：
