uploadify是一个第三方js插件,支持多文件上传,拥有较为强大的上传功能

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>

初始化页面并使用
  1. $(function () {
  2. $("#uploadify").uploadify({
  3. //指定swf文件
  4. 'swf': '${pageContext.request.contextPath}/statics/js/uploadify/uploadify.swf',
  5. //后台处理的页面
  6. 'uploader': '${pageContext.request.contextPath}/background/questionResolveUpload',
  7. //按钮显示的文字
  8. 'buttonText': '选择文件',
  9. //显示的高度和宽度,默认 height 30;width 120
  10. //'height': 15,
  11. //'width': 80,
  12. //上传文件的类型 默认为所有文件 'All Files' ; '*.*'
  13. //在浏览窗口底部的文件类型下拉菜单中显示的文本
  14. 'fileTypeDesc': 'ALL Files',
  15. // 'fileTypeDesc': 'ALL Files',
  16. //允许上传的文件后缀
  17. // 'fileTypeExts': '*.gif; *.jpg; *.png',
  18. //上传文件页面中,你想要用来作为文件队列的元素的id, 默认为false 自动生成, 不带#
  19. //'queueID': 'fileQueue',
  20. //选择文件后自动上传
  21. queueSizeLimit: 999,
  22. 'auto': false,
  23. //设置为true将允许多文件上传
  24. 'multi': true,
  25. "onUploadSuccess": function (file, data, response) {
  26. // alert('The file ' + file.name
  27. // + ' was successfully uploaded with a response of '
  28. // + response + ':' + data);
  29. dataJson = eval("(" + data + ")");
  30. // 上传后消息回复
  31. resolveResult(dataJson.messageContent, file.name);
  32. },
  33. "onUploadError": function (file, errorCode, errorMsg,
  34. errorString) {
  35. // 插件出现错误时的问题
  36. alert('The file ' + file.name
  37. + ' could not be uploaded: ' + errorString);
  38. },
  39. "onSelectError": function () {
  40. alert('The file ' + file.name
  41. + ' returned an error and was not added to the queue.');
  42. },
  43. 'onUploadStart': function () {
  44. $('#uploadify').uploadify('settings', 'formData', {
  45. "competition": $('#competition').val()
  46. });
  47. }
  48. });
  49. });

请注意如果想要动态传输参数的话,请在onUploadStart方法中书写,而不是在配置的时候书写

controller:
  1. public MessageCarrier uploadifyUpload(HttpServletRequest request, String path) {
  2. //解析文件
  3. RequestToMultipartFile requestToMultipartFile = new RequestToMultipartFile();
  4. MultipartFile multipartFile = requestToMultipartFile.transformRequest(request);
  5. //解析文件结束
  6. MessageCarrier messageCarrier = upload(multipartFile, path);
  7. return messageCarrier;
  8. }
直接使用request进行接收后解析即可
其余参数则使用
  1. 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 设置文件浏览按钮的宽度。



附件列表

SpringMVC与uploadify结合进行上传的更多相关文章

  1. uploadify多图片上传实例

    upload.php <html> <head> <meta http-equiv="Content-Type" content="text ...

  2. Struts2 + uploadify 多文件上传完整的例子!

    首先,我这里使用的是  Jquery  Uploadify3.2版本号  导入相关的CSS  JS    <link rel="stylesheet" type=" ...

  3. SpringMVC:学习笔记(8)——文件上传

    SpringMVC--文件上传 说明: 文件上传的途径 文件上传主要有两种方式: 1.使用Apache Commons FileUpload元件. 2.利用Servlet3.0及其更高版本的内置支持. ...

  4. Jquery.Uploadify实现批量上传显示进度条 取消 上传后缩略图显示 可删除

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs&q ...

  5. SpringMVC源码分析--文件上传

    SpringMVC提供了文件上传的功能,接下来我们就简单了解一下SpringMVC文件上传的开发及大致过程. 首先需要在springMVC的配置文件中配置文件上传解析器 <bean id=&qu ...

  6. uploadify多文件上传实例--C#

    下载uploadify文件 http://www.uploadify.com/ HTML(视图) <html lang="zh-cn"> <head> &l ...

  7. c# asp.net mvc4 使用uploadify插件实现上传功能

    [1]首先去官网下载插件:http://www.uploadify.com/download/ .ww我使用的是免费的,基于flash的版本.因为基于H5的版本需付费使用,然后使用该插件也就是做做毕设 ...

  8. SpringMVC -- 梗概--源码--贰--上传

    1.配置web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app version=&qu ...

  9. jquery uploadify在IE上传报406HttpError

    前端使用uploadify的flash上传控件,后端使用spring MVC,使用IE上传时报406,用Chrome没有问题. 检查发现IE上传时的请求头中,Accept: text/* 而Chrom ...

随机推荐

  1. 【22.48%】【codeforces 689D】Friends and Subsequences

    time limit per test2 seconds memory limit per test512 megabytes inputstandard input outputstandard o ...

  2. 浏览器加载js文件顺序

    在默认情况下,下载和执行js都会阻塞页面的渲染,当然现在浏览器支持并行下载,但仍然会阻塞图片等的下载和渲染,所以通常建议把js文件放body底.对于执行顺序,不管是外部js还是内部,只要 遇到< ...

  3. Android——Intent详解

    Intent组件虽然不是四大组件,但却是连接四大组件的桥梁,学习好这个知识,也非常的重要. 一.什么是Intent 1.Intent的概念: Android中提供了Intent机制来协助应用间的交互与 ...

  4. LeetCode总结 -- 树结构的一部分

    这篇总结主要介绍树中比較常见的一类题型--树的构造.事实上本质还是用递归的手法来实现,可是这类题目有一个特点.就是它是构建一棵树.而不是给定一棵树,然后进行遍历,所以实现起来思路上有点逆向,还是要练习 ...

  5. QT之QSignalMapper(可以理解为转发器,多个按钮绑定到一个Edit上,且能分辨。每个单独连接的话,反而麻烦)

    QT之QSignalMapper QT之QSignalMapper 简述 效果图 上代码 相关知识点文章 结尾 简述 QSignalMapper我们可以理解为转发器,此话怎讲呢?比如,按钮点击的响应槽 ...

  6. Qt 自定义事件(三种方法:继承QEvent,然后Send Post就都可以了,也可以覆盖customEvent函数,也可覆盖event()函数)

    Qt 自定义事件很简单,同其它类库的使用很相似,都是要继承一个类进行扩展.在 Qt 中,你需要继承的类是 QEvent. 继承QEvent类,你需要提供一个QEvent::Type类型的参数,作为自定 ...

  7. PV操作例题解析

    虽然自己看了书,老师讲了课,以为对PV操作理解了,可是遇到题的时候还是不会思考.以下这道题,花了非常长时间才弄明确,如今把思路写出来,大家共同探讨下. 大家都来思考: 信号量S1.S2.S3.S4分别 ...

  8. quick-cocos2d-x游戏开发【8】——动画与动作

    动画与动作,在quick中都有对其封装,所以我们还是来看一下吧. 总的来说,对于帧动画,quick封装的方法我们能够常常使用,这是很方便的,以下直接上代码来直观感受下, 比方,14张帧图片,採用coc ...

  9. 人猿方案Ubuntu这些软件的安装

    鄙人程序员一枚,Android开发,常年使用Ubuntu(主要是买不起Mac.O(∩_∩)O哈哈~).分享一下自己使用的那些软件.假设你有什么好的软件.欢迎与我交流. 输入法:開始的时候是用的fcit ...

  10. 031 二进制1的数量(keep it up, 看到这个问题,刚开始有点蒙)

    剑指offer在标题中:http://ac.jobdu.com/problem.php?pid=1513 题目描写叙述: 输入一个整数,输出该数二进制表示中1的个数.当中负数用补码表示. 输入: 输入 ...