ThinkPHP+ajaxupload.js实现上传图片功能
应用的ThinkPHP版本为3.1.3
index.html模板页面代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片上传</title>
<script type="text/javascript" src="/ajaxup/Public/js/jquery.js"></script>
<script type="text/javascript" src="/ajaxup/Public/js/ajaxupload.js"></script>
<script type="text/javascript">
$(function(){
var button = $('#upload_button'),interval;
var confirmdiv = $('#uploadphotoconfirm');
var fileType = "pic",fileNum = "one";
new AjaxUpload(button,{
action: "{:U('Index/uppic')}",
name: 'userfile',
onSubmit : function(file,ext){
if(fileType == "pic")
{
if (ext && /^(jpg|png|jpeg|gif|JPG)$/.test(ext)){
this.setData({
'info': '文件类型为图片'
});
} else {
confirmdiv.text('文件格式错误，请上传格式为.png .jpg .jpeg 的图片');
return false;
}
}
confirmdiv.text('文件上传中');
if(fileNum == 'one')
this.disable();
interval = window.setInterval(function(){
var text = confirmdiv.text();
if (text.length < 14){
confirmdiv.text(text + '.');
} else {
confirmdiv.text('文件上传中');
}
},200);
},
onComplete: function(file,response){
if(response != "success"){
if(response =='2'){
confirmdiv.text("文件格式错误，请上传格式为.png .jpg .jpeg 的图片");
}else{
if(response.length>20){
confirmdiv.text("文件上传失败请重新上传"+response);
}else{
confirmdiv.text("上传完成");
$("#newbikephotoName").val("/ajaxup/upload/images/"+response);
$("#newbikephoto").attr("src","/ajaxup/upload/images/"+response);
}
}
}
window.clearInterval(interval);
this.enable();
if(response == "success")
alert('上传成功');
}
});
});
</script>
</head>
<body>
<label class="control-label" for="bike_type"> </label>
<input type="file" display:none" name="userfile">
<input type="hidden" id="newbikephotoName" name="bike_photo" value="" />
<input type="hidden" id="oldbikephotoName" value="" />
<div class="controls" text-align:left;">
<img id="newbikephoto" src="/ajaxup/Public/images/nophoto.jpg" max-height:200px;" />
<span class="help-inline"></span>
<br>
<div id="uploadphotoconfirm"></div>
<br>
<input type="button" class="btn btn-primary" id="upload_button" value="上传图片" /><br/>
<span class="help-inline">*请上传格式为.png .jpg .jpeg 的图片</span>
</div>
</body>
</html>
IndexAction.class.php代码如下：
<?php
/**
* 图片上传
* QQ:1739205253 中午有点风
*/
class IndexAction extends Action {
public function index(){
$this->display();
}
Public function uppic(){
import('ORG.Net.UploadFile');
$upload = new UploadFile();
$upload->autoSub = true;
$upload->subType = 'custom';
if ($upload->upload('./upload/images/')){
$info = $upload->getUploadFileInfo();
}
$file_newname = $info['0']['savename'];
$MAX_SIZE = 20000000;
if($info['0']['type'] !='image/jpeg' && $info['0']['type'] !='image/jpg' && $info['0']['type'] !='image/pjpeg' && $info['0']['type'] != 'image/png' && $info['0']['type'] != 'image/x-png'){
echo "2";exit;
}
if($info['0']['size']>$MAX_SIZE)
echo "上传的文件大小超过了规定大小";
if($info['0']['size'] == 0)
echo "请选择上传的文件";
switch($info['0']['error'])
{
case 0:
echo $file_newname;
break;
case 1:
echo "上传的文件超过了 php.ini 中 upload_max_filesize 选项限制的值";
break;
case 2:
echo "上传文件的大小超过了 HTML 表单中 MAX_FILE_SIZE 选项指定的值";
break;
case 3:
echo "文件只有部分被上传";
break;
case 4:
echo "没有文件被上传";
break;
}
}
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。