"ocupload 是一个用于文件上传的 jQuery 插件,主要功能是实现一键上传功能,尤其适合处理XML文件。在JavaScript环境中,通过调用ocupload插件,可以轻松地集成到网页中,提供用户友好的文件上传体验。" 在给定的代码示例中,ocupload 插件的使用方法如下: 1. 初始化插件: 当页面加载完成后,通过 jQuery 的 `$(function() {...})` 包裹来确保在DOM准备就绪时执行代码。调用 `.upload()` 方法初始化ocupload插件,传入配置对象,包括文件提交的路径、提交的键名以及额外的参数。 ```javascript $(function(){ $(".uploadfile").upload({ action: '../../AreaAction_upload.action', // 提交路径 name: 'xls', // 提交的键<input type="file" name="xls"/> params: { // 提交的参数 'rand': Math.random() }, ... }); }); ``` 2. 事件处理: - `onSelect`:文件选择后触发的回调函数。在这个例子中,它检查所选文件是否为XML文件。如果文件类型不符合要求,弹出警告提示。 ```javascript onSelect: function(self, element) { this.autoSubmit = false; var re = new RegExp("(xml){1}", "i"); if (!re.test(this.filename())) { alert("Only xml files can be uploaded"); } else { this.submit(); } }, ``` 3. 提交流程: - `onSubmit`:文件提交前触发的回调函数。在这里,隐藏上传按钮并显示上传进度指示器,提供用户反馈。 ```javascript onSubmit: function(self, element) { $('.uploadfile').hide(); $('#ajax_update').parent().show(); }, ``` 4. 处理结果: - `onComplete`:文件上传完成后触发的回调函数。此回调负责处理服务器返回的数据,显示成功或错误信息,并重置上传输入。 ```javascript onComplete: function(data, self, element) { $('#ajax_update').parent().hide(); $('.uploadfile').show(); self.resetInput(); try { var ret = data; if (ret.indexOf("exception") >= 0) { alert('Upload file exception: ' + eval(data)[0].exception); } else { showSuccess('File is successfully loaded.'); // 显示成功消息 uploadSuccess(ret); // 处理成功的上传逻辑 } } catch (err) { alert(data); } } ``` ocupload 插件的核心特性在于它简化了文件上传的过程,提供了丰富的事件回调以便进行自定义操作。在这个例子中,它特别强调了对XML文件的支持,并且在文件选择、提交、完成等阶段提供了相应的用户体验优化。通过调整 `params` 对象,可以传递任意的参数到服务器端,而 `onComplete` 回调可以根据实际业务需求处理服务器返回的结果。
$(".uploadfile").upload({ //调用ocupload插件
action: '../../AreaAction_upload.action', //提交路径
name: 'xls', //提交的键 <input type="file" name="xls" />
params: { //提交的参数
'rand': Math.random()
},
onSelect: function (self, element) { //当选择好文件后触发 => 检查文件是否合法
this.autoSubmit = false;
var re = new RegExp("(xml){1}quot;, "i");
if (!re.test(this.filename())) {
alert("Only xml file can be uploaded");
}
else {
this.submit();
}
},
onSubmit: function (self, element) { //提交时触发
$('.uploadfile').hide();
$('#ajax_update').parent().show();
//alert('Uploading file...');
},
onComplete: function (data, self, element) { //提交完成后触发
$('#ajax_update').parent().hide();
$('.uploadfile').show();
self.resetInput();
try {
var ret = data;
if (ret.indexOf("exception") >= 0) {
下载后可阅读完整内容,剩余1页未读,立即下载
- 粉丝: 2
- 资源: 1
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- C++标准程序库:权威指南
- Java解惑:奇数判断误区与改进方法
- C++编程必读:20种设计模式详解与实战
- LM3S8962微控制器数据手册
- 51单片机C语言实战教程:从入门到精通
- Spring3.0权威指南:JavaEE6实战
- Win32多线程程序设计详解
- Lucene2.9.1开发全攻略:从环境配置到索引创建
- 内存虚拟硬盘技术:提升电脑速度的秘密武器
- Java操作数据库:保存与显示图片到数据库及页面
- ISO14001:2004环境管理体系要求详解
- ShopExV4.8二次开发详解
- 企业形象与产品推广一站式网站建设技术方案揭秘
- Shopex二次开发:触发器与控制器重定向技术详解
- FPGA开发实战指南:创新设计与进阶技巧
- ShopExV4.8二次开发入门:解决升级问题与功能扩展