jQuery文件上传插件

插件介绍
html的file控件由一个text框和一个button构成。存在如下几个问题：
1、text框中无法初始化一些说明文字。
2、button上的字是浏览器内置的，修改不了，英文版的浏览器是“Browser…”,中文版的浏览器是“浏览…”，导致无法给按钮上的文字国际化。
3、button的样式也是浏览器内置的，控制不了。
要达到下图的效果，type=”file”不可能。

jquery.fakeUpload就是为了解决上述问题而编写的插件。

如何使用
1、导入jquery.fakeUpload.js（当然它是依赖jquery的）
2、在html的body中加入span或div元素

<span id="span1" name="myfile"></span> //name为后台需要接受的文件参数

3、在jquery的ready方法中初始化fakeUpload组件，初始时参数都是非必须的。

$("#span1").fakeUpload("init",{    
    tiptext:"只可选*.jpg文件",    
    btntext:"选择文件...",    
    btnclass:"btn"
}); 

4、在页面中通过var path=$(“#span1”).fakeUpload(“getPath”);获取选择文件的全路径

引用

关于后台如何处理？
1、可以将这个控件就当做浏览器的file控件来对待。
2、文件数据会根据name指定的名字（myfile）传到后台。Action中需要定义一个private File myFile并有相应的set方法。
3、数据需要通过form表单提交过去，form的method="post"，enctype="multipart/form-data"。

方法
init
初始化控件，调用$(“XX”).fakeUpload(“init”,params);
参数
Object，属性介绍如下。
    •tiptext：String，可选，放在text框中的说明性文字，默认空串。
    •width：Number，可选，text框的宽度，默认150。
    •btnclass：String，可选，应用在按钮上的Class Name(s)，默认“BUTTON75”。
    •btntext：String，可选，按钮上的文字，默认“浏览…”。
    •checkfn：Function，可选，选择文件后通过这个回调函数验证文件，文件全路径和file组件的name会作为函数参数传给回调函数，默认为

function(filePath,name){    
    return true;
}

返回值
jQuery对象。

getPath
获取选择的文件全路径，调用$(“XX”).fakeUpload(“getPath”);
参数
无
返回值
String，文件全路径。

评论

1 楼 zcqshine 2012-11-14  

试试看..........