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

JS教程纯javascript异步上传控件czyx.uploadeReplace属性及功能介绍

纯javascript异步上传控件czyx.uploadeReplace属性及功能介绍

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

czyx.uploadReplace是一个纯javascript异步上传文件的控件,关于javascript异步上传文件的原理详见:http://www.goodxyx.com/js/article/cee3cc.html本控件依赖于jQuery框架,主要实现了如下几个功能。

使用方法

czyx.uploadReplace('文件域', options);

参数说明

1

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

3    width:80,

4    height:20,

5    overflow:'hidden',

6    position:'relative',

7    background:'url(http://www.goodxyx.com/images/upload.png) center no-repeat'

8},

9data:null,           //上传时向后台传递的参数

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

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

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

13

示例代码

纯javascript异步上传文件

1

czyx.uploadReplace('#uploadReplace',{

3    url:'http://www.goodxyx.com/upload'//文件处理的URL

    uploadBefore:function(){

5        //通过this.value获取当前上传的文件名

6        //这里可以对文件后缀名进行验证

7        return false ;//如果不想往后继续执行 return false

8    },

9    uploadEnd:function(serverStr){//上传完毕后调用

10        //如果是json格式,使用 $.parseJSON(serverStr)转化一下

11        alert("上传完毕后服务器端返回的字符串:\n" + serverStr);

12    }

13});

14

自定义上传按钮背景图片及其样式

1

czyx.uploadReplace('#uploadReplace',{

3    url:'http://www.goodxyx.com/upload'//文件处理的URL

    uploadReplaceCss:{

5        //设置上传按钮图片

6        background:'url(http://www.goodxyx.com/images/uploadImg.jpg)'

7        + ' center no-repeat'

8    },

9});

10

11

上传图片的同时可以传递参数

1

var goodxyxData = {

3    param1:1,

4    paramArr:['arr1''arr2''arr3'],

5    paramObj:{obj1:'obje'obj2:'obj2'}

6};

czyx.uploadReplace('#demo3',{

8    url:'http://www.goodxyx.com/upload'//文件处理的URL

9    data:goodxyxData        //上传图片的同时 POST上传的数据

10});

11

相关内容

js异步上传原理
最佳教程网

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

浙ICP备11033019号