jQuery AjaxUpload中文使用API和demo示例

时间:2022-04-16 06:59:39

1、AjaxUpload上传插件

  浏览器迫使我们使用文件输入控件(<input type=”file” />)做上传,然而此控件的样式是不能改削的。别的,基于表单上传在风行的Ajax应用措施面前显得过时了。我们可以使用flash解决这个问题, 但实际上JavaScript也能做的很超卓。

Ajax Upload文件上传插件允许你上传多个插件而无需刷新页面,可以使用任何的元素来显示文件选择窗口。它可以在所有主流的浏览器下事情,从2.0版本开 始,,不需要任何库运行。Ajax Upload文件上传插件不会污染任何定名空间,所以它与jQuery,Prototypejs,mootools其他JavaScript库兼容。

Demo实例
下面是一个在jQuery下使用AjaxUpload插件的实例。

下载
版本3.6 颁布于2009-03-10

问题,孝敬和最新版本
该项目比来已经移到了GitHub,欢迎您去折腾它。也更愿意您使用“问题跟踪(issue tracker)”留下定见,错误呈报和要求。您必需先要在GitHub上注册才行。

2、如何去使用它?

创建上载
首先,您需要创建一个按钮。(可以使用任意的元素)

-收缩HTML代码    [如果运行无效果,请自行将源代码生存为html文件运行]

<div id="upload_button">上传</div>

接下来,您应该创建Ajax上传实例。您可以使用以下代码创建最简单的形式:

-收缩JavaScript代码

// 您必需在 DOM 筹备好之后在创建它
//在jquery下使用 $(document).ready
// prototype下为document.observe("dom:loaded"
new AjaxUpload(‘upload_button_id‘, {action: ‘upload.php‘});

配置Ajax上传

-收缩JavaScript代码

new AjaxUpload(‘#upload_button_id‘, {
// 处事器端上传脚本
// 注意: 文件不允许上传到此外一个域上
action: ‘upload.php‘,
// 文件上传的名字
name: ‘userfile‘,
// 发送的附加数据
data: {
example_key1 : ‘example_value‘,
example_key2 : ‘example_value2′
},
// 筛选后提交文件
autoSubmit: true,
// 您但愿从处事器返回的数据类型
// HTML (text) 和 XML 自动检测
// 当您使用JSON作为响应时很实用,在这种情况下就设置为 "json"
// 也要设置处事器真个响应类型为text/html, 否则在IE6下是不事情的
responseType: false,
// 文件选择后使用
// 当autoSubmit为disabled时很管用
// 您可以通过返回false打消上传
// @参数file为上传文件的文件名
// @参数extension为阿谁文件(后缀名)
onChange: function(file, extension){},
// 文件上传时挪用
// 您可以通过设置返回false 打消上传
// @参数file为上传文件的文件名
// @参数extension为阿谁文件(后缀名)
onSubmit: function(file, extension) {},
// 当文件上传完成的时候挪用
// 警告!不要使用"false"字符串作为处事器的响应
// @参数file 指上传的文件名
// @参数 response 指处事器的响应
onComplete: function(file, response) {}
});

  注意:不要使用数据参数附加动态数据,就像"data: (txt:textfield.value)",因为它将在AJAXUpload实例创建的时候分配数据且以后不会转变。如果你想文本框的通报的其他数据,使用在onSubmit回调函数中的SetData要领。

实例要领
*submit – 提交文件随处事器(当autoSubmit被禁用时有用)
*disable – 禁用上传按钮
*enable – 允许上传按钮
*destroy – 清理AjaxUpload东西
* setData(data) – 笼罩数据参数

-收缩JavaScript代码

//您可以使用这些要领来配置AJAX的上传
var upload = new AjaxUpload(‘#div_id‘,{action: ‘upload.php‘});
//例如当用户选择了一些对象,设置一些参数
upload.setData({‘example_key‘: ‘value‘});
//或者您可以在事件函数中直接使用这些要领
new AjaxUpload(‘div_id‘, {
action: ‘upload.php‘,
onSubmit: function() {
//仅允许一个上传
this.disable();
}
});
});