Jquery.ocupload --- 文件上传入门

68 阅读 0 评论 45 点赞

我是靠谱客的博主神勇手链，最近开发中收集的这篇文章主要介绍Jquery.ocupload --- 文件上传入门，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、文件上传简单示例

1.1 引入jquery.ocupload

<!-- 导入jquery核心类库 -->
		<script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
		<!-- 导入ocupload -->
		<script type="text/javascript" src="../../js/ocupload/jquery.ocupload-1.1.2.js" ></script>

1.2 前端代码

// 为导入按钮添加一键上传效果
				$("#button-import").upload({
					//默认name为file,enctype默认提交方式为multipart/form-data
					action : "../../area_batchImport.action",
					//选中文件时候触发的事件
					onSelect:function () {
						//选中文件后，关闭自动提交
						this.autoSubmit = false;
						//判定文件格式，以.xls或者.xlsx结尾
						var filename =  this.filename();

						//校验的2种写法
						var reqex = /^.*.(xls|xlsx)$/
						var reqex1 = new RegExp(".xls|.xlsx");
                        //alert(reqex.test(filename));
                        //alert(reqex1.test(filename));

						if(reqex.test(filename)){
							this.submit();
						}else{
						    $.messager.alert("警告","只能上传.xls或.xlsx结尾的文件","warning")
						}
                    },
					//文件上传后触发的事件
                    onComplete:function () {
						alert("文件上传成功");
                    }
				});

1.3 后端代码

//接收上传的文件
    private File file;

    public void setFile(File file) {
        this.file = file;
    }

    //批量区域数据导入
    @Action(value = "area_batchImport")
    public String batchImport() throws IOException {
        List<Area> areas = new ArrayList<>();

        //编写解析代码逻辑
        //基于.xls格式解析文件
        //1、加载Excel文件对象
        HSSFWorkbook hssfWorkbook = new HSSFWorkbook(new FileInputStream(file));

        //2、读取一个sheet
        HSSFSheet sheet = hssfWorkbook.getSheetAt(0);

        //3、读取sheet中每一行
        for (Row row : sheet){
            //一行数据对应一个区域对象
            Area area = new Area();
            if (row.getRowNum() == 0){
                //跳过第一行表头
                continue;
            }

            //控制结束
            if (row.getCell(0) == null || StringUtils.isBlank(row.getCell(0).getStringCellValue())){
                continue;
            }

            area.setId(row.getCell(0).getStringCellValue());
            area.setProvince(row.getCell(1).getStringCellValue());
            area.setCity(row.getCell(2).getStringCellValue());
            area.setDistrict(row.getCell(3).getStringCellValue());
            area.setPostcode(row.getCell(4).getStringCellValue());

            //基于pinyin4j生成城市编码和简码
            String province = area.getProvince();
            String city = area.getCity();
            String district = area.getDistrict();
            province = province.substring(0,province.length() - 1);
            city = city.substring(0,city.length() - 1);
            district = district.substring(0,district.length() - 1);

            //简码
            String[] headArray = PinYin4jUtils.getHeadByString(province + city + district);
            StringBuffer buffer = new StringBuffer();
            for (String headStr : headArray) {
                buffer.append(headStr);
            }
            String shortcode = buffer.toString();
            area.setShortcode(shortcode);

            //城市编码
            String citycode = PinYin4jUtils.hanziToPinyin(city,"");
            area.setCitycode(citycode);

            areas.add(area);
        }

        //调用业务层，保存数据
        areaService.saveBatch(areas);

        return NONE;
    }

二、Jquery.ocupload官方文档

http://code.google.com/p/ocupload/

This documentation covers the following. 

    * Basic Usage 
    * Options 
    * Functions 
    * Callbacks 

Basic Usage 

As a jQuery chained function 

//方式一：
$(element).upload( /** options */ ); 

As a stand-alone jQuery function 

//方式二：
$.ocupload($(element), /** options */ ); 

Options 

Both of the functions accept an optional options object, which can contain any or all of the following (default value): 
	//文件上传的名字，默认值是file
    * name: ("file") The name of the file input form element. 
	//文件提交的方式，默认值是multipart/form-data
    * enctype: ("multipart/form-data") The enctype attribute of the form, it is usually a good idea to leave this as default. 
    //文件上传的action
	* action: (null) The form action attribute, the page that will do the processing on the server side. 
    //文件输入框发生变化时，自动提交
	* autoSubmit: (true) If true the form will be submitted after the user selects a file (after the file browser closes). 
    //文件上传时的额外参数
	* params: ({}) Additional paramaters to be sent with the file, creates a hidden form element using the key as the name of the form and the value as the value. 
    //提交时触发的事件
	* onSubmit: (null) The callback function called before submitting the form. 
    //文件上传后触发的事件
	* onComplete: (null) The callback function called after the action page loads. 
    //选中文件时触发的事件
	* onSelect: (null) The callback function called after the user has selected a file. 

Example 

var myUpload = $(element).upload({ 
        name: 'file', 
        action: '', 
        enctype: 'multipart/form-data', 
        params: {}, 
        autoSubmit: true, 
        onSubmit: function() {}, 
        onComplete: function() {}, 
        onSelect: function() {} 
}); 

Functions 
filename 
Description 

string filename ( void ) 

This function returns the name of the currently selected file. 
Example 

var myUpload = $(element).upload(); 
alert(myUpload.filename()); 

name 
Description 

string name ( void ) 
void name ( string ) 

This function is used to get and set the name of the file input. 
Example 

//Setting name at creation 
var myUpload = $(element).upload({ 
        name: 'myFile' 
}); 

//Changes the file input name to "myNewFile" 
myUpload.name('myNewFile'); 

//Alerts "myNewFile" 
alert(myUpload.name()); 

action 
Description 

string action ( void ) 
void action ( string ) 

This function is used to get and set the action of the form. 
Example 

//Setting action at creation 
var myUpload = $(element).upload({ 
        action: 'upload.php' 
}); 

//Changes the form action to "path/to/dir/newUpload.php" 
myUpload.action('path/to/dir/newUpload.php'); 

//Alerts "path/to/dir/newUpload.php" 
alert(myUpload.action()); 

enctype 
Description 

string enctype ( void ) 
void enctype ( string ) 

This function is used to get and set the enctype of the form. 
Example 

//Setting enctype at creation 
var myUpload = $(element).upload({ 
        enctype: 'multipart/form-data' 
}); 

//Changes the form enctype to "application/x-www-form-urlencoded" 
myUpload.enctype('application/x-www-form-urlencoded'); 

//Alerts "text/plain" 
alert(myUpload.enctype()); 

params 
Description 

object params ( void ) 
void params ( object ) 

This function is used to alter additional parameters. 
Example 

//Setting paramters at creation 
var myUpload = $(element).upload({ 
        params: {name: 'My file', description: 'My file description'}  
}); 

/** 
* Settings paramaters during runtime 
*      name: "My file" is replaced with "My new file 
*      description: remains the same 
*      size: is added 
*/ 
myUpload.params({ 
        name: 'My new file', size: '1000kb' 
}); 

set 
Description 

void set ( object ) 

This function is used to alter options after creation of the object. 
Example 

//Setting options at creation 
var myUpload = $(element).upload( /** options */ ); 

//Setting options after creation 
myUpload.set({ 
        name: 'file', 
        action: '', 
        enctype: 'multipart/form-data', 
        params: {}, 
        autoSubmit: true, 
        onSubmit: function() {}, 
        onComplete: function() {}, 
        onSelect: function() {} 
}); 

submit 
Description 

void submit ( object ) 

This function is used to submit the form if autoSubmit is turned off. 
Example 

Javascript 

var myUpload = $(element).upload( /** options */ ); 

HTML 

<input type="button" value="submit" onclick="myUpload.submit()" /> 

Callbacks 
onSubmit 

void onSubmit ( void ) 
Description 

This is called before the form is submitted, this is where you should make last minute changes to the parameters etc... 
onComplete 

void onComplete ( response ) 
Description 

This is called after the action page has loaded, the first parameter contains the html response from the action so you can use it like an AJAX response. onComplete does not mean the file was uploaded successfully, you should use the action script to supply a suitable response. 
onSelect 

void onSelect ( void ) 
Description