使用jQuery ocupload插件实现一键上传
来源:互联网 发布:vb延时函数 编辑:程序博客网 时间:2024/05/21 06:11
使用jQuery ocupload插件实现一键上传
在我前面的博客中写了文件的上传,其实那种方法比较的麻烦,它里面需要注意的事项为:
1、必须同步提交form表单
2、Form表单编码方式 multipart/form-data
3、提交方式必须为post
4、上传的文件对应 input type="file"元素要提供name属性。
使用jQuery ocupload是对它的一个封装,不用这么的麻烦,还提供了(异步提交)提交不会跳转的效果。
要导入jquery.ocupload-xxx.js
下面我将举一个使用的小例子
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script><script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.ocupload-1.1.2.js"></script><title>Insert title here</title><script type="text/javascript">$(function () { //页面加载完成后 $("#upload").upload({ //调用ocupload插件 action: '../../xxxxxxx.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) { //提交时触发 $('#upload').hide(); $('#ajax_update').parent().show(); //alert('Uploading file...'); }, onComplete: function (data, self, element) { //提交完成后触发 $('#ajax_update').parent().hide(); $('#upload').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 Load.'); uploadSuccess(ret); } } catch (err) { alert(data); } } }); }); </script></head><body><input type="button" id="upload" value="上传文件"/></body></html>传到后台用一个File类型的变量名为xls去接收,就可以得到上传的文件。
阅读全文
0 0
- 使用jQuery ocupload插件实现一键上传
- PHP使用ocupload插件 一键上传并解析EXCEL
- jquery ocupload一键上传文件应用
- jquery ocupload一键上传文件应用
- jquery ocupload一键上传原理
- ssh框架下ocupload实现一键上传功能
- 区域批量导入ocupload一键上传使用
- jquery的上传插件ocupload与图表插件highcharts
- 使用ocupload和POI一键上传Excel并解析导入数据库
- jquery ocupload
- ocupload、struts2实现excel文件上传,poi解析
- jquery插件实现文件上传
- jQuery使用ajaxfileupload插件实现ajax文件上传
- 使用jQuery.form插件实现表单异步提交+上传文件
- 使用JQuery.form插件实现无跳转上传
- 使用jQuery.form插件实现表单异步提交+上传文件
- Ajax实现文件上传(使用jQuery插件之ajaxFileUpload)
- JQuery上传插件Uploadify使用
- openlayer 图形样式编辑
- 【Scikit-Learn 中文文档】Pipeline(管道)和 FeatureUnion(特征联合): 合并的评估器
- 一个取巧找重复值的算法问题
- Spring+MyBatis实现数据库读写分离方案
- HDU 3248
- 使用jQuery ocupload插件实现一键上传
- 排序算法总结
- JVM相关(包括了各个版本的特性)
- C++ string
- Java的运行(基础必备)
- OpenCV-python不懂知识点整理
- 【个人训练】(UVa11129)An antiarithmetic permutation
- 51单片机实验2017年12月4日
- 创建sysfs节点之device_create_file、sysfs_create_group