jQuery的uploadify插件实现文件跨域上传

1、jQuery的uploadify插件官网地址：

http://www.uploadify.com/documentation/

2、按照官网要求下载指定的js，css代码与swf文件

<script src="uploadify/jquery.uploadify.js"></script>

<link rel="stylesheet" href="uploadify/uploadify.css">

3、文件上传的代码模板：

html中添加按钮标签：

<div style="float: left"><input type="file" name="file_upload" id="file_upload" /></div>
<div style="float: left"><a href="javascript:$('#file_upload').uploadify('upload','*')">上传录音</a></div>
<div></br></div>
<div id="fileQueue"></div>

js逻辑代码：

$("#file_upload").uploadify({
'method':'post',
//手动上传
'auto' : false,
//自定义按钮名字
'buttonText' : '选择录音',
//指定swf文件位置
'swf' : '/sap/uploadify/uploadify.swf',
//指定上传的路径
            'uploader'    : 'http://10.0.0.160:8080/sap' + '/voiceUpload/uploadVoice',
            //指定按钮的长宽高
            'height' : 28,
            'width' : 100,
//在浏览窗口底部的文件类型下拉菜单中显示的文本
            'fileTypeDesc' : 'Files',
            //允许上传的文件后缀
            'fileTypeExts' : '*.wav; *.pcm; *.mp3',
            //上传文件页面中，你想要用来作为文件队列的元素的id, 默认为false  自动生成,  不带#
            'queueID' : 'fileQueue',
            //设置为true将允许多文件上传
            'multi' : true,
            //设置选择文件的事件
            'onSelect' : function(file) {
                voiceNumber += file.id + ",";
                voiceName += file.name  + ",";
                voiceSize += file.size  + ",";
                voiceType += file.type + ",";
                selectCount += 1;

            },
//上传成功后执行
            'onUploadSuccess': function (file, data, response) {
                $('#' + file.id).find('.data').html(' 上传完毕');
                //文件上传完成后将数据自增一
                voiceCount += 1;
                //在文件上传成功之后 获取当前数据 添加timeout
                if(voiceCount == selectCount) {
                    $timeout(function () {
                        $scope.showConfirm = true;
                        $scope.confirmMessage = "是否进行转写";
                        $scope.modalFlag = true;
                    },300);
                };

            },
            'onUploadError': function (file) {
                $scope.knowMessage = "上传加载失败";
                $scope.showKnowFlag = true;
            }

        });

注意：录音上传成功的回调函数为每上传一条成功就进行回调，我在这里通过onSelect事件判断获取录音的条数，通过条数控制当所有的录音都上传成功后进行之后的逻辑。

4、为了实现跨域请求我们需要下载配置xml文件

crossdomain.xml

内容如下：

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
	<site-control permitted-cross-domain-policies="all" />
	<allow-access-from domain="*" />
	<allow-http-request-headers-from domain="*" headers="*" />
</cross-domain-policy>

将文件放到tomcat的根目录下：

E:\xxx\Tomcat7\webapps\ROOT

如果是idea编译器需要配置 External Source，将root路径添加上。

5、java端接收文件代码：

/**
     * 将录音上传到指定路径
     * @param request
     * @return
     */
    @RequestMapping(value = "/uploadVoice")
    @ResponseBody
    public ResultMessage uploadVoice(HttpServletRequest request) {
        //创建返回值
        ResultMessage rm = new ResultMessage();
        try {
            //创建文件工厂
            DiskFileItemFactory factory = new DiskFileItemFactory();
            //创建文件上传解析器
            ServletFileUpload upload = new ServletFileUpload(factory);
            //设置文件名编码
            upload.setHeaderEncoding("UTF-8");
            //解析上传数据
            List<FileItem> items = upload.parseRequest(request);
            //遍历结果集
        for(FileItem item : items) {
                //上传的是文件
                if(!item.isFormField()) {
                    //获取文件名
                    String filename = item.getName();
                    //获取文件输出流
                    InputStream inputStream = item.getInputStream();
                    //创建文件输出流
                    FileOutputStream outputStream = new FileOutputStream("C:\\Users\\xxx\\Desktop\\output\\"+filename);
                    //创建缓存区
                    byte[] bytes = new byte[1024];
                    //创建读取标识
                    Integer len = 0;
                    //循环输出
                    while((len=inputStream.read(bytes)) > 0) {
                        outputStream.write(bytes,0,len);
                        outputStream.flush();
                    }
                    inputStream.close();
                    outputStream.close();
                    item.delete();
                }
            }
            rm.setMessage("文件上传成功");
            rm.setSuccess(true);
        } catch (Exception e) {
            e.printStackTrace();
            rm.setMessage("文件上传失败");
            rm.setSuccess(false);
        }
        return rm;
    }

6、此时实现了文件的跨域上传！

这个插件实现文件上传时是将文件以Content-type为application/octet-stream的形式进行上传，二进制流的形式进行上传，对于限制文件类型存在缺陷。