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>
 

$("#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>
 

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的形式進行上傳，二進位制流的形式進行上傳，對於限制檔案型別存在缺陷。