JSP中Uploadify插件的使用（jQuery上传插件）

最新推荐文章于 2021-02-24 12:14:25 发布
最新推荐文章于 2021-02-24 12:14:25 发布
阅读量450 收藏
点赞数
文章标签： jquery
1、下载最新的zip压缩包 http://www.uploadify.com 

2、从其中提取文件。 
   下载插件安装包后，可以看到官方给出的例子。里面文件夹的几个主要文件：jquery.uploadify.js(完成上传功能的脚本文件，在调用页面引用)、uploadify.css(外观样式表)、uploader.swf(上传控件的主体文件，flash控件)、upload.php(服务器端处理文件，官方仅提供了php版的)。 
下面我使用的是在MyEclipse部署的java版。注意：需要加入三个commons.jar包：io、logging、fileupload。 

3、导入default.css,uploadify.css，jQuery脚本，swfobject脚本和Uploadify插件。并且添加调用插件使用$，在您的网页的<head>部分ready事件： 

Html代码   收藏代码
  1. <%@ page language="java" contentType="text/html; charset=utf-8"%>  
  2. <%  
  3. String path = request.getContextPath();  
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  5. %>  
  6. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  7. <html>  
  8.       <head>  
  9.         <base href="<%=basePath%>">  
  10.         <title>Upload</title>  
  11.  <!--装载文件-->  
  12.         <link href="css/default.css" rel="stylesheet" type="text/css" />  
  13.         <link href="css/uploadify.css" rel="stylesheet" type="text/css" />  
  14.         <script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>  
  15.         <script type="text/javascript" src="scripts/swfobject.js"></script>  
  16.         <script type="text/javascript" src="scripts/jquery.uploadify.v2.1.0.min.js"></script>  
  17.    <!--ready事件-->  
  18. <script type="text/javascript">  
  19.         $(document).ready(function() {  
  20.             $("#uploadify").uploadify({  
  21.                 'uploader'       : 'uploadify.swf',  
  22.                 'script'         : 'servlet/Upload',//后台处理的请求  
  23.                 'cancelImg'      : 'images/cancel.png',  
  24.                 'folder'         : 'uploads',//您想将文件保存到的路径  
  25.                 'queueID'        : 'fileQueue',//与下面的id对应  
  26.                 'queueSizeLimit'  :1,  
  27.                 'fileDesc'    : 'rar文件或zip文件’,      
  28.             'fileExt' : '*.rar;*.zip', //控制可上传文件的扩展名，启用本项时需同时声明fileDesc  
  29.                'auto'           : false,  
  30.                 'multi'          : true,  
  31.                 'simUploadLimit' : 2,  
  32.                 'buttonText'     : 'BROWSE'  
  33.             });  
  34.         });  
  35.         </script>    </head>  
  36.     <body>  
  37.         <div id="fileQueue"></div>  
  38.         <input type="file" name="uploadify" id="uploadify" />  
  39.         <p>  
  40.         <a href="javascript:jQuery('#uploadify').uploadifyUpload()">开始上传</a>&nbsp;  
  41.         <a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消所有上传</a>  
  42.         </p>  
  43.     </body>  
  44. </html>  

4、后台处理的upload.java 

Java代码   收藏代码
  1. package com.xzit.upload;  
  2. import java.io.File;  
  3. import java.io.IOException;  
  4. import java.util.Iterator;  
  5. import java.util.List;  
  6. import java.util.UUID;  
  7. import javax.servlet.ServletException;  
  8. import javax.servlet.http.HttpServlet;  
  9. import javax.servlet.http.HttpServletRequest;  
  10. import javax.servlet.http.HttpServletResponse;  
  11. import org.apache.commons.fileupload.FileItem;  
  12. import org.apache.commons.fileupload.FileUploadException;  
  13. import org.apache.commons.fileupload.disk.DiskFileItemFactory;  
  14. import org.apache.commons.fileupload.servlet.ServletFileUpload;  
  15.   
  16. @SuppressWarnings("serial")  
  17. public class Upload extends HttpServlet {  
  18.     @SuppressWarnings("unchecked")  
  19.     public void doPost(HttpServletRequest request, HttpServletResponse response)  
  20.             throws ServletException, IOException {  
  21.         String savePath = this.getServletConfig().getServletContext()  
  22.                 .getRealPath("");  
  23.         savePath = savePath + "/uploads/";  
  24.         File f1 = new File(savePath);  
  25.         System.out.println(savePath);  
  26.         if (!f1.exists()) {  
  27.             f1.mkdirs();  
  28.         }  
  29.         DiskFileItemFactory fac = new DiskFileItemFactory();  
  30.         ServletFileUpload upload = new ServletFileUpload(fac);  
  31.         upload.setHeaderEncoding("utf-8");  
  32.         List fileList = null;  
  33.         try {  
  34.             fileList = upload.parseRequest(request);  
  35.         } catch (FileUploadException ex) {  
  36.             return;  
  37.         }  
  38.   
  39.         Iterator<FileItem> it = fileList.iterator();  
  40.         String name = "";  
  41.         String extName = "";  
  42.         while (it.hasNext()) {  
  43.             FileItem item = it.next();  
  44.             if (!item.isFormField()) {  
  45.                 name = item.getName();  
  46.                 long size = item.getSize();  
  47.                 String type = item.getContentType();  
  48.                 System.out.println(size + " " + type);  
  49.                 if (name == null || name.trim().equals("")) {  
  50.                     continue;  
  51.                 }  
  52.   
  53.                 //扩展名格式：   
  54.                 if (name.lastIndexOf(".") >= 0) {  
  55.                     extName = name.substring(name.lastIndexOf("."));  
  56.                 }  
  57.   
  58.                 File file = null;  
  59.                 do {  
  60.                     //生成文件名：  
  61.                     name = UUID.randomUUID().toString();  
  62.                     file = new File(savePath + name + extName);  
  63.                 } while (file.exists());  
  64.                 File saveFile = new File(savePath + name + extName);  
  65.                 try {  
  66.                     item.write(saveFile);  
  67.                 } catch (Exception e) {  
  68.                     e.printStackTrace();  
  69.                 }  
  70.             }  
  71.         }  
  72.         response.getWriter().print(name + extName);  
  73.     }  
  74. }  

5、配置处理的servlet 
Web.xml文件 
Xml代码   收藏代码
  1.  <?xml version="1.0" encoding="UTF-8"?>  
  2. t;web-app version="2.4"  
  3.   xmlns="http://java.sun.com/xml/ns/j2ee"  
  4.   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
  5.   xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee  
  6.   http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">   
  7. <servlet>  
  8.   <servlet-name>upload</servlet-name>  
  9.   <servlet-class>com.xzit.upload.Upload</servlet-class>  
  10. </servlet>  
  11. <servlet-mapping>  
  12.   <servlet-name>upload</servlet-name>  
  13.   <url-pattern>/servlet/Upload</url-pattern>  
  14. </servlet-mapping>  
  15. <welcome-file-list>  
  16.   <welcome-file>index.jsp</welcome-file>  
  17. </welcome-file-list>  
  18. t;/web-app>  
一叶轮回
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用jsp+uploadify插件实现附件上传到ftp服务器的功能
时光匆匆独白 将颠沛磨成卡带
05-11 7974
这个周中午闲暇的时候研究了一下uploadify插件的使用，主要是想要实现一个附件上传的功能，看之前公司同事好像用过这个插件，但是见人家挺忙的，我只能找到她写的源码自己研究了，好来，话不多说，先把实现的效果贴出来给大家看看： 这是还未点击上传附件的界面（图：1） 当点击选择附件界面会弹出文件选择对话框如下： 选择好要上传的文件点击打开按钮，文件开始上传：
Jsp中Uploadify插件的使用（jQuery上传插件）(转)
07-28
**JSP中Uploadify插件的使用（jQuery上传插件）** Uploadify是一款基于jQuery的文件上传插件，它提供了一种优雅的方式来处理文件上传，允许用户在上传过程中看到进度条，同时支持批量上传和自定义事件。在JSP开发中...
Jsp中Uploadify插件的使用（jQuery上传插件）
hg344700的专栏
07-17 2618
原文地址：Jsp中Uploadify插件的使用（jQuery上传插件）作者：项海军 该插件使用的是jQuery，Flash和后端（您选择哪种语言实现的上传）脚本的组合。   如何来使用它？      ——执行此插件非常简单，只需在jQuery函数中调用即可，先快速让此功能跑起来。1、下载最新的zip压缩包http://www.uploadify.com2、从其中提取文件。   下载插件安装包后，可以看到官方给出的例子。里面文件夹的几个主要文件：jquery.uploadify.js(完成上传功能的脚本文件，
Jquery上传插件uploadify的使用（JSP）版
Everlasting丶幻的专栏
11-26 2723
今天，突然想研究下那个uploadify插件，在网上搜索好多资料，发现千奇百怪，可能是版本问题，关于服务端处理脚本我发现了两种说法，一种是通过‘script’来设置的，另一种是用‘uploadify’来设置的。我下面演示的是使用后者来设置服务端处理脚本的，插件版本为3.1版本 准备好uploadify 3.1版本的插件建立一个web项目，并导入所需要的包，包括三个包（commons-fi
java uploadify 3.2_jQuery上传插件Uploadify 3.2 上传文件
weixin_35059431的博客
02-24 113
项目结构：代码：index.jsp:String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>My JSP 'index.jsp' starting page$...
jquery上传 java_java版-JQuery上传插件Uploadify使用实例
weixin_29620579的博客
02-12 88
摘自：http://itindex.net/detail/47160-java-jquery-%E4%B8%8A%E4%BC%A0运行效果：包结构图：后台JAVA逻辑：package com.bijian.study;import java.io.File;import java.io.IOException;import java.util.Iterator;import java.util.L...
jquery uploadify插件多文件上传
java学习开发
11-07 1126
效果图： 1、jquery uploadify 下载：http://www.uploadify.com/   2、安装：解压后拷贝的工程目录下面，如：WebRoot/uploaddify   3、配置项说明：        uploader： uploadify.swf 文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后淡出打开文件对话框，默认
使用jquery的uploadify插件跨域上传文件
欧程部落
09-30 4279
最近在项目开发中，需要将不同的项目底下的图片传到一个共同的文件服务器上，而这些项目是部署在不同的机器上的，这就涉及到文件跨域上传的问题。由于在之前的项目中，都是使用jquery的uploadify插件来上传图片，依照这个思路，通过查找，发现uploadify就可以实现跨域上传功能，具体如下： (1)将JSP页面原先使用的本地上传调用修改远程调用，相当于是调用远程文件服务器上的jsp来完成文件上传
jQuery上传插件Uploadify使用Demo、本地上传（ssm框架下）
愿我如星君如月 ... 夜夜流光相皎洁 ...
03-07 5985
效果： 1. jar包导入： commons-fileupload commons-fileupload 1.3.1 2. 在spring的配置文件中加上： 3. 从官网上下载可用的版本解压后添加到项目中
聊一聊jQuery插件uploadify使用方法
11-22
在网页开发中，文件上传功能是不可或缺的一部分，而jQuery插件uploadify因其易用性和广泛支持性，成为许多开发者的选择。本文将深入探讨uploadify的使用方法，以及在实际应用中可能遇到的问题与解决方案。 首先，...
jsp调用uploadify文件上传插件实现文件快速上传.rar
07-10
jsp使用uploadify插件实现文件上传的示例，测试时将uploadify 直接导入myeclipse就能用了。 　uploadify是一个与jquery和flash结合实现的上传程序，界面挺漂亮，用起来也方便，不过浏览器需要安装有Flash插件，好像...
uploadify插件实现多个图片上传并预览
12-13
使用uploadify插件可方便实现图片上传功能。兼容ie6、ie7。 上传成功之后使用插件的回调函数读取json数据，根据url实现图片预览。 效果图： 点击浏览文件上传图片，图片依次在右侧显示预览效果。 实现： json数据...
pillow_heif-0.17.0-pp39-pypy39_pp73-macosx_14_0_arm64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
cykooz.resizer-3.0.0-cp310-cp310-macosx_11_0_arm64.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
[毕设]Delphi题库管理与试卷自动生成系统.zip
最新发布
07-27
[毕设]Delphi题库管理与试卷自动生成系统
131 种水果、蔬菜和坚果的 90380张的高质量图像数据集+图像识别与定位+该数据集相关的研究论文
07-27
<项目介绍> 包含131 种水果、蔬菜和坚果的 90380张的高质量图像数据集+该数据集相关的研究论文。可供深度学习图像识别与定位。 - 训练集大小：67700 个图像 测试集大小：22888 个图像 文件名格式：image_index_100.jpg（例如 32_100.jpg）或 r_image_index_100.jpg（例如 r_32_100.jpg）或 r2_image_index_100.jpg 或 r3_image_index_100.jpg。 “r”代表旋转水果。 “r2”表示水果绕第三轴旋转。 “100”来自图像尺寸（100x100 像素）。 水果是如何拍摄的: 1:使用 C920 摄像机拍摄水果。最好的网络摄像头之一。 2:在水果后面，我们放了一张白纸作为背景。 3:将水果和蔬菜种植在低速电机（3转/分钟）的轴中，并录制一段20秒的短片。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------
Uploadify3.1中文详解：jQuery上传插件设置与使用
"jQuery Uploadify 3.1 是一款强大的前端文件上传插件，提供了丰富的配置选项和事件处理，使得用户能够自定义上传行为。它支持自动上传、自定义按钮样式、文件大小限制以及多种文件类型的选择。此中文详细参考手册...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值