公告:本站提供编程开发方面的技术交流与分享,打造最佳教程网,希望能为您排忧解难!

JS教程czyx.uploadeReplace源码,纯javascript异步上传附件

czyx.uploadeReplace源码,纯javascript异步上传附件

更新时间:2013-05-26 00:33:50|卓燚原创作品|

1

/**

3 * @author merauy@gmail.com

4 * @resource http://www.goodxyx.com/jquery/plugins/uploadreplace.html

5 * @Copyright(c)2010~2014

6 * @version 1.0.0

7 * @direction javascript异步上传文件插件

8 * @comment 所谓的AJAX异步上传附件,以目前(2010-10-01)的知识来说不准确。

9 *   JS没有提供ajax直接上传的接口,目前大部分的异步上传控件是FLASH来实现。

10 *   再ajax出现之前,JS就可以实现异步上传文件功能了

11 *   本代码清晰展示了JS异步上传的实现原理

12 *   该上传插件可以不依赖于jQuery,有了jQuery使得代码更少而已

13 *   该插件仅用于学习与分享,希望能帮助大家。

14 *

15 */

$.extend(czyx,{

    uploadReplace:function(selectedQueryparam){

18        param = param||{};

19        param = $.extend(true,{},czyx.uploadSettings,param);

20        param.url = param.url||window.location.href||'';

21        param.MAX_FILE_SIZE = !-[1,] && param.MAX_FILE_SIZE ;

        return $(selectedQuery).each(function(){

23                //绑定click只是让效果看上去更好,与上传功能无关

                var jThis = $(this).click(function(){

                    $(this).parent().css({

26                                opacity:1,

27                                filter:'alpha(opacity=100)'

28                            });

29                }) ;

                if(jThis.is('input[type="file"]')){

31                    var div = $('<div />')

32                        .insertBefore(jThis.css(param.uploadInputCss))

33                        .css(param.uploadReplaceCss)

34                        .attr('id'czyx.getNextTempId())

                        .hover(function(){

                            $(this).css({

37                                opacity:0.7,

38                                filter:'alpha(opacity=70)'

39                            });

                        },function(){

                            $(this).css({

42                                opacity:1,

43                                filter:'alpha(opacity=100)'

44                            });

45                        });

46

47                    //有一篇文章说,IE浏览器可以设置最大字节数,那么我就加上这句的

48                    //<input type="hidden" name="MAX_FILE_SIZE" value="30000" />

49                    //MAX_FILE_SIZE 隐藏字段(单位为字节)必须先于文件输入字段,其值为接收文件的最大尺寸。

50                    //这是对浏览器的一个建议,PHP 也会检查此项。

51                    //在浏览器端可以简单绕过此设置,因此不要指望用此特性来阻挡大文件。

52                    //实际上,PHP 设置中的上传文件最大值是不会失效的。

53                    //但是最好还是在表单中加上此项目,

54                    //因为它可以避免用户在花时间等待上传大文件之后才发现文件过大上传失败的麻烦。

55                    //详见:http://www.ugia.cn/?p=73

                    if(param.MAX_FILE_SIZE){

57                        this.MAX_FILE_SIZE = param.MAX_FILE_SIZE ;

58                    }

59

                    jThis.appendTo(div).change(function(){

61                        var tidDiv = $(this).parent().attr('id'),jForm;

62                        tidIframe  = czyx.getNextTempId(),

63                        tidForm    = czyx.getNextTempId();

64

                        if(param.uploadBefore.call(this) === false){

66                            return false ;

67                        }

                        if(!this.name){

69                            $(this).attr('name''czyxupload').data('addTempName'1);

70                        }

71

                        jForm = $('<form id="' + tidForm + '" action="' + param.url + '" '

73                            + 'method="post" style="display:none;" '

74                            + 'enctype="multipart/form-data"></form>'

75                        ).appendTo('body');

76

                        if(param.data){

78                            jForm.html(czyx.toFormString(param.data));

79                        }

80                        jForm.append(this).data('uploadEnd',param.uploadEnd);

81

                        $('<iframe src="'

83                            + (/^https/i.test(window.location.href || '') ? 'javascript:false' : 'about:blank')

84                            + '" '

85                            + 'id="' + tidIframe+'" '

86                            + 'style="display:none;" '

87                            + 'name="' + tidIframe+'" '

88                            + 'onload="czyx._uploadEnd(this,\'' + tidDiv + '\',\'' + tidForm + '\');">'

89                            + '</iframe>'

90                        ).appendTo('body');

91                    });

92                }

93        });

94    },

    uploadSettings:{

96        uploadReplaceCss:{//上传控件默认样式

97            width:80,

98            height:20,

99            overflow:'hidden',

100            position:'relative',

101            background:'url('+czyx.rootPath+'czyx/images/upload.png) center no-repeat'

102        },

        uploadInputCss:{

104            fontSize:72,

105            cursor:'pointer',

106            position:'absolute',

107            right:0,

108            //bottom:0,

109            filter:'alpha(opacity=0)',

110            opacity:0,

111            outline:'none',

112            hideFocus:'expression(this.hideFocus=true)'

113        },

114        uploadEnd:$.noop,    //上传前的回调函数,如果返回 false将不执行上传

115        uploadBefore:$.noop//上传完毕后的回调函数,参数服务器端返回的字符串

116        MAX_FILE_SIZE:null   //上传的文件最大字节数,暂不支持

117    },

    _uploadEnd:function(iframeNodedivIdformId){

119        var jForm = $('#'+formId);

        if(jForm.attr('target') != iframeNode.name){

121            jForm.attr('target'iframeNode.name).submit();

        }else{

123            var jFile = jForm.find('input:last');

            if(jFile.data('addTempName')){

125                jFile.removeData('addTempName').removeAttr('name');

126            }

            jForm.data('uploadEnd').call(

128                jFile.appendTo('#'+divId).get(0),

                (iframeNode.contentWindow ?

130                    iframeNode.contentWindow.document :

131                        iframeNode.contentDocument ?

132                        iframeNode.contentDocument :

133                        iframeNode.document

134                ).body.innerHTML

135                .split('&lt;').join('<')

136                .split('&gt;').join('>')

137                .split('&amp;').join('&')

138            );

139            jForm.removeData('uploadEnd').remove();

140            $(iframeNode).remove();

141        }

142    }

143});

144

最佳教程网

最大的技术交流平台 www.goodxyx.com© CopyRight 2011-2013, All Rights Reserved

浙ICP备11033019号