java使用uploadify上传文件-白红宇

java使用uploadify上传文件

阅读量：6501 次

发布时间：2019-06-24

本文共 7375 字，大约阅读时间需要 24 分钟。

一、简介

Uploadify是JQuery的一个上传插件，实现的效果非常不错，带进度显示；可以上传多个文件；

详细的使用方法网上有很多，建议到官网参考，这里仅仅展示其使用的效果；

官网：

在官网下载最新的版本；但是本人下载Uploadify所需的所有JS最新文件，不知为何原因不能正确显示，只好将原有项目的JS文件拷贝进自己的项目中，其中必须的文件：jquery-1.4.2.min.js；

jquery.uploadify.v2.1.0.min.js；swfobject.js；uploadify.swf；

其中swfobject.js这个JS是用于在HTML中方面插入Adobe Flash媒体资源（*.swf文件）的独立、敏捷的JavaScript模块，该模块中的JavaScript脚本能够自动检测PC、Mac机器上各种主流浏览器对Flash插件的支持情况。

以上所需的JS文件本人全部在官网下载最新的版本，但是使用失败，我能力有限只能归罪于版本的兼容；便使用了原有的文件；

二、有了必须的资源之后，就是将所需的文件导入：

下图便为项目的目录结构

项目准备好之后，便开始构建上传的功能了；当然要将需要的文件在jsp页面说明；

首先index.js

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>          更改头像    
         
         
          
         
                                                                                                                                          
       
       
                                                                                                                                                 //fileupload.js是自己封装的JS文件，主要便是使用uploadify插件      
      
     
   
     
         图片文件:

这个index.jsp的预览效果图如下：

这里使用uploadify插件的操作封装成JS文件也放在了js目录下（上面的截图中有被涂鸦了，嘿嘿），代码如下：

$(document).ready(function() {            $("#file").uploadify({                        'uploader' : 'js/uploadify.swf',                        'script' : 'UploadServlet',                        'cancelImg' : 'js/cancel.png',                        'queueID' : 'fileList', // 和存放队列的DIV的id一致                        'fileDataName' : 'file', // 和以下input的name属性一致                        'auto' : false, // 是否自动开始                        'multi' : false, // 是否支持多文件上传                        'buttonText' : 'Brower', // 按钮上的文字                        'simUploadLimit' : 1, // 一次同步上传的文件数目                        'sizeLimit' : 3145728, // 设置单个文件大小限制 3MB                        'queueSizeLimit' : 1, // 队列中同时存在的文件个数限制                        'fileDesc' : '支持格式:jpg/jpeg', // 如果配置了以下的'fileExt'属性，那么这个属性是必须的                        'fileExt' : '*.jpg;*.jpeg;',// 允许的格式                        'displayData' : 'percentage',                        onComplete : function() {                            alert("文件上传成功");                        },                        onError : function(event, queueID, fileObj) {                            alert("文件:" + fileObj.name + "上传失败");                        }                                                                                                                                                                   });            $("#uploadFile").click(function() {                $("#file").uploadifyUpload();                                                                                                                                               });            });

到这里其前台的工作已经做完，便着手处理业务逻辑了；

三、当选择好文件之后，uploadify组件会如下显示一个进度条：

当你点击上传文件时候，便会调用你自己的文件上传的Servlet，实现文件的上传；先展示文件上传成功的界面：

下面为文件上传的Servlet：

package com.xzb.fileUpload;import java.io.File;import java.io.IOException;import java.io.PrintWriter;import java.util.Iterator;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.apache.commons.fileupload.FileItem;import org.apache.commons.fileupload.FileUploadException;import org.apache.commons.fileupload.disk.DiskFileItemFactory;import org.apache.commons.fileupload.servlet.ServletFileUpload;public class UploadServlet extends HttpServlet {    public void doGet(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        this.doPost(request, response);    }    public void doPost(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        request.setCharacterEncoding("UTF-8");        response.setContentType("text/html;charset=UTF-8");        System.out.println("文件上传开始……");        String savePath = generateDir();        processUpload(request, response, savePath);                                                                                                }    /*     * 上传处理方法     */    public void processUpload(HttpServletRequest request,            HttpServletResponse response, String savePath) {                                                                                                                                                                                                DiskFileItemFactory factory = new DiskFileItemFactory();        // 缓存大小为512KB        factory.setSizeThreshold(524288);        // 临时文件夹        factory.setRepository(new File(savePath + "/temp"));        // 初始化上传控件        ServletFileUpload upload = new ServletFileUpload(factory);        // 文件大小最大3MB        upload.setFileSizeMax(3145728);        upload.setHeaderEncoding("UTF-8");        List fileList = null;        try {            fileList = upload.parseRequest(request);        } catch (FileUploadException e) {            e.printStackTrace();        }        Iterator
     
       it = fileList.iterator();        String name = "";        String filename = "";        while (it.hasNext()) {            FileItem item = it.next();            if (!item.isFormField()) {                name = item.getName();                if (name != null && !name.trim().equals("")) {                    filename = generateFileName(name);                    File file = new File(savePath + "/" + filename);                    try {                        item.write(file);                        String imgstr = this.getServletContext()                                .getContextPath();                        imgstr = imgstr + "/upload/" + filename;                        response.getWriter().write("http://localhost:8080"+imgstr);                    } catch (Exception e) {                        e.printStackTrace();                    }                }            }        }    }    /*     * 初始化文件存储路径     */    private String generateDir() {        String pathString = getServletConfig().getServletContext().getRealPath(                "/upload");        String tempString = getServletConfig().getServletContext().getRealPath(                "/upload/temp");        File dirPath = new File(pathString);        File dirTemp = new File(tempString);        if (!dirPath.exists()) {            dirPath.mkdirs();        }        if (!dirTemp.exists()) {            dirTemp.mkdirs();        }        return pathString;    }    /*     * 生成文件名     */    private String generateFileName(String name) {        long currentTime = System.currentTimeMillis();        int i = (int) (Math.random() * 1000D + 1.0D);        long result = currentTime + i;        String filename = String.valueOf(result) + getFileExt(name);        return filename;    }    /*     * 获取文件格式     */    private String getFileExt(String name) {        int pos = name.lastIndexOf(".");        if (pos > 0) {            return name.substring(pos);        } else {            return name;        }    }}

至此，到你Servlet中所写的目录下查看是否有文件已经传来：

至此，利用组将实现文件上传，其本质这个组件并没有实现文件的上传，自己必须亲自写好上传的业务逻辑，组件只是简化并是上传界面友好罢了！只要组件的参数和方法使用恰当，便能自定义许多其他属性；

这个仅仅是一个开始，接下来还要将上传来的图片进行预览剪切，这时候会用到其他的jQuery组件，达到类似于论坛更换剪切头像的目的；

转载于:https://blog.51cto.com/seasky09/1213990

你可能感兴趣的文章