写了个小插件 基于jquery + php 上传文件
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="./js/upload.jquery.js"></script>
<title>jQuery 文件上传插件</title>
<style>
.uploadbtn {
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 4px;
cursor: pointer;
display: inline-block;
font-size: 14px;
padding: 6px 12px;
text-align: center;
height:24px;
line-height:24px;
background-color: #5BC0DE;
border-color: #46B8DA;
color: #FFFFFF;
}
</style>
</head>
<body>
<div class="uploadbtn">请选择要上传的文件(小于200K)</div>
</body>
</html>
调用方式:
$('.uploadbtn').upload({
url:'upload.php', //上传文件服务端处理路径
loading:'images/loading.gif', //上传中显示的loading图,不填的话就显示 “上传中…” 字样
success:function(data) {
//上传成功回调函数 data:服务端返回的json数据 (例如 图片的路径、大小等等)
},
error:function(data) {
//上传失败回调函数 默认 alert(data); data:上传失败的原因 (字符串)
}
});
uplaod.jquery.js
(function($) {
$.fn.upload=(function(options) {
var _this = $(this);
var _index = _this.index();
var _loading;
var _param = {
thumbWidth:0,
thumbHeight:0,
url:'',
input_name:'upload_file[]',
iframe_id:'upload_iframe_',
loading:'',
success:'',
error:function(data){alert(data);}
};
$.extend(_param,options);
if(!_param.url) return false;
var _body = $('body');
var _iframe = $('<iframe class="upload_iframe" id="'+_param.iframe_id+_index+'" name="'+_param.iframe_id+_index+'" frameborder="0" style="display:none;"></iframe>').hide().appendTo(_body);
var _div = $('<div class="upload_box_div" style="width:20px;height:20px;padding:0;margin:0;overflow:hidden; position:absolute;top:0;left:0;z-index:99999;"></div>').css({'opacity':0}).appendTo(_body);
var _form = $('<form method="post" action="'+_param.url+'" enctype="multipart/form-data" target="'+_param.iframe_id+_index+'"></form>').appendTo(_div);
var _input = $('<input type="file" style="width:100px;height:100px;cursor:pointer;margin-left:-50px;margin-top:-50px;" title="" name="'+_param.input_name+'" />').appendTo(_form);
if(_param.thumbWidth > 0) $('<input type="hidden" name="width" value="'+_param.thumbWidth+'" />').appendTo(_form);
if(_param.thumbHeight > 0) $('<input type="hidden" name="height" value="'+_param.thumbHeight+'" />').appendTo(_form);
_div.css({top:_this.offset().top,left:_this.offset().left});
_this.add(_div).mousemove(function(e) {
var _min_top = _this.offset().top;
var _min_left = _this.offset().left;
var _max_top = _this.offset().top+_this.outerHeight();
var _max_left = _this.offset().left+_this.outerWidth();
var _top = e.pageY-10;
var _left = e.pageX-10;
if(e.pageY < _min_top+10) _top = _min_top;
if(e.pageY > _max_top-10) _top = _max_top-20;
if(e.pageX < _min_left+10) _left = _min_left;
if(e.pageX > _max_left-10) _left = _max_left-20;
_div.css({top:_top,left:_left});
});
_input.change(function() {
_loading=$('<div></div>').css({'opacity':0.8,top:_this.offset().top,left:_this.offset().left,width:_this.outerWidth(),height:_this.outerHeight(),'position':'absolute','z-index':'999999','font-size':'12px','text-align':'center','line-height':_this.outerHeight()+'px','background':'#fff','color':'#000'}).appendTo(_body);
if(_param.loading != '') _loading.css('background','url('+_param.loading+') center center no-repeat #fff');
else _loading.html('uploading…');
_form.submit();
_iframe.bind('load',function() {
_loading.remove();
var _data = _iframe.contents().find('body').html();
if (_data) {
try {
_data = $.parseJSON(_data);
if(_data.status == 1){
if (_param.success) {
_param.success(_data.data);
_input_clone = _input.clone(true);
_input.after(_input_clone);
_input.remove();
_input = _input_clone;
}
}else _param.error(_data.msg);
}catch (e) { _param.error(e);}
}else _param.error('Upload Fail');
_iframe.unbind('load');
});
});
});
})(jQuery);
使用之前,先加载jquery库
php
<?php
/*
上传文件处理程序的代码 不写了,网上很多
*/
if(上传成功失败的判断) $result = array('status'=>1,'data'=>$data); // 上传成功返回的数据 $data 包含上传文件信息的数组
else $result = array('status'=>0,'msg'=>$msg); // 上传失败返回的数据 $msg 上传失败原因(字符串) 例如:文件类型不支持等
echo json_encode($result);exit; //输出json数据
?>