首页/技術動態

怎么引入jquery库，Jsp中Uploadify插件的使用（jQuery上传插件）

 2023-09-21 阅读 17 评论 0

摘要：原文地址：Jsp中Uploadify插件的使用（jQuery上传插件）作者：项海军 该插件使用的是jQuery，Flash和后端（您选择哪种语言实现的上传）脚本的组合。怎么引入jquery库？ 如何来使用它？ ——执行此插件非常简单，只需

原文地址：Jsp中Uploadify插件的使用（jQuery上传插件）作者：项海军

该插件使用的是jQuery，Flash和后端（您选择哪种语言实现的上传）脚本的组合。

怎么引入jquery库？ 如何来使用它？

——执行此插件非常简单，只需在jQuery函数中调用即可，先快速让

此功能跑起来。

js文件夹上传插件，

1、下载最新的zip压缩包 http://www.uploadify.com

vue 上传大型文件插件，2、从其中提取文件。

下载插件安装包后，可以看到官方给出的例子。里面文件夹的几个主要文件：jquery.uploadify.js(完成上传功能的脚本文件，在调用页面引用)、uploadify.css(外观样式表)、uploader.swf(上传控件的主体文件，flash控件)、upload.php(服务器端处理文件，官方仅提供了php版的)。

下面我使用的是在MyEclipse部署的java版。注意：需要加入三个commons.jar包。

移动端上传插件。 [转载]Jsp中Uploadify插件的使用(jQuery上传插件)

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

vue组件中引入js文件并使用？<%@ page language="java" contentType="text/html; charset=utf-8"%>

<%

String path = request.getContextPath();

WA插件、String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">

<title>Upload</title>

<!--装载文件-->

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

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

<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>

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

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

<!--ready事件-->

<script type="text/javascript">

$(document).ready(function() {

$("#uploadify").uploadify({

'uploader' : 'uploadify.swf',

'script' : 'servlet/Upload',//后台处理的请求

'cancelImg' : 'images/cancel.png',

'folder' : 'uploads',//您想将文件保存到的路径

'queueID' : 'fileQueue',//与下面的id对应

'queueSizeLimit' :1,

'fileDesc' : 'rar文件或zip文件’,

'fileExt' : '*.rar;*.zip', //控制可上传文件的扩展名，启用本项时需同时声明fileDesc

'auto' : false,

'multi' : true,

'simUploadLimit' : 2,

'buttonText' : 'BROWSE'

});

});

</script> </head>

<body>

<div id="fileQueue"></div>

<input type="file" name="uploadify" id="uploadify" />

<p>

<a href="javascript:jQuery('#uploadify').uploadifyUpload()">开始上传</a>&nbsp;

<a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消所有上传</a>

</p>

</body>

</html>

4、后台处理的upload.java

package com.xzit.upload;

import java.io.File;

import java.io.IOException;

import java.util.Iterator;

import java.util.List;

import java.util.UUID;

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;

@SuppressWarnings("serial")

public class Upload extends HttpServlet {

@SuppressWarnings("unchecked")

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

String savePath = this.getServletConfig().getServletContext()

.getRealPath("");

savePath = savePath + "/uploads/";

File f1 = new File(savePath);

System.out.println(savePath);

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 = UUID.randomUUID().toString();

file = new File(savePath + name + extName);

} while (file.exists());

File saveFile = new File(savePath + name + extName);

try {

item.write(saveFile);

} catch (Exception e) {

e.printStackTrace();

}

}

}

response.getWriter().print(name + extName);

}

}

5、配置处理的servlet

Web.xml文件

<?xml version="1.0" encoding="UTF-8"?>

<web-app version="2.4"

xmlns="http://java.sun.com/xml/ns/j2ee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee

http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

<servlet>

<servlet-name>upload</servlet-name>

<servlet-class>com.xzit.upload.Upload</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>upload</servlet-name>

<url-pattern>/servlet/Upload</url-pattern>

</servlet-mapping>

<welcome-file-list>

<welcome-file>index.jsp</welcome-file>

</welcome-file-list>

</web-app>

到这里就ok了哦。

下篇将对插件的可选参数作详细地介绍，也可参考官方的参考文档。

http://www.uploadify.com/documentation/

转载于:https://www.cnblogs.com/rayy/archive/2010/09/20/4399750.html

版权声明：本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。

原文链接：https://hbdhgg.com/4/80989.html

上一篇：ansi编码和utf-8，UNICODE与ANSI的区别
下一篇：怎样练习一万小时(转)
标签：怎么引入jquery库js文件夹上传插件vue 上传大型文件插件移动端上传插件vue组件中引入js文件并使用WA插件chrome插件su插件怎么安装
怎么引入jquery库

发表评论:

最新文章
阅读排行
猜你喜欢
热门标签

本站为非赢利网站，部分文章来源或改编自互联网及其他公众平台，主要目的在于分享信息，版权归原作者所有，内容仅供读者参考，如有侵权请联系我们删除！

Copyright © 2022 匯編語言學習筆記 Inc. 保留所有权利。

底部版权信息