JQuery上传插件Uploadify并传参数(一) jQueryServletJavaScriptApacheCSS
Uploadify是JQuery的一个上传插件,实现的效果非常不错,进度显示或者速度显示都可以!
同时。。我已经使用最新版写了个。大家可以看这么的这个。。
文章: JQuery上传插件Uploadify并传参数(二)
链接: http://yangpanwww.iteye.com/blog/1550508
也可以去看看官网上面的 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:
上一篇: JAVA 实现jpg/tif/bmp 等图片之间格式得互相转换
下一篇: PDF 转 JPG