jquery uploadify+java

最新推荐文章于 2021-02-26 02:44:08 发布

SuperMaNong

最新推荐文章于 2021-02-26 02:44:08 发布

阅读量448

点赞数

文章标签： jqueryUploadify servlet java springmvc

本文链接：https://blog.csdn.net/muzixiaoting/article/details/51444436

版权

搞了一天终于出来了，其中也下了很多demo都没有成功。下面例子绝对能跑通，现总结下遇到的问题（如果有理解错误或不深刻的地方希望大家多多提宝贵意见,或是代码写的不好的地方也请指出谢谢！）。

问题：

1，点击后，不出现效果。

原因是flash调用失败。可能是浏览器问题或是路径不对。测得时候用火狐不行，用谷歌可以。

2，点击按钮后没有反应

目测是js加载顺序问题。

网上大多是图下方法：

改成下图后成功：

3，版本问题

官方网站上是3.2版本的，其中swfobject.js 加入到了jquery.uploadify.js，所以不需要额外的引入swfobject.js。网上一些调用方法据说是旧版本的。v2.1.0版本的需要引入。

4，Demo: jquery+java(用的servlet)

需要引入的jar: commons-fileupload-1.2.1.jar,commons-io-1.3.2.jar

需要引入的js: jquery-1.10.2.js,jquery.uploadify.js

uploadify.swf,uploadify.css

jsp前端页面:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

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

<html>

<head>

<title>Uploadify</title>

$(document).ready(function() {$("#uploadify").uploadify(

{

//开启调试

'debug' : false,

//是否自动上传

'auto' : false,

//超时时间

'successTimeout' : 99999,

//附带值

'formData' : {

'userid' : '用户id',

'username' : '用户名',

'rnd' : '加密密文'

//flash

'swf' : "uploadify.swf",

//不执行默认的onSelect事件

'overrideEvents' : [ 'onDialogClose' ],

//文件选择后的容器ID

'queueID' : 'uploadfileQueue',

//服务器端脚本使用的文件对象的名称 $_FILES个['upload']

'fileObjName' : 'upload',

//上传处理程序

'uploader' : 'servlet/Upload',

//浏览按钮的背景图片路径

'buttonImage' : 'upbutton.gif',

//浏览按钮的宽度

'width' : '100',

//浏览按钮的高度

'height' : '32',

//expressInstall.swf文件的路径。

'expressInstall' : 'expressInstall.swf',

//在浏览窗口底部的文件类型下拉菜单中显示的文本

'fileTypeDesc' : '支持的格式：',

//允许上传的文件后缀

'fileTypeExts' : '*.jpg;*.jpge;*.gif;*.png',

//上传文件的大小限制

'fileSizeLimit' : '3MB',

//上传数量

'queueSizeLimit' : 25,

//每次更新上载的文件的进展

'onUploadProgress' : function(file,

bytesUploaded, bytesTotal,

totalBytesUploaded,

totalBytesTotal) {

//有时候上传进度什么想自己个性化控制，可以利用这个方法

//使用方法见官方说明

//选择上传文件后调用

'onSelect' : function(file) {

//返回一个错误，选择文件的时候触发

'onSelectError' : function(file,

errorCode, errorMsg) {

switch (errorCode) {

case -100:

alert("上传的文件数量已经超出系统限制的"

+ $('#file_upload')

.uploadify(

'settings',

'queueSizeLimit')

+ "个文件！");

break;

case -110:

alert("文件 ["

+ file.name

+ "] 大小超出系统限制的"

+ $('#file_upload')

.uploadify(

'settings',

'fileSizeLimit')

+ "大小！");

break;

case -120:

alert("文件 [" + file.name

+ "] 大小异常！");

break;

case -130:

alert("文件 [" + file.name

+ "] 类型不正确！");

break;

}

//检测FLASH失败调用

'onFallback' : function() {

alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");

//上传到服务器，服务器返回相应信息到data里

'onUploadSuccess' : function(file,

data, response) {

alert(data);

}

});

function doUplaod(){

$('#uploadify').uploadify('upload','*');

}

function closeLoad(){

$('#uploadify').uploadify('cancel','*');

}

</script>

</head>

<body>

<p>

、 </p>

</body>

</html>

java servlet 代码：

package com.test.fileserver.utils;

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;

public class FileServlet 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);

}

web.xml

<servlet>
<servlet-name>FileServlet</servlet-name>
<servlet-class>com.test.fileserver.utils.FileServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>FileServlet</servlet-name>
<url-pattern>/servlet/Upload</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>

ok了。完成。

5,Demo: springMvc+jquery uploadify

由于任务环境是springMVC的，所以又修改了下，下面之贴出和上面不同的地方。

效果图：

jsp:

多了 span showImage，用来显示上传的图片

是请求服务器后，用来显示图片

java 代码：

java: 上传图片跟servelt 不同，servlet从request中直接取所有图片，然后切分，遍历。这是上传完一张在上传另一张。（在请求一次这个方法）

其中的upload 由下面的定义

SuperMaNong

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery uploadify+java

搞了一天终于出来了，其中也下了很多demo都没有成功。下面例子绝对能跑通，现总结下遇到的问题（如果有理解错误或不深刻的地方希望大家多多提宝贵意见,或是代码写的不好的地方也请指出谢谢！）。
复制链接

扫一扫