jquery插件——uploadify使用详解

jquery插件——uploadify使用详解

写在前面的叫前言

刚刚参加工作，没有什么编程基础，却神奇的来到了一个叫做信息化开发室的地方。哈哈哈哈，真是#……%￥&说多了都是泪，一切都要从基础开始学起，前端后端都要弄，然而缺弄得一团乱麻。求人不如求自己，还是将学会的东西都记录下来，防止以后还不会！！！！呵呵~
来先说说jquery插件中的uploadify吧，平生第一个项目就是要建设企业微信号，确定企业脸面不会被我毁容？？？既然你们放心我就不客气了~。刚弄没多久就遇到了问题，上传媒体是什么鬼，根本不懂啊，好吧，只能求教了，一个神奇的插件uploadify划过了眼前，对于刚学的小白来看就是这么神奇。
同时不断的告诫不会要看文档啊文档啊，文档又是什么鬼，白白我根本看不懂好吗。费劲千辛万苦（就不多说过程了）好不容易弄明白了一点打算赶快记录下来，以一个小白的身份写一些小白才会看懂的使用说明。哈哈哈高尚吧。
很无耻的给大家推荐个文档，看不看得懂都推荐给你，看这里看这里。

---

uploadify安装

下载最新版本的uploadify，解压到服务器根目录下的uploadify文件夹中，你可以看到以下文件：

Change Log.txt（uploadify的升级日志，部署时删掉）
check-exists.php（用来检查上传目标文件夹里是否存在相同文件）
index.php（官方实例）
jquery.uploadify.js（上传插件）
jquery.uploadify.min.js（压缩版的上传插件，部署时使用）
license.txt（许可证文件，部署时删掉）
uploadify.css（上传控件样式表）
uploadify.php（上传数据处理文件）
uploadify.swf（flash基础文件）
uploadify-cancel.png（取消按钮图片）

然后将整个uploadify（或者是其中用到的文件）导入到项目中去。

1.引用jquery库:

<script type="text/javascript" src="/uploadify/jquery.min.js"></script>

2.引用uploadify脚本

<script type="text/javascript" src="/uploadify/jquery.uploadify.min.js"></script>

3.引用uploadify样式表

<link rel="stylesheet" type="text/css" href="/uploadifyuploadify.css" />

4.其他引入（可选）

<script type="text/javascript" src="../js/json2.js"></script>
<script type="text/javascript" src="/uploadify/swfobject.js"></script>

ps:反正我公司内网进不去，也不知道网站长什么样！但我就是有！

控件与Uploadify插件绑定：

<div id="fileQueue"></div>
<input id="mediaID01" name="mediaID01" type="file" multiple="true">
<a href="javascript:$('#mediaID01').uploadify('upload','*')">上传</a>

初始化：

$(document).ready(function(){

    $('#mediaID01').uploadify({
        'swf' : 'uploadify/uploadify.swf',
        'uploader' : 'uploadify.jsp',//后台处理的请求
        'cancelImg' : 'uploadify/uploadify-cancel.png',//取消时显示的图片
        'folder' : 'upload/thumbPic',//您想将文件保存到的路径
        'queueID' : 'fileQueue',//与下面的id对应，上传时的动态图
       // 'queueSizeLimit' : 5,
        'fileDesc' : 'Image Files (*.jpg;*.jpeg;*.gif;*.png)',//选择文件时下方显示的文字提示
        'fileExt' : '*.jpg;*.jpeg;*.gif;*.png', //控制可上传文件的扩展名，启用本项时需同时声明fileDesc
        //'fileDesc' : '视频文件',
        //'fileExt' : '*.mp4;*.rmvb;*.avi;*.flv',
        'auto' : false,//
        'multi' : true,
       // 'simUploadLimit' : 2,
        'buttonText' : '选择图片',//按钮提示文本
        'buttonImg':'',
        'method':'get',
        'removeCompleted':false,
        'fileObjName':'FileData',
        'formData':{'typeName':'thumbPic'},

        'onUploadStart' : function(file) {
            $("#mediaID01").uploadify("settings", "typeName", "thumbPic");//settings方法重新赋值
        },
        'onUploadSuccess' : function(file, data, response) {  
            alert('文件 ' + file.name + ' 上传成功.详细信息： ' + response + ':' + data);
        },
        'onUploadError' : function(file, errorCode, errorMsg, errorString) {
            alert(file.name + ' 上传失败。详细信息: ' + errorString);
        }

    });

});
</script>

后台处理js：

 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
    <%@ page import="java.io.*, java.util.*, org.apache.commons.fileupload.*" %>  
    <%@ page import="org.apache.commons.fileupload.disk.*, org.apache.commons.fileupload.servlet.*" %>  
    <%@ page import="com.ctc.wstx.util.DataUtil, java.text.SimpleDateFormat" %>  
    <%!  

        public void upload(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {  
            Date now=new Date();
            SimpleDateFormat dateFormat = new SimpleDateFormat("yyyyMMdd");
            String filePath = "/upload/thumbPic/"+dateFormat.format(now);
            String path=request.getSession().getServletContext().getRealPath(filePath);
            path = path+"/";
            File f1 = new File(path);  
            System.out.println(path);  
            //这里接收了name的值  
            System.out.println(request.getParameter("name"));  
            if (!f1.exists()) {  
                f1.mkdirs();  
            }  

            DiskFileItemFactory fac = new DiskFileItemFactory();  
            ServletFileUpload upload = new ServletFileUpload(fac);  
            upload.setHeaderEncoding("utf-8");  
            List fileList = null;  
            try {  
                fileList = upload.parseRequest(request);  
            } catch (FileUploadException ex) {  
                return;   
            }  
            Iterator<FileItem> it = fileList.iterator();  
            String name = "";  
            String extName = "";  
            while (it.hasNext()) {  
                FileItem item = it.next();  
                if (!item.isFormField()) {  
                    name = item.getName();  
                    long size = item.getSize();  
                    String type = item.getContentType();  
                    System.out.println(size + " " + type);  
                    if (name == null || name.trim().equals("")) {  
                        continue;  
                    }  

                    // 扩展名格式：  
                    if (name.lastIndexOf(".") >= 0) {  
                        extName = name.substring(name.lastIndexOf("."));  
                    }  

                    File file = null;  
                    do {  
                        // 生成文件名：  
                        name = String.valueOf(System.currentTimeMillis()) + (int)(Math.random()*1000000);  
                        file = new File(path + name + extName);  
                    } while (file.exists());  

                    File saveFile = new File(path + name + extName);  
                    try {  
                        item.write(saveFile);  
                    } catch (Exception e) {  
                        e.printStackTrace();  
                    }  
                }  
            }  
            response.getWriter().print(name + extName);  
        }  
    %>  
    <%  
        upload(request, response);  
    %>  

---