【笔记】上传图片和音频

package image;


import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import java.util.UUID;

import javax.servlet.ServletConfig;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;


/**
 * 文件上传
 * @author Administrator
 *
 */
public class ImageAction extends HttpServlet {
    
      private static final long serialVersionUID = 1L;  
      
        // 保存文件的目录
        private static String PATH_FOLDER1 = "/";
        private static String PATH_FOLDER2 = "/";
        // 存放临时文件的目录
        private static String TEMP_FOLDER = "/";
        
        
        @Override
        public void init(ServletConfig config) throws ServletException {
            ServletContext servletCtx = config.getServletContext();
            // 初始化路径
            // 保存文件的目录
            PATH_FOLDER1 = servletCtx.getRealPath("/audioUpload");
            PATH_FOLDER2 = servletCtx.getRealPath("/imageUpload");
            // 存放临时文件的目录,存放xxx.tmp文件的目录
            TEMP_FOLDER = servletCtx.getRealPath("/uploadTemp");
        }

        /**
         * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
         *      response)
         */
        protected void doGet(HttpServletRequest request,
                HttpServletResponse response) throws ServletException, IOException {
            request.setCharacterEncoding("utf-8"); // 设置编码
            response.setCharacterEncoding("utf-8");
            response.setContentType("text/html;charset=UTF-8");
            String method = request.getParameter("method");
            if (method == null) {
                method = "image";
            }

            if ("image".equals(method)) {
                image(request, response);
            } else if ("audio".equals(method)) {
                audio(request, response);
            }
        }
        private void image(HttpServletRequest request,
                HttpServletResponse response) {
            // 获得磁盘文件条目工厂
            DiskFileItemFactory factory = new DiskFileItemFactory();
            
            // 如果没以下两行设置的话，上传大的 文件 会占用 很多内存，
            // 设置暂时存放的 存储室 , 这个存储室，可以和 最终存储文件 的目录不同
            /**
             * 原理 它是先存到 暂时存储室，然后在真正写到 对应目录的硬盘上， 按理来说 当上传一个文件时，其实是上传了两份，第一个是以 .tem
             * 格式的 然后再将其真正写到 对应目录的硬盘上
             */
            factory.setRepository(new File(TEMP_FOLDER));
            // 设置 缓存的大小，当上传文件的容量超过该缓存时，直接放到 暂时存储室
            factory.setSizeThreshold(1024 * 1024);

            // 高水平的API文件上传处理
            ServletFileUpload upload = new ServletFileUpload(factory);
            
            try {
                // 提交上来的信息都在这个list里面
                // 这意味着可以上传多个文件
                // 请自行组织代码
                List<FileItem> list = upload.parseRequest(request);
                // 获取上传的文件
                FileItem item = getUploadFileItem(list);
                // 获取文件名
                String filename = getUploadFileName1(item);
                
//                System.out.println("存放目录:" + PATH_FOLDER);
//                System.out.println("文件名:" + filename);
                // 真正写到磁盘上
                item.write(new File(PATH_FOLDER2, filename)); // 第三方提供的
                
                PrintWriter writer = response.getWriter();
                
                writer.print("{");
//                writer.print("msg:"文件大小:"+item.getSize()+",文件名:"+filename+""");
                writer.print("msg:""+filename+""");
                writer.print("}");
                
                writer.close();
            
            } catch (FileUploadException e) {
                e.printStackTrace();
            } catch (Exception e) {
                e.printStackTrace();
            }
            
            
        }
        private void audio(HttpServletRequest request,
                HttpServletResponse response) {
            // 获得磁盘文件条目工厂
            DiskFileItemFactory factory = new DiskFileItemFactory();
            
            // 如果没以下两行设置的话，上传大的 文件 会占用 很多内存，
            // 设置暂时存放的 存储室 , 这个存储室，可以和 最终存储文件 的目录不同
            /**
             * 原理 它是先存到 暂时存储室，然后在真正写到 对应目录的硬盘上， 按理来说 当上传一个文件时，其实是上传了两份，第一个是以 .tem
             * 格式的 然后再将其真正写到 对应目录的硬盘上
             */
            factory.setRepository(new File(TEMP_FOLDER));
            // 设置 缓存的大小，当上传文件的容量超过该缓存时，直接放到 暂时存储室
            factory.setSizeThreshold(1024 * 1024);

            // 高水平的API文件上传处理
            ServletFileUpload upload = new ServletFileUpload(factory);
            
            try {
                // 提交上来的信息都在这个list里面
                // 这意味着可以上传多个文件
                // 请自行组织代码
                List<FileItem> list = upload.parseRequest(request);
                // 获取上传的文件
                FileItem item = getUploadFileItem(list);
                // 获取文件名
                String filename = getUploadFileName2(item);
                filename=filename+".wav";
//                System.out.println("存放目录:" + PATH_FOLDER);
//                System.out.println("文件名:" + filename);
                // 真正写到磁盘上
                item.write(new File(PATH_FOLDER1, filename)); // 第三方提供的
                
                PrintWriter writer = response.getWriter();
                
//                writer.print("{");
//                writer.print("msg:"文件大小:"+item.getSize()+",文件名:"+filename+""");
                writer.print(filename);
//                writer.print("}");
                
                writer.close();
            
            } catch (FileUploadException e) {
                e.printStackTrace();
            } catch (Exception e) {
                e.printStackTrace();
            }
            
            
        }
        private FileItem getUploadFileItem(List<FileItem> list) {
            for (FileItem fileItem : list) {
                if(!fileItem.isFormField()) {
                    return fileItem;
                }
            }
            return null;
        }
        private String getUploadFileName1(FileItem item) {
            // 获取路径名
            String value = item.getName();
            // 索引到最后一个反斜杠
            int start = value.lastIndexOf("/");
            // 截取 上传文件的 字符串名字，加1是 去掉反斜杠，
            String name =UUID.randomUUID().toString().trim().replaceAll("-", "");
            int sub = value.lastIndexOf(".");
            String filename = value.substring(value.length()-sub,value.length());
            
            return name+filename;
        }
        private String getUploadFileName2(FileItem item) {
            // 获取路径名
            String value = item.getName();
            // 索引到最后一个反斜杠
            int start = value.lastIndexOf("/");
            // 截取 上传文件的 字符串名字，加1是 去掉反斜杠，
            String name =UUID.randomUUID().toString().trim().replaceAll("-", "");
            String filename = value.substring(value.length()-4,value.length());
            
            return name+filename;
        }
        

        /**
         * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
         *      response)
         */
        protected void doPost(HttpServletRequest request,
                HttpServletResponse response) throws ServletException, IOException {
            this.doGet(request, response);
        }  


}

var imageName="";
function ajaxFileUpload() {
    
    $.ajaxFileUpload({  
        url : project+"/image/ImageAction?method=image",// servlet请求路径  
        secureuri : false,  
        fileElementId : 'fileToUpload',// 上传控件的id  
        async:false,
        dataType : 'json',  
        success : function(data, status) {  
            if(data.msg) {  
                imageName="["+data.msg+"]";
                sendImg();
            }  
        },  
        error : function(data, status, e) {  
            alert('发送图片出错');  
        }  
    }) 
    
}  

录音，上传

//调整兼容
navigator.getUserMedia=navigator.getUserMedia|| navigator.webkitGetUserMedia||navigator.mozGetUserMedia || navigator.msGetUserMedia;
//请求麦克风
    navigator.getUserMedia({audio: true},function(e){
        alert(1);
    var data,p;
    window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;
    alert(window.AudioContext);
    var context=new window.AudioContext();
  //从麦克风的输入流创建源节点
      var stream=context.createMediaStreamSource(e);
  //用于录音的processor节点
      var recorder=context.createScriptProcessor(1024,1,0);
      recorder.onaudioprocess=function(e){
         if(record.value=="停止")data.push(e.inputBuffer.getChannelData(0));
      };
  //用于播放的processor节点
  var player=context.createScriptProcessor(1024,0,1);
      player.onaudioprocess=function(e){
        if(!data)return;
        var i,s=data[p++];
        if(!s)return play.value=="停止"&&play.click();
        var buffer=e.outputBuffer.getChannelData(0);
        for(i=0;i<s.length;i++)buffer[i]=s[i];
  };
  
  
  //录音/停止 按钮点击动作
  var record = document.getElementById("record");
  record.onclick=function(){
    if(record.value=="录音")
      return data=[],stream.connect(recorder),this.value="停止",timedCount();
    if(record.value=="停止")
      return stream.disconnect(),save(),this.value="录音",stopCount();
  };
  
  var c=1;
  var t;
  function timedCount(){
      document.getElementById('timer').innerHTML=(c)+"秒";
      if(c<=60){
          c = c+1;
          t = setTimeout(timedCount,1000);
      }else{
          stream.disconnect(),save(c),document.getElementById("record").value="录音",stopCount();
      }
  }
  
  function stopCount(){
       c=1;
       clearTimeout(t);
       document.getElementById('timer').innerHTML="";
   }
  
 /*  //播放/停止 按钮点击动作
  play.onclick=function(){
    if(this.value=="播放")
      return p=0,player.connect(context.destination),this.value="停止";
    if(this.value=="停止")
      return player.disconnect(),this.value="播放";
  }; */
  //保存
  function save(){
      if(record.value=="停止"){
        var frequency=context.sampleRate; //采样频率
        var pointSize=16; //采样点大小
        var channelNumber=1; //声道数量
        var blockSize=channelNumber*pointSize/8; //采样块大小
        var wave=[]; //数据
        for(var i=0;i<data.length;i++)
          for(var j=0;j<data[i].length;j++)
            wave.push(data[i][j]*0x8000|0);
        var length=wave.length*pointSize/8; //数据长度
        var buffer=new Uint8Array(length+44); //wav文件数据
        var view=new DataView(buffer.buffer); //数据视图
        buffer.set(new Uint8Array([0x52,0x49,0x46,0x46])); //"RIFF"
        view.setUint32(4,data.length+44,true); //总长度
        buffer.set(new Uint8Array([0x57,0x41,0x56,0x45]),8); //"WAVE"
        buffer.set(new Uint8Array([0x66,0x6D,0x74,0x20]),12); //"fmt "
        view.setUint32(16,16,true); //WAV头大小
        view.setUint16(20,1,true); //编码方式
        view.setUint16(22,1,true); //声道数量
        view.setUint32(24,frequency,true); //采样频率
        view.setUint32(28,frequency*blockSize,true); //每秒字节数
        view.setUint16(32,blockSize,true); //采样块大小
        view.setUint16(34,pointSize,true); //采样点大小
        buffer.set(new Uint8Array([0x64,0x61,0x74,0x61]),36); //"data"
        view.setUint32(40,length,true); //数据长度
        buffer.set(new Uint8Array(new Int16Array(wave).buffer),44); //数据
        //打开文件
        var blob=new Blob([buffer],{type:"audio/wav"});
//        open(URL.createObjectURL(blob));

//        var form=document.forms[0];
        var formData = new FormData();  
        formData.append("imageName",blob); 
         $.ajax({
            url : project+"/image/ImageAction?method=audio",
            type : "POST",
            data : formData,
            dataType:"text",
            async:false,
            processData : false,         // 告诉jQuery不要去处理发送的数据
            contentType : false,        // 告诉jQuery不要去设置Content-Type请求头
            success:function(data){
                  imageName="["+data+"]";
                  sendAudio(c);
            },  
            error : function(data, status, e) {  
                alert('发送语音出错');  
            }  
           })
       }
  };
},function(e){
  console.log("请求麦克风失败");
  alert("未检测到麦克风");
});

<input style="display:none" value="录音" type="button" id="record" />
     <form id="imageForm" name="form" action="" enctype="multipart/form-data" method="POST" >  
        <input style="display:none" id="fileToUpload" type="file" size="45" name="fileToUpload" accept="image/*;capture=camera">  
     </form>