简单的 jquery + php 上传插件

最新推荐文章于 2021-03-10 08:32:47 发布

zhangchong_dk

最新推荐文章于 2021-03-10 08:32:47 发布

阅读量648

点赞数

分类专栏： jQuery 文章标签： jquery 上传 php ajax

本文链接：https://blog.csdn.net/zhangchong_dk/article/details/25073305

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

写了个小插件基于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数据
?>