SpringMVC与uploadify结合进行上传
uploadify是一个第三方js插件,支持多文件上传,拥有较为强大的上传功能
<script type="text/javascript" src="${pageContext.request.contextPath}/statics/js/jquery.js"></script>
<link href="${pageContext.request.contextPath}/statics/js/uploadify/uploadify.css" rel="stylesheet"
type="text/css"/>
<script src="${pageContext.request.contextPath}/statics/js/uploadify/jquery.uploadify.js"
type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/statics/js/uploadify/jquery.uploadify.min.js"
type="text/javascript"></script>
$(function () {$("#uploadify").uploadify({//指定swf文件'swf': '${pageContext.request.contextPath}/statics/js/uploadify/uploadify.swf',//后台处理的页面'uploader': '${pageContext.request.contextPath}/background/questionResolveUpload',//按钮显示的文字'buttonText': '选择文件',//显示的高度和宽度,默认 height 30;width 120//'height': 15,//'width': 80,//上传文件的类型 默认为所有文件 'All Files' ; '*.*'//在浏览窗口底部的文件类型下拉菜单中显示的文本'fileTypeDesc': 'ALL Files',// 'fileTypeDesc': 'ALL Files',//允许上传的文件后缀// 'fileTypeExts': '*.gif; *.jpg; *.png',//上传文件页面中,你想要用来作为文件队列的元素的id, 默认为false 自动生成, 不带#//'queueID': 'fileQueue',//选择文件后自动上传queueSizeLimit: 999,'auto': false,//设置为true将允许多文件上传'multi': true,"onUploadSuccess": function (file, data, response) {// alert('The file ' + file.name// + ' was successfully uploaded with a response of '// + response + ':' + data);dataJson = eval("(" + data + ")");// 上传后消息回复resolveResult(dataJson.messageContent, file.name);},"onUploadError": function (file, errorCode, errorMsg,errorString) {// 插件出现错误时的问题alert('The file ' + file.name+ ' could not be uploaded: ' + errorString);},"onSelectError": function () {alert('The file ' + file.name+ ' returned an error and was not added to the queue.');},'onUploadStart': function () {$('#uploadify').uploadify('settings', 'formData', {"competition": $('#competition').val()});}});});
public MessageCarrier uploadifyUpload(HttpServletRequest request, String path) {- //解析文件
RequestToMultipartFile requestToMultipartFile = new RequestToMultipartFile();MultipartFile multipartFile = requestToMultipartFile.transformRequest(request);//解析文件结束MessageCarrier messageCarrier = upload(multipartFile, path);return messageCarrier;}
request.getParameter("competition")
| 属性 | 默认值 | 说明 |
| auto | true | 设置为true,当选择文件后就可以直接上传,为false需要点击上传按钮才上传。 |
| buttonClass | empty String | 按钮样式,默认为空字符串。 |
| buttonCursor | ‘hand’ | 鼠标指针悬停在按钮上的样式。 |
| buttonImage | null; | 浏览按钮的图片路径。 |
| buttonText | ‘SELECT FILES’ | 浏览按钮的文本。3 |
| checkExisting | false | 文件上传重复性检查程序,检查即将上传的文件在服务器端是否已经存在,存在返回1,不存在返回0。 |
| debug | false | 如果设置为true,则表示启用SWFUpload的调试模式。 |
| fileObjName | '‘Filedata’ | 文件上传对象的名称,如果命名为the_files,PHP程序可以用$_FILES['the_files']来处理上传的文件对象。 |
| fileSizeLimit | 0 | 上传文件的大小限制,如果为整数型,则表示以KB为单位的大小,如果是字符串,则可以使用(B、KB、MB、GB)为单位,比如2MB,如果设置为0则表示无限制。 |
| fileTypeDesc | All Files | 这个属性值必须设置fileTypeExts属性后才有效,用来设置选择文件对话框中的提示文本,如果设置fileTypeDesc为:请选择rar doc pdf文件等。 |
| fileTypeExts | *.* | 设置可以选择的文件的类型,格式如:*.doc;*.pdf;*.rar。 |
| formData | JSON格式上传每个文件的同时提交到服务器的额外数据,可在onUploadStart事件中使用settings方法动态设置。 | |
| height | 30 | 设置浏览按钮的高度,默认值。 |
| itemTemplate | false | 用于设置上传队列的HTML模板,可以使用以下标签:instanceID-Uploadify实例的ID,fileID队列中此文件的ID,或者理解为此任务的ID,fileName文件的名称,fileSize当前上传的文件大小 |
| method | Post | 提交方式Post或Get。 |
| multi | true | 设置为true时可以上传多个文件。 |
| overrideEvents | 设置哪些事件可以被重写,JSON格式,如:overrideEvents:['onUploadProgress'] | |
| preventCaching | true | 如果为true,则每次上传文件时自动加上一串随机字符串参数,防止URL缓存影响上传结果。 |
| progressData | 'percentage' | 设置上传进度显示方式,percentage显示上传百分比,speed显示上传速度。 |
| queueID | false | 设置上传队列容器DOM元素的ID,如果为false则自动生成一个队列容器。 |
| queueSizeLimit | 999 | 队列最多显示的任务数量,如果选择的文件数量超过此限制,将会发出onSelectError事件。此项并非最大文件上传数量,如果要限制最大上传文件数量,应设置uploadLimit。 |
| removeCompleted | true | 是否自动将已完成任务从队列中删除,如果设置为false则会一直保留此任务显示。 |
| removeTimeout | 3 | 如果设置了任务完成后自动从队列中删除,则可以规定从完成到被移除的时间间隔。 |
| requeueErrors | false | 如果设置为true,则单个任务上传失败后将返回错误,并重新加入任务队列上传。 |
| successTimeout | 30 | 文件上传成功后,服务端返回成功标志,此项设置返回结果的超时时间。 |
| swf | ‘uploadify.swf’ | uploadify.swf文件的相对路径。 |
| uploader | uploadify.php/uploadify.action | 后台处理程序的相对路径。 |
| uploadLimit | 999 | 最大上传文件数量,如果达到或者超出限制将会触发onUploadError事件。 |
| width | 120 | 设置文件浏览按钮的宽度。 |
附件列表
SpringMVC与uploadify结合进行上传的更多相关文章
- uploadify多图片上传实例
upload.php <html> <head> <meta http-equiv="Content-Type" content="text ...
- Struts2 + uploadify 多文件上传完整的例子!
首先,我这里使用的是 Jquery Uploadify3.2版本号 导入相关的CSS JS <link rel="stylesheet" type=" ...
- SpringMVC:学习笔记(8)——文件上传
SpringMVC--文件上传 说明: 文件上传的途径 文件上传主要有两种方式: 1.使用Apache Commons FileUpload元件. 2.利用Servlet3.0及其更高版本的内置支持. ...
- Jquery.Uploadify实现批量上传显示进度条 取消 上传后缩略图显示 可删除
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs&q ...
- SpringMVC源码分析--文件上传
SpringMVC提供了文件上传的功能,接下来我们就简单了解一下SpringMVC文件上传的开发及大致过程. 首先需要在springMVC的配置文件中配置文件上传解析器 <bean id=&qu ...
- uploadify多文件上传实例--C#
下载uploadify文件 http://www.uploadify.com/ HTML(视图) <html lang="zh-cn"> <head> &l ...
- c# asp.net mvc4 使用uploadify插件实现上传功能
[1]首先去官网下载插件:http://www.uploadify.com/download/ .ww我使用的是免费的,基于flash的版本.因为基于H5的版本需付费使用,然后使用该插件也就是做做毕设 ...
- SpringMVC -- 梗概--源码--贰--上传
1.配置web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app version=&qu ...
- jquery uploadify在IE上传报406HttpError
前端使用uploadify的flash上传控件,后端使用spring MVC,使用IE上传时报406,用Chrome没有问题. 检查发现IE上传时的请求头中,Accept: text/* 而Chrom ...
随机推荐
- 【BZOJ 1012】 [JSOI2008]最大数maxnumber(单调队列做法)
[题目链接]:http://www.lydsy.com/JudgeOnline/problem.php?id=1012 [题意] [题解] 后加入的元素,如果比之前的元素大, 那么之前的元素比它小的元 ...
- Swagger与postman使用心得
Swagger接口文档,在线自动生成模板和页面.服务器地址加上swagger-ui.html后缀即可访问到(https://域名:端口号/swagger-ui.html). 使用时在java代码中引用 ...
- 卷积神经网络(CNN)与特殊的卷积
各种卷积操作的可视化的显示形式:GitHub - vdumoulin/conv_arithmetic: A technical report on convolution arithmetic in ...
- 在JS中var、let和const的区别
var有变量提升 x = 4; // 变量 x 设置为 4 console.log(x) //输出 4 var x; // 声明 x 上面代码相当于下面的 var x; // 声明 xx = 4; ...
- SQLite做为本地缓存的应用需要注意的地方
原文:SQLite做为本地缓存的应用需要注意的地方 今天看到了园友陆敏计的一篇文章<<C#数据本地存储方案之SQLite>>, 写到了SQLite的诸多优点,尤其适应于本地数据 ...
- 利用WPF建立自己的3d gis软件(非axhost方式)(三)矢量数据显示控制
原文:利用WPF建立自己的3d gis软件(非axhost方式)(三)矢量数据显示控制 先下载SDK:https://pan.baidu.com/s/1M9kBS6ouUwLfrt0zV0bPew 密 ...
- 关于javascript中的深拷贝问题
一直在尝试为javascript找一个快捷可靠的对象深拷贝的方法,昨天突发奇想,把对象push到一个空数组里,然后对改数组通过concat()或slice()进行拷贝,然后取出数组的第一个元素复制给变 ...
- Network architecture for minimalistic connected objects
In one embodiment, a network architecture comprises minimalistic connected objects (MCOs), distribut ...
- CMake 添加头文件目录,链接动态、静态库(添加子文件夹)
CMake支持大写.小写.混合大小写的命令. 当编译一个需要第三方库的项目时,需要知道: 去哪找头文件(.h),-I(GCC) INCLUDE_DIRECTORIES() 去哪找库文件(.so/.dl ...
- QT之圆形头像(使用PNG的Mask达到的效果)
废话不多说!直接上代码. 我们在很多UI设计应用中,需要用到自定义形状头像,在这里,我对圆形头像的设计做简单的阐述,其它形状头像可参考本文做相应的更改即可.如下图所示为设计的圆形头像: 上代码: Se ...