一:官网

http://www.uploadify.com/

二:引用

<link href="plug-in/uploadify3.2.1/uploadify.css" rel="stylesheet" />
<script type="text/javascript" src="plug-in/uploadify3.2.1/jquery.uploadify.min.js"></script>

三:例子

(1)前台页面

<tr>
        <td align="right">
            <label class="Validform_label"> 主题图: </label>
        </td>
        <td class="value">
             <input id="subjectMap" name="subjectMap" type="hidden" datatype="*" />
             <table>
                <tr>
                    <td>
                        <input type="file" name="upload_org_code" id="upload_org_code"/>
                    </td>
                    <td>
                       <img  id="upload_org_code_img" src="" width="216" height="135">
                       <a  id="del" style="display: none;" href="#" onclick="del()">删除</a>
                    </td>
                </tr>
             </table>
             <span class="Validform_checktip">建议尺寸:720*360</span>
        </td>
</tr>

(2)上传JS

setTimeout(function(){
         $("#upload_org_code").uploadify({
                    'height'        : 27,
                    'width'         : 80,
                    'buttonText'    : '图片上传',
                    'swf'           : 'plug-in/uploadify3.2.1/uploadify.swf',
                    'uploader'      : 'rouletteController.do?objUpload',
                    'auto'          : true,
                    'multi'         : false,
                    'removeCompleted':true,
                    'removeTimeout' : 1,
                    'cancelImg'     : 'plug-in/uploadify3.2.1/uploadify-cancel.png',
                    'fileTypeExts'  : '*.jpg;*.jpge;*.gif;*.png',
                    'fileSizeLimit' : '2MB',
                    'onUploadSuccess':function(file,data,response){
                        var json = eval('(' + data + ')');
                        var url=json.attributes.visiturl+json.attributes.fileName;
                        $("#upload_org_code_img").attr("src",url);
                        $("#subjectMap").val(json.attributes.fileName);
                        $("#del").attr("style","display: block;");
                    },
                    //加上此句会重写onSelectError方法【需要重写的事件】
                    'overrideEvents': ['onSelectError', 'onDialogClose'],
                    //返回一个错误,选择文件的时候触发
                    'onSelectError':function(file, errorCode, errorMsg){
                        switch(errorCode) {
                            case -110:
                                alert("文件 ["+file.name+"] 大小超出系统限制的" +
                    jQuery('#upload_org_code').uploadify('settings', 'fileSizeLimit') + "大小!");
                                break;
                            case -120:
                                alert("文件 ["+file.name+"] 大小异常!");
                                break;
                            case -130:
                                alert("文件 ["+file.name+"] 类型不正确!");
                                break;
                        }
                    },
                });
           },10)

(3)上传后台代码

/****
     * 图片上传
     **/
    @RequestMapping(params = "objUpload")
    @ResponseBody
    public AjaxJson objUpload(HttpServletRequest request) throws Exception {
        AjaxJson j = new AjaxJson();
        Map<String, Object> attributes = new HashMap<String, Object>();
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
        Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
        String tomcaturl = PropertiesConfig.getStringConfig("tomcaturl");
        String roulette_sub_url = PropertiesConfig.getStringConfig("roulette_sub_url");
        String visiturl = PropertiesConfig.getStringConfig("visiturl");
        // 创建文件夹
        File file = new File(tomcaturl+roulette_sub_url);
        if (!file.exists()) {
            file.mkdirs();
        }
        String fileName = null;
        //String path = null;
        for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) {
            // 上传文件名
            MultipartFile mf = entity.getValue();
            fileName = mf.getOriginalFilename();
            String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1)
                    .toLowerCase();
            SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
            String newFileName = "roulette_" + df.format(new Date()) +"_bak"+ "." + fileExt;
            File uploadFile = new File(tomcaturl+roulette_sub_url+newFileName);
            try {
                FileCopyUtils.copy(mf.getBytes(), uploadFile);
                fileName = roulette_sub_url+newFileName;
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        attributes.put("visiturl", visiturl);
        attributes.put("fileName", fileName);
        j.setAttributes(attributes);
        return j;
    }

JQuery上传插件Uploadify的更多相关文章

  1. JQuery上传插件uploadify优化

    旧版的uploadify是基于flash上传的,但是总有那么些问题,让我们用的不是很舒服.今天主要分享下在项目中用uploadify遇到的一些问题,以及优化处理 官方下载 官方文档 官方演示 下面是官 ...

  2. jquery上传插件uploadify 报错http error 302 解决方法之一

    前段时间用到jquery上传插件uploadify时,始终出现系统报出 http error 302 的错误. 网上大量搜集信息,基本上都是说session值丢失的问题,根据网友提供的解决方案进行修改 ...

  3. 【转】JQuery上传插件Uploadify使用详解及错误处理

    转自:http://www.jb51.net/article/43498.htm 关于JQuery上传插件Uploadify使用详解网上一大把,基本上内容都一样.我根据网上的步骤配置完成后,会报一些错 ...

  4. JQuery上传插件Uploadify使用详解

    本文转载http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html Uploadify是JQuery的一个上传插件,实现的效果非常不错 ...

  5. (转)JQuery上传插件Uploadify使用详解

    原文地址:http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html Uploadify是JQuery的一个上传插件,实现的效果非常不 ...

  6. jQuery上传插件Uploadify使用帮助

    Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.它的功能特色总结如下: 支持单文件或多文件上传,可控制并发上传的文件数 在服务器端支持各种语言与之配合使用,诸如PHP, ...

  7. JQuery上传插件Uploadify使用详解 asp.net版

    先来一个实例 Uploadify插件是JQuery的一个文件支持多文件上传的上传插件,ajax异步上传,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadif ...

  8. 文件上传利器JQuery上传插件Uploadify

    在做日常项目中,经常在后台需要上传图片等资源文件,之前使用过几次这个组件,感觉非常好用 ,但是每次使用的时候都是需要经过一番查阅,所以还不如记住在这里,以后使用的时候就翻翻. 他的官方网站如下:htt ...

  9. jQuery上传插件Uploadify 3.2在.NET下的详细例子

    项目中要使用Uploadify 3.2来实现图片上传并生成缩略通的功能,特此记下来,以供各位参考! Uploadify下载地址:http://www.uploadify.com/download/ 下 ...

  10. JQuery上传插件Uploadify详解及其中文按钮解决方案 .

    Uploadify有一个参数是 buttonText 这个无论你怎么改都不支持中文,因为插件在js里用了一个转码方法把这个参数的值转过码了,解码的地方在那个swf文件里,看不到代码,所以这条路不行. ...

随机推荐

  1. A Tour of Go Making slices

    Slices are created with the make function. It works by allocating a zeroed array and returning a sli ...

  2. AtomicLong

    Spring package com.uniubi.management.controller; import java.util.concurrent.atomic.AtomicLong; impo ...

  3. Java - 错误: &quot;java.lang.ArrayIndexOutOfBoundsException: length=1; index=1&quot;

    错误: "java.lang.ArrayIndexOutOfBoundsException: length=1; index=1" 本文地址: http://blog.csdn.n ...

  4. 学习笔记:暴力破解WIFI小软件

    小弟 自己的学习笔记,做练习的 ,缺陷还很多,做到无法解决速度问题就不想做下去了,如果要看的话 主要是思路问题,获取句柄,控制句柄而已,代码比较简单.大神勿喷啊 破解DEMO源码:http://dow ...

  5. C++ Primer--虚函数与纯虚函数的区别

    首先:强调一个概念 定义一个函数为虚函数,不代表函数为不被实现的函数. 定义他为虚函数是为了允许用基类的指针来调用子类的这个函数. 定义一个函数为纯虚函数,才代表函数没有被实现. 定义纯虚函数是为了实 ...

  6. 5天学会jaxws-webservice编程第一天

    前言: 随着近几年来,SOA,EAI等架构体系的日渐成熟,Webservice越来越炽手可热,尤其是在企业做异质平台整合时成为了首选的技术. Java的Webservice技术更是层出不穷,比較流行的 ...

  7. <!--[if lt IE]>

    代码如下时 <!--[if lt IE9]> <script src="js/html5shiv.js"></script> <![end ...

  8. struts2学生信息管理系统篇章②进度报告篇章

    之前做这个系统的时候是什么都不懂的! 经过一个月的时间,慢慢的java的知识都捡起来了. 对struts2和mvc模式都有一一定程度的了解,汇报一下上次的进度. 这个系统我所有的功能中我暂时只做到了下 ...

  9. Oracel 数据库函数

    -- Oracle 函数 学习 -- 数值函数 ,(四舍五入, 取整,常用计算,三角) -- 1.四舍五入 round(n[,m]) ,省略m :表示 0 ;m>0 ;小数点后m位 ;m< ...

  10. ADO.Net知识总结

    (一)基础知识 ADO.NET: .NET中用来向数据库提交执行SQL语句的一堆类 本机访问直接"Windows验证",但是一般项目中都是单独的数据库服务器,程序在另外一台电脑上连 ...