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、此时实现了文件的跨域上传！