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中添加按钮标签：

上传录音

$("#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;//在文件上传成功之后 获取当前数据 添加timeoutif(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

内容如下：

E:\xxx\Tomcat7\webapps\ROOT

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

5、java端接收文件代码：

/*** 将录音上传到指定路径* @param request* @return*/@RequestMapping(value = "/uploadVoice")@ResponseBodypublic ResultMessage uploadVoice(HttpServletRequest request) {//创建返回值ResultMessage rm = new ResultMessage();try {//创建文件工厂DiskFileItemFactory factory = new DiskFileItemFactory();//创建文件上传解析器ServletFileUpload upload = new ServletFileUpload(factory);//设置文件名编码upload.setHeaderEncoding("UTF-8");//解析上传数据List 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的形式进行上传，二进制流的形式进行上传，对于限制文件类型存在缺陷。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！