Uploadify是JQuery的一个上传插件,实现的效果非常不错,进度显示或者速度显示都可以!
官方 : http://www.uploadify.com/
同时。。我已经使用最新版写了个。大家可以看这么的这个。。
文章: JQuery上传插件Uploadify并传参数(二)
也可以去看看官网上面的 dome 下载包...API 等
下面是我开发过程遇到的一些问题总结:
1、上传失败 IO ERROR ------测试是否是 servlet 等配置或者关注flash的版本
2、前台传参中文乱码 -----------这个要根据应用服务器不同可能不同吧...反正只要我们的 界面、界面传参以及后台接收的编码设置一致应该就没上面问题..反正这个问题好解决的...
3、批量上传的时候,只有第一个附件上传的时候可以接收到前台传来的name参数,而后面的参数都为null-------设置'simUploadLimit' : 1, // 一次同步上传的文件数目为 1,问题解决...当初这个问题可是难了我好久!fuck
嘿嘿....下面我贴出代码
jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%
String path = request.getContextPath();
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>QQ:609865047 --- 妞见妞爱</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
</head>
<body>
<link href="js/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/jquery.uploadify.v2.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#uploadify").uploadify({
'uploader' : 'js/uploadify.swf',
'script' : 'scripts/uploadify',//servlet的路径或者.jsp 这是访问servlet 'scripts/uploadif'
'method' :'GET', //如果要传参数,就必须改为GET
'cancelImg' : 'js/cancel.png',
'folder' : 'uploads', //要上传到的服务器路径,
'queueID' : 'fileQueue',
'auto' : false, //选定文件后是否自动上传,默认false
'multi' : true, //是否允许同时上传多文件,默认false
'simUploadLimit' : 1, //一次同步上传的文件数目
'sizeLimit' : 19871202, //设置单个文件大小限制,单位为byte
'queueSizeLimit' : 5, //限制在一次队列中的次数(可选定几个文件)。默认值= 999,而一次可传几个文件有 simUploadLimit属性决定。
'fileDesc' : '支持格式:jpg或gif', //如果配置了以下的'fileExt'属性,那么这个属性是必须的
'fileExt' : '*.jpg;*.gif',//允许的格式
'scriptData' :{'name':$('#name').val()}, // 多个参数用逗号隔开 'name':$('#name').val(),'num':$('#num').val(),'ttl':$('#ttl').val()
onComplete: function (event, queueID, fileObj, response, data) {
var value = response ;
alert("文件:" + fileObj.name + "上传成功");
},
onError: function(event, queueID, fileObj) {
alert("文件:" + fileObj.name + "上传失败");
},
onCancel: function(event, queueID, fileObj){
alert("取消了" + fileObj.name);
}
});
});
function uploasFile(){
//校验
var name=document.getElementById("name").value;
if(name.replace(/\s/g,'') == ''){
alert("名称不能为空!");
return false;
}
//设置 scriptData 的参数
$('#uploadify').uploadifySettings('scriptData',{'name':$('#name').val()});
//上传
jQuery('#uploadify').uploadifyUpload()
}
</script>
名称:<input type="text" id="name" name="name" value="妞见妞爱" >
<div id="fileQueue"></div>
<input type="file" name="uploadify" id="uploadify" />
<p>
<a href="javascript:uploasFile()">开始上传</a>
<a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消所有上传</a>
</p>
</body>
</html>
Uploadify.java
package com;
import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
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;
import org.apache.commons.fileupload.util.Streams;
public class Uploadify extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* 实现多文件的同时上传
*/
public void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
//设置接收的编码格式
request.setCharacterEncoding("UTF-8");
Date date = new Date();//获取当前时间
SimpleDateFormat sdfFileName = new SimpleDateFormat("yyyyMMddHHmmss");
SimpleDateFormat sdfFolder = new SimpleDateFormat("yyMM");
String newfileName = sdfFileName.format(date);//文件名称
String fileRealPath = "";//文件存放真实地址
String fileRealResistPath = "";//文件存放真实相对路径
//名称 界面编码 必须 和request 保存一致..否则乱码
String name = request.getParameter("name");
String firstFileName="";
// 获得容器中上传文件夹所在的物理路径
String savePath = this.getServletConfig().getServletContext().getRealPath("/") + "uploads\\" + newfileName +"\\";
System.out.println("路径" + savePath);
File file = new File(savePath);
if (!file.isDirectory()) {
file.mkdir();
}
try {
DiskFileItemFactory fac = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(fac);
upload.setHeaderEncoding("UTF-8");
// 获取多个上传文件
List fileList = fileList = upload.parseRequest(request);
// 遍历上传文件写入磁盘
Iterator it = fileList.iterator();
while (it.hasNext()) {
FileItem item = (FileItem) it.next();
// 如果item是文件上传表单域
// 获得文件名及路径
String fileName = item.getName();
if (fileName != null) {
firstFileName=item.getName().substring(item.getName().lastIndexOf("\\")+1);
String formatName = firstFileName.substring(firstFileName.lastIndexOf("."));//获取文件后缀名
fileRealPath = savePath + newfileName+ formatName;//文件存放真实地址
BufferedInputStream in = new BufferedInputStream(item.getInputStream());// 获得文件输入流
BufferedOutputStream outStream = new BufferedOutputStream(new FileOutputStream(new File(fileRealPath)));// 获得文件输出流
Streams.copy(in, outStream, true);// 开始把文件写到你指定的上传文件夹
//上传成功,则插入数据库
if (new File(fileRealPath).exists()) {
//虚拟路径赋值
fileRealResistPath=sdfFolder.format(date)+"/"+fileRealPath.substring(fileRealPath.lastIndexOf("\\")+1);
//保存到数据库
System.out.println("保存到数据库:");
System.out.println("name:"+name);
System.out.println("虚拟路径:"+fileRealResistPath);
}
}
}
} catch (FileUploadException ex) {
ex.printStackTrace();
System.out.println("没有上传文件");
return;
}
response.getWriter().write("1");
}
public void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doGet(req, resp);
}
}
web.xml
<servlet>
<servlet-name>Uploadify</servlet-name>
<servlet-class>com.Uploadify</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Uploadify</servlet-name>
<url-pattern>/scripts/uploadify</url-pattern>
</servlet-mapping>
效果图片看及 dome 见附件~~~~~~~~~~~
我也是根据 dada_fangfang 大哥 http://dada-fangfang.iteye.com/blog/865177 文章改进来的....
这边有 struts 和 springmvc 的写法...但是..他那边就纯粹的上传文件...如果还需要传参数的话!
我的这篇就 希望对大家有所帮助!
效果图:
图1:
图2:
- 大小: 8.2 KB
- 大小: 24.3 KB
分享到:
相关推荐
NULL 博文链接:https://yangpanwww.iteye.com/blog/1550508
jQuery上传文件的插件,内部利用flash上传。参数和方法丰富。
uploadify插件与php的结合,有上传后小图预览,带删除链接,中文转码,有注释,还有uploadify3.1的参数详解word文档。ps:自己学习jquery权威指南时遇到的问题,找了很堵资料,还是摸索出来了,php的处理不是很详细,...
UploadiFive是一款来自国外的、优秀的jQuery插件,主要功能是上传文件,支持文件的批量上传、拖拽上传等,是一个易集成的多文件上传解决方案。 其前身Uploadify在很多项目中已被广泛之用,但是Uploadify需要Flash的...
最近调试成功了jquery下的uploadify文件上传,包括fileExt,onComplete,onAllComplete等参数使用,里边有个说明,详细介绍各参数。
...
uploadify是一款基于jQuery库的上传插件,但很可惜的是无论你怎么设置参数buttonText ,它的中文按钮都会出现乱码的情况.本资源更正了源码的编码方式,从根本上解决了中文(包括CJK)乱码的问题。要知道乱码原因,及...
jquery的一个上传插件,运用jquery+swf实现上传。 带进度条,也可以同时上传多个(需修改参数),
本文实例为大家分享了uploadify多图上传具体实现代码,可动态添加上传框,供大家参考,具体内容如下 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; ...
Uploadify简单说来,是基于Jquery的一款文件上传插件。它的功能特色总结如下: 支持单文件或多文件上传,可控制并发上传的文件数 在服务器端支持各种语言与之配合使用,诸如PHP,.NET,Java…… 通过参数可配置...
1、js代码: 代码如下:[removed] $(document).ready(function() { $(‘#fileInput’).uploadify({ //以下参数均是可选 ‘uploader’ : ‘<%=basePath%>images/uploadify.swf’, //指定上传控件的主体文件,...
对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Flash,主要特性:支持多文件上传、HTML5版本可拖拽上传、实时上传进度条显示、强大的参数定制功能,如文件大小、文件类型、按钮图片定义、...
(1)、大家好,我是jquery插件大家族中负责实现异步上传的插件,我不是唯一,只是较好用的一款。 (2)、我的功能: 支持单文件或多文件上传,可控制并发上传的文件数 在服务器端支持各种语言与之配合使用,...
本文主要介绍了jQuery uploadify文件上传插件的使用方法,uploadify这个插件是基于js里面的jquery库写的。结合了ajax和flash,实现了这个多线程上传的功能。具有很好的参考价值,需要的朋友一起来看下吧
本文实例讲述了jQuery.Uploadify插件实现带进度条的批量上传功能。分享给大家供大家参考,具体如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs" Inherits="UploadifyDemo_...
昨天在网上找到了一个叫做uploadify的jquery上传插件,看到有几篇文章也是介绍这个插件的,心想何不用这个试试。 不过网上的这几篇文章用到的uploadify还是以前的旧版本uploadify-v2.1.0,我在官网上下载的是...
好看的多文件上传插件,jquery结合flash开发的,参数可自定义
昨天在网上找到了一个叫做uploadify的jquery上传插件,看到园子里有几篇文章也是介绍这个插件的,心想何不用这个试试。 不过园子里的这几篇文章用到的uploadify还是以前的旧版本uploadify-v2.1.0,我在官网上下载...