Ajaxupload简单使用
友情提示：1、蓝色文字为必修改内容。2、#字符后面是解释该代码段的主要内容
备注: 该实例是用php的ci框架直接接收图片并保存
1、 引用AjaxUpload.js文件
#public/js/ajaxupload.js ajaxupload插件的文件位置
<script tyep="text/javascript" src="public/js/ajaxupload.js"></script>
2、 创建页面并编写HTML
#upload 该id是必需的，但可以自定义
<button id="upload">上传图片</button>
3、 编写JS脚本
#upload 与第二步创建的button的id要相对应，必需对应
#<?php echo site_url("base/upload_pic") ?> 这里是服务器的url地址,不过这里是ci框架的。
#userfile 像是<input type="file" name="userfile" />这个input标签的name的值
#desc 该数据可以随图片一起上传到服务器，用post接收
#response 上传图片后，服务器返回的数据
$(document).ready(function(){
var button = $('#upload'), interval;
var fileType = "all",fileNum = "one";
new AjaxUpload(button,{
action: '<?php echo site_url("base/upload_pic") ?>',
name: 'userfile',
onSubmit : function(file, ext){
var desc = $("#pic_des").val();
this.setData({"des":desc});
button.text('文件上传中');
if(fileNum == 'one')
this.disable();
interval = window.setInterval(function(){
var text = button.text();
if (text.length < 14){
button.text(text + '.');
} else {
button.text('文件上传中');
}
}, 200);
},
onComplete: function(file, response ){
button.text('文件上传');
window.clearInterval(interval);
this.enable();
data = eval("("+response+")");
}
});
});
4、 创建php（ci框架）处理程序
#$this->upload->do_upload() 用ci框架接收图片，也可用原生态的php接收，或者其他框架
#echo 0 向客户端返回数据
#echo 1 向客户端返回数据
public function upload_pic(){
$this->load->library("upload", $config);
if (!$this->upload->do_upload()){
echo 0;
}else{
echo 1;
}
}