2019独角兽企业重金招聘Python工程师标准>>>

这几天做一个web项目的上传功能折腾了好几天，发现了一个相当的好用的web上传插件，赶紧记下来，以后用的时候方便。

官方下载地址：http://www.uploadify.com/download/

官方文档：http://www.uploadify.com/documentation/

七郎的参数说明的博客，讲的很全（侵删）：http://www.cnblogs.com/yangy608/p/3915349.html

一、简单使用方法：

1.新建uploadify文件夹放入需要的插件（因为uploadify是依赖于jquery的,所以我直接也把jquery放进去了，下载的插件包是没有jquery的）

目录结构

                                                                                                                                                                                                                       

2.新建html页面，并引入相应的包（红色框中的部分）

<link rel="stylesheet" type="text/css" href="../uploadify/uploadify.css"/>
<script src="../uploadify/jquery-3.0.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../uploadify/jquery.uploadify.min.js" type="text/javascript" charset="utf-8"></script>

写入必要的HTML文本

<input type="file" name="uploadify" id="uploadInput" />
<div id="accessory"></div>

3.在js中引用uploadify插件

常规的uploadify插件设置

$("#uploadInput").uploadify({                      //上传附件'swf': '../../testUploadify/uploadify/uploadify.swf',    //加载swf文件'uploader':  '/nutzbook/testUploadify/uploadifyCommon',    //处理此文件的后台文件'cancelImg': '../../testUploadify/uploadify/uploadify-cancel.png',  //插件上的小叉叉的图片'queueID': 'accessory',                               //存放上传文件的div的Id'filleSizeLimit':'20MB',                              //上传的最大文件的大小'auto': true,                //设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传 'multi': true,               //设置为true时可以上传多个文件。'buttonText':'上传附件',                               //上传按钮的名称'removeCompleted':false,     //是否自动将已完成任务从队列中删除，设置为false则会一直保留此任务显示'onUploadStart':function(file){//上传开始的时候执行的，返回false就不往下执行},'onSWFReady': function() {//flash文件载入成功后触发，也可以理解为uploadify插件加载成功后执行},'onUploadSuccess': function(file, data) {//文件上传成功后执行}});

这样就简单的实现了文件的上传功能

4.完整的代码块

前端

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="../uploadify/uploadify.css" /><script src="../uploadify/jquery-2.1.3.js" type="text/javascript" charset="utf-8"></script><script src="../uploadify/jquery.uploadify.min.js" type="text/javascript" charset="utf-8"></script></head><body><input type="file" name="uploadify" id="uploadInput" /><div id="accessory"></div><script type="text/javascript">$("#uploadInput").uploadify({                      //上传附件'swf': '../../testUploadify/uploadify/uploadify.swf',    //加载swf文件'uploader':  '/nutzbook/testUploadify/uploadifyCommon',    //处理此文件的后台文件'cancelImg': '../../testUploadify/uploadify/uploadify-cancel.png',  //插件上的小叉叉的图片'queueID': 'accessory',                               //存放上传文件的div的Id'filleSizeLimit':'20MB',                              //上传的最大文件的大小'auto': true,                //设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传 'multi': true,               //设置为true时可以上传多个文件。'buttonText':'上传附件',                               //上传按钮的名称'removeCompleted':false,     //是否自动将已完成任务从队列中删除，设置为false则会一直保留此任务显示'onUploadStart':function(file){//上传开始的时候执行的，返回false就不往下执行},'onSWFReady': function() {//flash文件载入成功后触发，也可以理解为uploadify插件加载成功后执行},'onUploadSuccess': function(file, data) {//文件上传成功后执行}});</script></body></html>

后端

package net.zb.nutzbook.control;import java.io.ByteArrayOutputStream;
import java.io.File;import javax.imageio.stream.FileImageInputStream;import org.nutz.mvc.annotation.AdaptBy;
import org.nutz.mvc.annotation.At;
import org.nutz.mvc.annotation.Ok;
import org.nutz.mvc.annotation.Param;
import org.nutz.mvc.upload.TempFile;
import org.nutz.mvc.upload.UploadAdaptor;@At("/testUploadify")
public class UploadifyAction {/*** 跳转至文件测试页面 * @return*/@At("/loadUploadHtml")@Ok("redirect:/testUploadify/html/myupload_zb.html")public String loadUploadHtml() {return "success";}/*** 处理上传文件* @param file* @return*/@At("/uploadifyCommon")@AdaptBy(type = UploadAdaptor.class, args = { "/uploadTemp", "8192","UTF-8", "10" })@Ok("json")public String uploadifyCommon(@Param("Filedata") TempFile file) {if (file != null) {File fl = file.getFile();FileImageInputStream pic = null;ByteArrayOutputStream bos = null;try {pic = new FileImageInputStream(fl);byte[] buffer = null;bos = new ByteArrayOutputStream();byte[] b = new byte[1024];int n = 0;while ((n = pic.read(b)) != -1) {bos.write(b, 0, n);}buffer = bos.toByteArray();//把buffer插入数据库就可以了} catch (Exception e) {System.out.println("上传文件出错！"+e);}}return "success";   //返回此附件的数据库Id}
}

上传成功效果图

二、扩展

1.增加小叉叉的删除功能

（1）新建集合变量保存附件

var fileList = [];      //保存附件的集合

（2）附件上传成功的时候把附件保存进集合

 'onUploadSuccess': function(file, data) {var file = {"fileId": file.id,"fid": data};fileList.push(file);cancelAtt();}

（3）增加小叉叉的点击方法

/*** 点击附件后面的小叉叉删除附件的方法*/var cancelAtt = function() { //点击附件的那个小叉叉$("#accessory .cancel").off("click");  //取消原本的单击事件$("#accessory .cancel").on("click",function() {var fileId = $(this).parent(".uploadify-queue-item").attr("id"); // 文件的html中的Idvar fileInfo = null; // 文件后端返回的Id(数据库的文件Id)for (var i = 0; i < fileList.length; i++) {if (fileList[i].fileId = fileId) { // 如果文件集合中有当前的文件fileInfo = fileList[i].fid; // 把文件的数据库Id获取到fileList.splice(i,1); // 把集合中的文件删除break;}}if (fileInfo != null) { // 如果文件的数据库Id存在$.ajax({type: "post",url: "testUploadify/deleteAtt",    //删除数据库中此id的附件async: true,data: {attId: ~fileInfo.indexOf('"') ? fileInfo.substring(1, fileInfo.length - 1) : fileInfo},success: function(data) {}});}});}

（4）完整的前端代码

<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../uploadify/uploadify.css" />
<script src="../uploadify/jquery-2.1.3.js" type="text/javascript"charset="utf-8"></script>
<script src="../uploadify/jquery.uploadify.min.js"type="text/javascript" charset="utf-8"></script>
</head><body><input type="file" name="uploadify" id="uploadInput" /><div id="accessory"></div><script type="text/javascript">var fileList = [];      //保存附件的集合$("#uploadInput").uploadify({                      //上传附件'swf': '../../testUploadify/uploadify/uploadify.swf',    //加载swf文件'uploader':  '/nutzbook/testUploadify/uploadifyCommon',    //处理此文件的后台文件'cancelImg': '../../testUploadify/uploadify/uploadify-cancel.png',  //插件上的小叉叉的图片'queueID': 'accessory',                               //存放上传文件的div的Id'filleSizeLimit':'20MB',                              //上传的最大文件的大小'auto': true,                //设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传 'multi': true,               //设置为true时可以上传多个文件。'buttonText':'上传附件',                               //上传按钮的名称'removeCompleted':false,     //是否自动将已完成任务从队列中删除，设置为false则会一直保留此任务显示'onUploadStart':function(file){//上传开始的时候执行的，返回false就不往下执行},'onSWFReady': function() {//flash文件载入成功后触发，也可以理解为uploadify插件加载成功后执行},'onUploadSuccess': function(file, data) {var file = {"fileId": file.id,"fid": data};fileList.push(file);cancelAtt();}});/*** 点击附件后面的小叉叉删除附件的方法*/var cancelAtt = function() { //点击附件的那个小叉叉$("#accessory .cancel").off("click");  //取消原本的单击事件$("#accessory .cancel").on("click",function() {var fileId = $(this).parent(".uploadify-queue-item").attr("id"); // 文件的html中的Idvar fileInfo = null; // 文件后端返回的Id(数据库的文件Id)for (var i = 0; i < fileList.length; i++) {if (fileList[i].fileId = fileId) { // 如果文件集合中有当前的文件fileInfo = fileList[i].fid; // 把文件的数据库Id获取到fileList.splice(i,1); // 把集合中的文件删除break;}}if (fileInfo != null) { // 如果文件的数据库Id存在$.ajax({type: "post",url: "testUploadify/deleteAtt",    //删除数据库中此id的附件async: true,data: {attId: ~fileInfo.indexOf('"') ? fileInfo.substring(1, fileInfo.length - 1) : fileInfo},success: function(data) {}});}});}</script>
</body>
</html>

2.草稿文件加载附件块

（1）设置加载uploadify插件为回调函数

 loadAttachment(function() {//原插件引用方法});

（2）查询数据库的此附件，然后加载

/*** 如果是草稿文件，查詢有附件就加載附件*/
var loadAttachment = function(callback) { $.ajax({type: "post",url: "testUploadify/loadAttachment",    //查询附件async: true,data: {fileId: **  //附件Id,传参},success: function(data) {var da = $.parseJSON(data);var html = "";if (da) {$.each(da, function(index, d) {html += "<div id=\"" + d.attachmentId + "\" class=\"uploadify-queue-item\">";html += "<div class=\"cancel\">";html += "<a href=\"javascript:$(\'#uploadFiles\').uploadify(\'cancel\', \'" + d.attachmentId + "\')\">X</a>";html += "</div> ";html += "<span class=\"fileName\">" + d.attachmentName + "</span>";html += "<span class=\"data\"> - Complete</span>";html += "<div class=\"uploadify-progress\">";html += "<div class=\"uploadify-progress-bar\" style=\"width: 100%;\">";html += "</div>";html += "</div>";html += "</div>";var file = {"fileId": d.attachmentId,"fid": d.attachmentId};fileList.push(file);});}$("#accessory").html(html);cancelAtt();       //使附件后的叉叉生效callback();        //执行加载附件的回调}});
}

（3）前端完整代码

<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../uploadify/uploadify.css" />
<script src="../uploadify/jquery-2.1.3.js" type="text/javascript"charset="utf-8"></script>
<script src="../uploadify/jquery.uploadify.min.js"type="text/javascript" charset="utf-8"></script>
</head><body><input type="file" name="uploadify" id="uploadInput" /><div id="accessory"></div><script type="text/javascript">var fileList = [];      //保存附件的集合loadAttachment(function() {$("#uploadInput").uploadify({                      //上传附件'swf': '../../testUploadify/uploadify/uploadify.swf',    //加载swf文件'uploader':  '/nutzbook/testUploadify/uploadifyCommon',    //处理此文件的后台文件'cancelImg': '../../testUploadify/uploadify/uploadify-cancel.png',  //插件上的小叉叉的图片'queueID': 'accessory',                               //存放上传文件的div的Id'filleSizeLimit':'20MB',                              //上传的最大文件的大小'auto': true,                //设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传 'multi': true,               //设置为true时可以上传多个文件。'buttonText':'上传附件',                               //上传按钮的名称'removeCompleted':false,     //是否自动将已完成任务从队列中删除，设置为false则会一直保留此任务显示'onUploadStart':function(file){//上传开始的时候执行的，返回false就不往下执行},'onSWFReady': function() {//flash文件载入成功后触发，也可以理解为uploadify插件加载成功后执行},'onUploadSuccess': function(file, data) {var file = {"fileId": file.id,"fid": data};fileList.push(file);cancelAtt();}});});/*** 点击附件后面的小叉叉删除附件的方法*/var cancelAtt = function() { //点击附件的那个小叉叉$("#accessory .cancel").off("click");  //取消原本的单击事件$("#accessory .cancel").on("click",function() {var fileId = $(this).parent(".uploadify-queue-item").attr("id"); // 文件的html中的Idvar fileInfo = null; // 文件后端返回的Id(数据库的文件Id)for (var i = 0; i < fileList.length; i++) {if (fileList[i].fileId = fileId) { // 如果文件集合中有当前的文件fileInfo = fileList[i].fid; // 把文件的数据库Id获取到fileList.splice(i,1); // 把集合中的文件删除break;}}if (fileInfo != null) { // 如果文件的数据库Id存在$.ajax({type: "post",url: "testUploadify/deleteAtt",    //删除数据库中此id的附件async: true,data: {attId: ~fileInfo.indexOf('"') ? fileInfo.substring(1, fileInfo.length - 1) : fileInfo},success: function(data) {}});}});}/*** 如果是草稿文件，查詢有附件就加載附件*/var loadAttachment = function(callback) { $.ajax({type: "post",url: "testUploadify/loadAttachment",    //查询附件async: true,data: {fileId: **  //附件Id,传参},success: function(data) {var da = $.parseJSON(data);var html = "";if (da) {$.each(da, function(index, d) {html += "<div id=\"" + d.attachmentId + "\" class=\"uploadify-queue-item\">";html += "<div class=\"cancel\">";html += "<a href=\"javascript:$(\'#uploadFiles\').uploadify(\'cancel\', \'" + d.attachmentId + "\')\">X</a>";html += "</div> ";html += "<span class=\"fileName\">" + d.attachmentName + "</span>";html += "<span class=\"data\"> - Complete</span>";html += "<div class=\"uploadify-progress\">";html += "<div class=\"uploadify-progress-bar\" style=\"width: 100%;\">";html += "</div>";html += "</div>";html += "</div>";var file = {"fileId": d.attachmentId,"fid": d.attachmentId};fileList.push(file);});}$("#accessory").html(html);cancelAtt();       //使附件后的叉叉生效callback();        //执行加载附件的回调}});}</script>
</body>
</html>

转载于:https://my.oschina.net/ThreeTiger/blog/1547733

Uploadify v3.2.1相关推荐

  1. php3.2手册中文版,Uploadify v3.2中文手册分享

    最近想扩展一下图片批量上传这块的插件.找了很多最后决定用 Uploadify. 发现Uploadify v3.2中文手册,太强大了,我之前在官网看了好久,都是一头雾水,有中文的方便多了. 在部署一个U ...

  2. Uploadify的用法

    从Uploadify 的下载页面上,可以看到当前的版本已经是Uploadify-v3.0.0 (Beta),但是还是一个Beta版,所以目前来说网站上的文档主要是针对 uploadify v2.14 ...

  3. 开源：ASP.NET MVC+EF6+Bootstrap开发框架

    前言 我在博客园潜水两三年了,在这里看过很多大神的文章,也学到了很多东西.可以说我是汲取着博客园的营养成长的. 想当年,我也是拿10个G的精神粮食从一个博客园大神那里换来一套开发框架,正式走上开发之路 ...

  4. Jquery Uploadify3.21.与2.1版本 使用中存在的问题--记录三

    Jquery Uploadify是个上传插件. 2.1版本与3.2.1版本有很大区别,方法名跟参数变动较大 1.uploader:该属性是用来存放swf的路径,这个swf就是一个Flash的一个图标, ...

  5. 开发框架-.Net：Learun（力软敏捷开发）

    ylbtech-开发框架-.Net:Learun(力软敏捷开发) 1.返回顶部 2.返回顶部 1. 系统简介: (1)后台采用MVC+EF架构,前台使用Jquery+Bootstrap,界面美观大气, ...

  6. 上传文件 力软_力软敏捷开发框架权限系统,MVC,CRM,OA,APP工作流源码 说明文档齐全【更新至6.1.6.2】...

    系统简介: (1)后台采用MVC+EF架构,前台使用Jquery+Bootstrap,界面美观大气,同时支持灵活定制各种美观的界面. (2)系统模块化的架构设计,使得系统前端支持web页面.webap ...

  7. jquery uploadify 多文件上传插件 使用经验

    2019独角兽企业重金招聘Python工程师标准>>> Uploadify 官网:http://www.uploadify.com/ 一.如何使用呢? 官网原文:http://www ...

  8. （转）基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用

    http://www.cnblogs.com/wuhuacong/p/3343967.html 大概一年前,我还在用Asp.NET开发一些行业管理系统的时候,就曾经使用这个组件作为文件的上传操作,在随 ...

  9. Yolo v4, v3 and v2 性能极简图示

    Yolo v4, v3 and v2 性能图示 https://github.com/AlexeyAB/darknet 参考链接: https://github.com/AlexeyAB/darkne ...

最新文章

  1. 【GoLang】tcmalloc jemalloc
  2. 找规律 百度之星资格赛 1001 大搬家
  3. ASP.NET MVC 4 (一）路径映射
  4. Windows下给SourceTree配置外部比较工具BeyondCompare
  5. Java异常的概念和分类
  6. （52）FPGA基础编码D触发器（一）
  7. 手机摇一摇功能音量大小跟系统音量一致
  8. 网关 跨域_好文推荐：微服务网关实战—Spring Cloud Gateway
  9. nginx搭建高性能流媒体技术
  10. a3图纸标题栏尺寸标准_求标准CAD图纸(A0、A1、A2、A3、A4)图框(外框、内框)、标题栏及明细栏大小样式字体是多大?...
  11. python聊天室（tkinter写界面，treading,socket实现私聊群聊查看聊天记录，mysql存储数据）
  12. 10.4. 嗅探工具
  13. LA 5846 霓虹灯广告牌（单色三角形问题）
  14. 如何创建自己的Cydia源
  15. 网络环路导致公司网络瘫痪问题排查
  16. ruoyi导入导出Excel
  17. 文本数据分析：删除停用词
  18. #云栖大会# 移动安全专场——APP渠道推广作弊攻防那些事儿（演讲速记）
  19. php微擎万能门店小程序_【微擎微赞模块】万能门店小程序6.8.73+小程序前端+后端...
  20. IOS、Android、WP移动平台浏览器下常用字体支持度研究

热门文章

  1. springboot:映射静态资源路径
  2. oracle: 安装客户端
  3. 【297天】我爱刷题系列056（2017.11.29）
  4. java.util.regex.PatternSyntaxException: Unexpected internal error near index 1 \ ^
  5. C++二维码相关库编译
  6. Activity和ListActivity的区别
  7. Ubuntu显示隐藏文件和文件夹
  8. 构建用户界面 Android 应用中一些常用的小部件
  9. PUSH进栈指令和POP出栈指令
  10. Node.js Buffer静态方法