微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

SpringMVC+SwfUpload进行多文件同时上传

由于最近项目需要做一个文件同时上传功能,所以好好的看了一下各种上传工具,感觉uploadify和SwfUpload的功能都比较强大,并且使用起来也很方便。一个flash和js相结合而成的文件上传插件,而且该插件可以用在PHP、.net、Java等项目开发中。在使用的过程中需要引入两个js文件,并且进行相关参数的配置,同时也可以定义一系列的事件,如:上传成功事件,上传失败事件,正在上传事件等等。由于我在项目开发是使用SpringMVC进行的,所以下面我根据我自己的项目简述一下SwfUpload如何整合到Web项目中去。

首先说一下Swfupload相对于HTML中file标签上传的优点:

  • 允许一次上传多个文件,但会有一个上传队列,队列里文件上传是逐个进行的,服务器端接收文件时跟普通的表单上传文件是一样的(相当于表单一次提交了一个file,但是提交了多次,后台处理的时候只需要处理一次即可);
  • 用flash进行上传页面无刷新,且可自定义Flash按钮的样式, 类似AJAX的无刷新上传,里面可以引入swf文件实现动态效果
  • 可以显示上传进度,也可以在浏览器端就对要上传文件格式,大小等进行配置(只需要配置一个参数即可,比用js的数据验证要好很多);
  • 良好的浏览器兼容性并且兼容其他JavaScript库 (例如:jQuery,EXT,Prototype等);一般含有flash插件的即可正常运行,但是好像最低要求flash的版本要达到flash9;
  •  SwfUpload还提供了丰富的事件接口供开发者使用;开发者可以自定义各种和上传相关的事件;

SWfUpload实现文件上传流程如下:

1、引入相应的js文件 (swfupload.js和swfupload.queue.js必须引入)2、实例化SWFUpload对象,传入一个配置参数对象进行各方面的配置。 3、点击SWFUpload提供的Flash按钮(也可以更改配置信息中的button_image_url参数来配置自己的按钮),弹出文件选取窗口选择要上传文件; 4、文件选取完成后符合规定的文件会被添加上传的队列里; 5、调用startUpload方法让队列里文件开始上传; 6、文件上传过程中会触发相应的事件(想要触发什么事件需要自己定义,但是一般网上搜一下就可以了,大部分定义都相同,我也会贴出我的代码),开发者利用这些事件来更新ui、处理错误、发出提示等等; 下面说我的项目中SpringMVC+SwfUpload的配置过程及代码

引入相应的JS文件后实例化SwfUpload对象(JS代码,一般嵌入到jsp文件中或者单独写一个文件引入到jsp页面内):

display: none;" onclick="cnblogs_code_hide('c6b85ac6-7b5a-4660-b433-90e670f04629',event)" src="https://www.jb51.cc/res/2019/02-10/23/405b18b4b6584ae338e0f6ecaf736533.gif" alt="">
window.onload = settings = flash_url : "swfupload/swfupload.swf" flash9_url : "swfupload/swfupload_fp9.swf" upload_url: "http://localhost:8080/ams/upload/fileUpload.do" post_params: {"PHPSESSID" : "aa" file_size_limit : "100 MB" file_types : "*.*" file_post_name : "filedata" file_types_description : "All Files" file_upload_limit : 100 file_queue_limit : 0 progresstarget : "fsuploadProgress" cancelButtonId : "btnCancel" debug: button_image_url: "images/TestimageNoText_65x29.png" button_width: "65" button_height: "29" button_placeholder_id: "spanButtonPlaceHolder" button_text: '' button_text_style: ".theFont { font-size: 16; }" button_text_left_padding: 12 button_text_top_padding: 3 Failed_handler : loadFailed, swfu = };

编写相关的监听事件(JS代码,即html引入的handler.js文件):

display: none;" onclick="cnblogs_code_hide('7a85ca82-c232-4fd5-a679-74bcfa8e42f9',event)" src="https://www.jb51.cc/res/2019/02-10/23/405b18b4b6584ae338e0f6ecaf736533.gif" alt="">
(! alert("You need the Flash Player 9.028 or above to use SWFUpload." Failed() { alert("Something went wrong while loading SWFUpload. If this were a real application we'd clean up and then give you an alternative" progress = FileProgress(file,sstarget); progress.setStatus("Pending..." progress.toggleCancel(, } (errorCode === alert("You have attempted to queue too many files.\n" + (message === 0 ? "You have reached the upload limit." : "You may select " + (message > 1 ? "up to " + message + " files." : "one file." progress = FileProgress(file,sstarget); progress.toggleCancel( progress.setStatus("File is too big." .debug("Error Code: File too big,File name: " + file.name + ",File size: " + file.size + ",Message: " + progress.setStatus("Cannot upload Zero Byte files." .debug("Error Code: Zero byte file,Message: " + progress.setStatus("Invalid File Type." .debug("Error Code: Invalid File Type,Message: " + (file !== progress.setStatus("Unhandled Error" .debug("Error Code: " + errorCode + ",Message: " + } (numFilesSelected > 0 document.getElementById(.customSettings.cancelButtonId).disabled = } progress = FileProgress(file,sstarget); progress.setStatus("Uploading..." progress.toggleCancel(, percent = Math.ceil((bytesLoaded / bytesTotal) * 100 progress = FileProgress(file,sstarget); progress.setStatus("Uploading..." } progress = FileProgress(file,sstarget); progress.setStatus("Complete." progress.toggleCancel( } progress = FileProgress(file,sstarget); progress.toggleCancel( progress.setStatus("Upload Error: " + .debug("Error Code: HTTP Error,Message: " + Failed: progress.setStatus("Upload Failed." .debug("Error Code: Upload Failed,Message: " + progress.setStatus("Server (IO) Error" .debug("Error Code: IO Error,Message: " + ecurity_ERROR: progress.setStatus("Security Error" .debug("Error Code: Security Error,Message: " + progress.setStatus("Upload limit exceeded." .debug("Error Code: Upload Limit Exceeded,Message: " + Failed: progress.setStatus("Failed Validation. Upload skipped." .debug("Error Code: File Validation Failed,Message: " + hey were all cancelled) disable the cancel button (.getStats().files_queued === 0 document.getElementById(.customSettings.cancelButtonId).disabled = progress.setStatus("Cancelled" progress.setStatus("Stopped" progress.setStatus("Unhandled Error: " + .debug("Error Code: " + errorCode + ",Message: " + } (.getStats().files_queued === 0 document.getElementById(.customSettings.cancelButtonId).disabled = suploaded) { status = document.getElementById("divstatus" status.innerHTML = numFilesuploaded + " file" + (numFilesuploaded === 1 ? "" : "s") + " uploaded." }

编写HTML页面

display: none;" onclick="cnblogs_code_hide('896b9736-8383-4283-a90b-7e42157e40e3',event)" src="https://www.jb51.cc/res/2019/02-10/23/405b18b4b6584ae338e0f6ecaf736533.gif" alt="">
SWFUpload Demos - Simple Demo logo"<SWFUpload v2.5.0 External Interface Demo PHP" display change. This demo isn't meant for building upon. Rather it helps test whether a particular browser is suffering from this bug. suploadProgress" Upload Queue vstatus"0 Files Uploaded

后台处里代码

首先要配置SpringMVC配置文件,在配置文件中加入下面内容

display: none;" onclick="cnblogs_code_hide('2b7171f9-d583-4fe3-bee6-c8b77bd5874a',event)" src="https://www.jb51.cc/res/2019/02-10/23/405b18b4b6584ae338e0f6ecaf736533.gif" alt="">

服务器接收程序:

display: none;" onclick="cnblogs_code_hide('4d2e13ec-d11b-4e68-85bc-b94d4a7323e3',event)" src="https://www.jb51.cc/res/2019/02-10/23/405b18b4b6584ae338e0f6ecaf736533.gif" alt="">
@RequestMapping("/fileUpload.do" String fileUpload(HttpServletRequest request,@RequestParam("filedata")multipartfile file) request.setCharacterEncoding("utf-8");解决乱码问题 String uploadDir = request.getServletContext().getRealPath("/upload");获取上传目录的路径 File dirPath = (! irs(); 文件上传 InputStream inputStream = file.getInputStream(); String fileName = file.getoriginalFilename(); String fileNameFull = uploadDir + "/" + OutputStream outputStream = FileOutputStream(fileNameFull);输出流 bytesRead = 0 [] buffer = [8192 ((bytesRead = inputStream.read(buffer,8192)) != -1 输出到目标文件 outputStream.write(buffer,0 } printstacktrace(); "error" "ok" }

这样经过上面的配置即可完成多文件同时上传的例子了,注意的地方有几点:

一是中文名乱码问题,解决办法:

1.在Java程序内加入一行代码:request.setCharacterEncoding("utf-8");

2.进行编码转换,fileName = new String(fileName.getBytes("GBK"),"UTF-8");//反正就是进行编码的转换

3.好像还有其它的方法,但是我也不太懂了

还有一点是后台获得file的时候名字问题:

后台获得file是一个一个获取的,即如果你上传10个文件,那就是分十次来调用后台Java代码的,每次调用上传一个文件,所以后台只需要对一个文件进行处理即可,这些文件传递到后台的name属性值是相同的,通过来进行配置,这个时候后台获取file只要通过filedata即可了!

这是我初步了解了SwfUpload之后进行记录的内容,希望以后自己能回来翻看学习。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐