1 package image; 2 3 4 import java.io.File; 5 import java.io.IOException; 6 import java.io.PrintWriter; 7 import java.util.List; 8 import java.util.UUID; 9 10 import javax.servlet.ServletConfig; 11 import javax.servlet.ServletContext; 12 import javax.servlet.ServletException; 13 import javax.servlet.http.HttpServlet; 14 import javax.servlet.http.HttpServletRequest; 15 import javax.servlet.http.HttpServletResponse; 16 17 import org.apache.commons.fileupload.FileItem; 18 import org.apache.commons.fileupload.FileUploadException; 19 import org.apache.commons.fileupload.disk.DiskFileItemFactory; 20 import org.apache.commons.fileupload.servlet.ServletFileUpload; 21 22 23 /** 24 * 文件上传 25 * @author Administrator 26 * 27 */ 28 public class ImageAction extends HttpServlet { 29 30 private static final long serialVersionUID = 1L; 31 32 // 保存文件的目录 33 private static String PATH_FOLDER1 = "/"; 34 private static String PATH_FOLDER2 = "/"; 35 // 存放临时文件的目录 36 private static String TEMP_FOLDER = "/"; 37 38 39 @Override 40 public void init(ServletConfig config) throws ServletException { 41 ServletContext servletCtx = config.getServletContext(); 42 // 初始化路径 43 // 保存文件的目录 44 PATH_FOLDER1 = servletCtx.getRealPath("/audioUpload"); 45 PATH_FOLDER2 = servletCtx.getRealPath("/imageUpload"); 46 // 存放临时文件的目录,存放xxx.tmp文件的目录 47 TEMP_FOLDER = servletCtx.getRealPath("/uploadTemp"); 48 } 49 50 /** 51 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse 52 * response) 53 */ 54 protected void doGet(HttpServletRequest request, 55 HttpServletResponse response) throws ServletException, IOException { 56 request.setCharacterEncoding("utf-8"); // 设置编码 57 response.setCharacterEncoding("utf-8"); 58 response.setContentType("text/html;charset=UTF-8"); 59 String method = request.getParameter("method"); 60 if (method == null) { 61 method = "image"; 62 } 63 64 if ("image".equals(method)) { 65 image(request, response); 66 } else if ("audio".equals(method)) { 67 audio(request, response); 68 } 69 } 70 private void image(HttpServletRequest request, 71 HttpServletResponse response) { 72 // 获得磁盘文件条目工厂 73 DiskFileItemFactory factory = new DiskFileItemFactory(); 74 75 // 如果没以下两行设置的话，上传大的 文件 会占用 很多内存， 76 // 设置暂时存放的 存储室 , 这个存储室，可以和 最终存储文件 的目录不同 77 /** 78 * 原理 它是先存到 暂时存储室，然后在真正写到 对应目录的硬盘上， 按理来说 当上传一个文件时，其实是上传了两份，第一个是以 .tem 79 * 格式的 然后再将其真正写到 对应目录的硬盘上 80 */ 81 factory.setRepository(new File(TEMP_FOLDER)); 82 // 设置 缓存的大小，当上传文件的容量超过该缓存时，直接放到 暂时存储室 83 factory.setSizeThreshold(1024 * 1024); 84 85 // 高水平的API文件上传处理 86 ServletFileUpload upload = new ServletFileUpload(factory); 87 88 try { 89 // 提交上来的信息都在这个list里面 90 // 这意味着可以上传多个文件 91 // 请自行组织代码 92 List<FileItem> list = upload.parseRequest(request); 93 // 获取上传的文件 94 FileItem item = getUploadFileItem(list); 95 // 获取文件名 96 String filename = getUploadFileName1(item); 97 98 // System.out.println("存放目录:" + PATH_FOLDER); 99 // System.out.println("文件名:" + filename); 100 // 真正写到磁盘上 101 item.write(new File(PATH_FOLDER2, filename)); // 第三方提供的 102 103 PrintWriter writer = response.getWriter(); 104 105 writer.print("{"); 106 // writer.print("msg:"文件大小:"+item.getSize()+",文件名:"+filename+"""); 107 writer.print("msg:""+filename+"""); 108 writer.print("}"); 109 110 writer.close(); 111 112 } catch (FileUploadException e) { 113 e.printStackTrace(); 114 } catch (Exception e) { 115 e.printStackTrace(); 116 } 117 118 119 } 120 private void audio(HttpServletRequest request, 121 HttpServletResponse response) { 122 // 获得磁盘文件条目工厂 123 DiskFileItemFactory factory = new DiskFileItemFactory(); 124 125 // 如果没以下两行设置的话，上传大的 文件 会占用 很多内存， 126 // 设置暂时存放的 存储室 , 这个存储室，可以和 最终存储文件 的目录不同 127 /** 128 * 原理 它是先存到 暂时存储室，然后在真正写到 对应目录的硬盘上， 按理来说 当上传一个文件时，其实是上传了两份，第一个是以 .tem 129 * 格式的 然后再将其真正写到 对应目录的硬盘上 130 */ 131 factory.setRepository(new File(TEMP_FOLDER)); 132 // 设置 缓存的大小，当上传文件的容量超过该缓存时，直接放到 暂时存储室 133 factory.setSizeThreshold(1024 * 1024); 134 135 // 高水平的API文件上传处理 136 ServletFileUpload upload = new ServletFileUpload(factory); 137 138 try { 139 // 提交上来的信息都在这个list里面 140 // 这意味着可以上传多个文件 141 // 请自行组织代码 142 List<FileItem> list = upload.parseRequest(request); 143 // 获取上传的文件 144 FileItem item = getUploadFileItem(list); 145 // 获取文件名 146 String filename = getUploadFileName2(item); 147 filename=filename+".wav"; 148 // System.out.println("存放目录:" + PATH_FOLDER); 149 // System.out.println("文件名:" + filename); 150 // 真正写到磁盘上 151 item.write(new File(PATH_FOLDER1, filename)); // 第三方提供的 152 153 PrintWriter writer = response.getWriter(); 154 155 // writer.print("{"); 156 // writer.print("msg:"文件大小:"+item.getSize()+",文件名:"+filename+"""); 157 writer.print(filename); 158 // writer.print("}"); 159 160 writer.close(); 161 162 } catch (FileUploadException e) { 163 e.printStackTrace(); 164 } catch (Exception e) { 165 e.printStackTrace(); 166 } 167 168 169 } 170 private FileItem getUploadFileItem(List<FileItem> list) { 171 for (FileItem fileItem : list) { 172 if(!fileItem.isFormField()) { 173 return fileItem; 174 } 175 } 176 return null; 177 } 178 private String getUploadFileName1(FileItem item) { 179 // 获取路径名 180 String value = item.getName(); 181 // 索引到最后一个反斜杠 182 int start = value.lastIndexOf("/"); 183 // 截取 上传文件的 字符串名字，加1是 去掉反斜杠， 184 String name =UUID.randomUUID().toString().trim().replaceAll("-", ""); 185 int sub = value.lastIndexOf("."); 186 String filename = value.substring(value.length()-sub,value.length()); 187 188 return name+filename; 189 } 190 private String getUploadFileName2(FileItem item) { 191 // 获取路径名 192 String value = item.getName(); 193 // 索引到最后一个反斜杠 194 int start = value.lastIndexOf("/"); 195 // 截取 上传文件的 字符串名字，加1是 去掉反斜杠， 196 String name =UUID.randomUUID().toString().trim().replaceAll("-", ""); 197 String filename = value.substring(value.length()-4,value.length()); 198 199 return name+filename; 200 } 201 202 203 /** 204 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse 205 * response) 206 */ 207 protected void doPost(HttpServletRequest request, 208 HttpServletResponse response) throws ServletException, IOException { 209 this.doGet(request, response); 210 } 211 212 213 }
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>