1、uploadify实现
下载其flash版本
解压后将其内容区分后倒入
将jquery.uploadify.min.js、uploadify.css、uploadify.swf、uploadify-cancel.png导入到项目中,注意路径,路径不对可能导致取消图片的显示失败
在页面中引入jquery与jquery.uploadify.min.js,css
<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()
});
}
});
});
请注意如果想要动态传输参数的话,请在onUploadStart方法中书写,而不是在配置的时候书写
controller:
public MessageCarrier uploadifyUpload(HttpServletRequest request, String path) {
- //解析文件
RequestToMultipartFile requestToMultipartFile = new RequestToMultipartFile();
MultipartFile multipartFile = requestToMultipartFile.transformRequest(request);
//解析文件结束
MessageCarrier messageCarrier = upload(multipartFile, path);
return messageCarrier;
}
直接使用request进行接收后解析即可
其余参数则使用
request.getParameter("competition")
来解析即可
当uploadify进行多个文件上传的时候会多次向后台服务器发送请求,所以我们只需要按照单一文件解析即可
属性 | 默认值 | 说明 |
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 | 设置文件浏览按钮的宽度。 |