一、简介Uploadify 是 JQuery 的一个上传插件，实现的效果非常不错，带进度显示；可以上传多个文件；详细的使用方法网上有很多，建议到官网参考，这里仅仅展示其使用的效果；官网： www . uploadify . com 在官网下载最新的版本；但是本人下载 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 文件本人全部在官网下载最新的版本，但是使用失败，我能力有限只能归罪于版本的兼容；便使用了原有的文件；二、有了必须的资源之后，就是将所需的文件导入：下图便为项目的目录结构QQ 图片 20130531205312 . jpg项目准备好之后，便开始构建上传的功能了；当然要将需要的文件在 jsp 页面说明；首先 index . jsview sourceprint ?01 .<% @ page language = "java" import = "java.util.*" pageEncoding = "UTF-8" %>02 .<%03 .String path = request . getContextPath ();04 .String basePath = request . getScheme ()+ "://" + request . getServerName ()+ ":" + request . getServerPort ()+ path + "/" ;05 .%>06 .<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >07 .< html >08 .< head >09 .< base href = "<%=basePath%>" >10 .< title > 更改头像 </ title >11 .< meta http - equiv = "pragma" content = "no-cache" >12 .< meta http - equiv = "cache-control" content = "no-cache" >13 .< meta http - equiv = "expires" content = "0" >14 .< meta http - equiv = "keywords" content = "keyword1,keyword2,keyword3" >15 .< meta http - equiv = "description" content = "This is my page" >16 .17 .< link rel = "stylesheet" href = \'#\' " /default.css" type = "text/css" ></ link >18 .< link rel = "stylesheet" href = \'#\' " /uploadify.css" type = "text/css" ></ link >19 .< link rel = "stylesheet" href = \'#\' " /jquery.Jcrop.css" type = "text/css" ></ link >20 .21 .< script type = "text/javascript" src = \'#\' " /jquery-1.4.2.min.js" ></ script >22 .< script type = "text/javascript" src = \'#\' " /jquery.uploadify.v2.1.0.min.js" ></ script >23 .< script type = "text/javascript" src = \'#\' " /swfobject.js" ></ script >24 .< script type = "text/javascript" src = \'#\' " /fileupload.js" ></ script >25 .//fileupload.js是自己封装的JS文件，主要便是使用uploadify插件26 .</ head >27 .< body >28 .< div > </ div >29 .< div style = "font-size: 15px;" >30 .图片文件 :& nbsp & nbsp & nbsp31 .< input type = "file" name = "file" id = "file" /></ div >32 .< input type = "button" id = "uploadFile" value = "上传文件" >33 .< input type = "button" id = "cancelUpload" value = "取消上传" >34 .< div id = "fileList" style = "height:51px;" ></ div >35 .</ table >36 .</ body >37 .</ html >这个 index . jsp 的预览效果图如下：得到 . jpg这里使用 uploadify 插件的操作封装成 JS 文件也放在了 js 目录下（上面的截图中有被涂鸦了，嘿嘿），代码如下：view sourceprint ?01 .$ ( document ). ready ( function () {02 .$ ( "#file" ). uploadify ({03 .' uploader ' : ' js / uploadify . swf ' ,04 .' script ' : ' UploadServlet ' ,05 .' cancelImg ' : ' js / cancel . png ' ,06 .' queueID ' : ' fileList ' , // 和存放队列的DIV的id一致07 .' fileDataName ' : ' file ' , // 和以下input的name属性一致08 .' auto ' : false , // 是否自动开始09 .' multi ' : false , // 是否支持多文件上传10 .' buttonText ' : ' Brower ' , // 按钮上的文字11 .' simUploadLimit ' : 1 , // 一次同步上传的文件数目12 .' sizeLimit ' : 3145728 , // 设置单个文件大小限制 3MB13 .' queueSizeLimit ' : 1 , // 队列中同时存在的文件个数限制14 .' fileDesc ' : '支持格式 : jpg / jpeg ' , // 如果配置了以下的'fileExt'属性，那么这个属性是必须的15 .' fileExt ' : ' *. jpg ;*. jpeg ; ' , // 允许的格式16 .' displayData ' : ' percentage ' ,17 .onComplete : function () {18 .alert ( "文件上传成功" );19 .},20 .onError : function ( event , queueID , fileObj ) {21 .alert ( "文件:" + fileObj . name + "上传失败" );22 .}23 .24 .});25 .$ ( "#uploadFile" ). click ( function () {26 .$ ( "#file" ). uploadifyUpload ();27 .28 .});29 .});到这里其前台的工作已经做完，便着手处理业务逻辑了；三、当选择好文件之后， uploadify 组件会如下显示一个进度条：得到的 . jpg当你点击上传文件时候，便会调用你自己的文件上传的 Servlet ，实现文件的上传；先展示文件上传成功的界面：QQ 点点滴滴 . jpg下面为文件上传的 Servlet ：view sourceprint ?001 .package com . xzb . fileUpload ;002 .import java.io.File ;003 .import java.io.IOException ;004 .import java.io.PrintWriter ;005 .import java.util.Iterator ;006 .import java.util.List ;007 .import javax.servlet.ServletException ;008 .import javax.servlet.http.HttpServlet ;009 .import javax.servlet.http.HttpServletRequest ;010 .import javax.servlet.http.HttpServletResponse ;011 .import org.apache.commons.fileupload.FileItem ;012 .import org.apache.commons.fileupload.FileUploadException ;013 .import org.apache.commons.fileupload.disk.DiskFileItemFactory ;014 .import org.apache.commons.fileupload.servlet.ServletFileUpload ;015 .public class UploadServlet extends HttpServlet {016 .public void doGet ( HttpServletRequest request , HttpServletResponse response )017 .throws ServletException , IOException {018 .this . doPost ( request , response );019 .}020 .public void doPost ( HttpServletRequest request , HttpServletResponse response )021 .throws ServletException , IOException {022 .request . setCharacterEncoding ( "UTF-8" );023 .response . setContentType ( "text/html;charset=UTF-8" );024 .System . out . println ( "文件上传开始……" );025 .String savePath = generateDir ();026 .processUpload ( request , response , savePath );027 .028 .}029 ./*030.* 上传处理方法031.*/032 .public void processUpload ( HttpServletRequest request ,033 .HttpServletResponse response , String savePath ) {034 .035 .036 .DiskFileItemFactory factory = new DiskFileItemFactory ();037 .// 缓存大小为512KB038 .factory . setSizeThreshold ( 524288 );039 .// 临时文件夹040 .factory . setRepository ( new File ( savePath + "/temp" ));041 .// 初始化上传控件042 .ServletFileUpload upload = new ServletFileUpload ( factory );043 .// 文件大小最大3MB044 .upload . setFileSizeMax ( 3145728 );045 .upload . setHeaderEncoding ( "UTF-8" );046 .List fileList = null ;047 .try {048 .fileList = upload . parseRequest ( request );049 .} catch ( FileUploadException e ) {050 .e . printStackTrace ();051 .}052 .Iterator < FileItem > it = fileList . iterator ();053 .String name = "" ;054 .String filename = "" ;055 .while ( it . hasNext ()) {056 .FileItem item = it . next ();057 .if (! item . isFormField ()) {058 .name = item . getName ();059 .if ( name != null && ! name . trim (). equals ( "" )) {060 .filename = generateFileName ( name );061 .File file = new File ( savePath + "/" + filename );062 .try {063 .item . write ( file );064 .String imgstr = this . getServletContext ()065 .. getContextPath ();066 .imgstr = imgstr + "/upload/" + filename ;067 .response . getWriter (). write ( "http://localhost:8080" + imgstr );068 .} catch ( Exception e ) {069 .e . printStackTrace ();070 .}071 .}072 .}073 .}074 .}075 ./*076.* 初始化文件存储路径077.*/078 .private String generateDir () {079 .String pathString = getServletConfig (). getServletContext (). getRealPath (080 ."/upload" );081 .String tempString = getServletConfig (). getServletContext (). getRealPath (082 ."/upload/temp" );083 .File dirPath = new File ( pathString );084 .File dirTemp = new File ( tempString );085 .if (! dirPath . exists ()) {086 .dirPath . mkdirs ();087 .}088 .if (! dirTemp . exists ()) {089 .dirTemp . mkdirs ();090 .}091 .return pathString ;092 .}093 ./*094.* 生成文件名095.*/096 .private String generateFileName ( String name ) {097 .long currentTime = System . currentTimeMillis ();098 .int i = ( int ) ( Math . random () * 1000 D + 1.0 D );099 .long result = currentTime + i ;100 .String filename = String . valueOf ( result ) + getFileExt ( name );101 .return filename ;102 .}103 ./*104.* 获取文件格式105.*/106 .private String getFileExt ( String name ) {107 .int pos = name . lastIndexOf ( "." );108 .if ( pos > 0 ) {109 .return name . substring ( pos );110 .} else {111 .return name ;112 .}113 .}114 .}至此，到你 Servlet 中所写的目录下查看是否有文件已经传来：QQ 图片 20 谁谁谁 4 . jpg至此，利用组将实现文件上传，其本质这个组件并没有实现文件的上传，自己必须亲自写好上传的业务逻辑，组件只是简化并是上传界面友好罢了！只要组件的参数和方法使用恰当，便能自定义许多其他属性；这个仅仅是一个开始，接下来还要将上传来的图片进行预览剪切，这时候会用到其他的 jQuery 组件，达到类似于论坛更换剪切头像的目的；
使用Jquery uploadify上传文件
最新推荐文章于 2022-10-23 20:16:50 发布
1907
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
