uploadify.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!--装载文件-->
<link href="/res/js/widget/jquery/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/res/js/widget/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/res/js/widget/jquery/swfobject.js"></script>
<script type="text/javascript" src = "/res/js/widget/jquery/jquery.uploadify.v2.1.0.js"></script>
<!--ready事件-->
<script type="text/javascript">
$(document).ready(function() {
$("#${param['componentID']}").uploadify({
'uploader': '/res/js/widget/jquery/uploadify.swf',
'script': '/servlet/uploadify?markWater=${param.markWater}',
//'script': '/imageUploadService.htm?markWater=${param.markWater}',
'cancelImg': '/res/js/widget/jquery/cancel.png',
'queueID' : '${param['componentID']}_queue', //和存放队列的DIV的id一致
//'fileDataName': 'fileupload', //必须,和以下input的name属性一致
'auto' : false, //是否自动开始
'multi': true, //是否支持多文件上传
'buttonText': 'OPEN', //按钮上的文字
'simUploadLimit' : 1, //一次同步上传的文件数目
'sizeLimit': 19871202, //设置单个文件大小限制,单位为byte
'queueSizeLimit' : ${not empty param['maxPhotos'] ? param['maxPhotos'] : '10'}, //队列中同时存在的文件个数限制
'fileDesc': '支持格式:jpg/gif/jpeg/png/bmp.', //如果配置了以下的'fileExt'属性,那么这个属性是必须的
'fileExt': '*.jpg;*.gif;*.jpeg;*.png;*.bmp',//允许的格式
'onComplete': function (event, queueID, fileObj, response, data) {
<c:choose>
<c:when test="${param['preview'] eq 'true'}">
var putin = "<div class='backimge' id='"+queueID+"'><div class='backtop'></div><div class='backcenter'><div class='bimage'><img src='${Constants_IMAGE_URL}"+response+"' width='137' height='103'></div><div class='btxtd'>";
<c:if test="${param['photoTitleEnabled'] eq 'true'}">
putin += "<input type='text' name=${param['storeField']}Title id=${param['componentID']}Title size='20' />";
</c:if>
putin +="</div><div style='text-align:center'><input type='button' id='publish' onclick=javascript:delPhoto('"+queueID+"'); name='publish' class='post_bt' value=' 删除 '></div></div><div class='backbottom'></div><input type='hidden' value='"+response+"' name='${param['storeField']}'></div>";
$('#${param['componentID']}_show').append(putin);
</c:when>
<c:otherwise>
$('#${param['componentID']}_show').append("<input type='hidden' value='"+response+"' name='${param['storeField']}'>");
//alert("文件:" + fileObj.name + "上传成功");<img src='${Constants_IMAGE_URL}"+response+"' width='100' height='150'>
</c:otherwise>
</c:choose>
},
'onError': function(event, queueID, fileObj) {
alert("文件:" + fileObj.name + "上传失败");
},
'onCancel': function(event, queueID, fileObj){
}
});
});
function delPhoto(id){
$('div').remove('#'+id);
}
</script>
<!-- 上传队列 DIV -->
<div id="${param['componentID']}_queue"></div>
<p><input type="file" name="uploadify" id="${param['componentID']}" value="upload" /></p>
<p>
<a href="javascript:jQuery('#${param['componentID']}').uploadifyUpload()">开始上传</a>
<a href="javascript:jQuery('#${param['componentID']}').uploadifyClearQueue()">取消所有上传</a>
</p>
<div id="${param['componentID']}_show" class="messageback">
<!-- 根据传过来指定格式的字符串,来填充预览图片列表 -->
<c:if test="${not empty param['photoLinks']}">
<c:forEach items="${fn:split(param['photoLinks'], ',')}" var="phohoLink" varStatus="s">
<c:choose>
<c:when test="${param['preview'] eq 'true'}">
<div class="backimge" id="${param['componentID']}_image_${s.count}">
<div class="backtop"></div>
<div class="backcenter">
<div class="bimage"><img src="${Constants_IMAGE_URL}${phohoLink}" width="137" height="103"></div>
<div class="btxtd">
<c:if test="${param['photoTitleEnabled'] eq 'true'}">
<input type="text" name="${param['storeField']}Title" id="${param['storeField']}Title" size="20" />
</c:if>
</div>
<div style="text-align:center">
<input id="publish" onclick="javascript:delPhoto('${param['componentID']}_image_${s.count}');" name="publish" class="post_bt" onmouseover="this.className='post_bt2';" onmouseout="this.className='post_bt';" value=" 删除 " type="button">
</div>
</div>
<div class="backbottom"></div>
<input type="hidden" value="${phohoLink}" name='${param['storeField']}'>
</div>
</c:when>
<c:otherwise>
<input type="hidden" value="${phohoLink}" name='${param['storeField']}'>
</c:otherwise>
</c:choose>
</c:forEach>
</c:if>
</div>
<!-- 参数说明
${param['storeField']} 后台处理的name
${param['preview']} 是否预览
${param['photoTitleEnabled']} 是否显示图片tilte填入框
${param['maxPhotos']} 最大上传文件个数
${param['photoLinks']} 修改图片时用来填充预览图片用的
${param['componentID']} 唯一的ID
-->
使用案例片段
<c:import url="../components/uploadify.jsp">
<c:param name="componentID" value="testComponent1" />
<c:param name="storeField" value="photos" />
<c:param name="preview" value="true" />
<c:param name="photoTitleEnabled" value="false" />
<c:param name="maxPhotos" value="2" />
</c:import>
package com.sikoo.web.utils;
import java.io.IOException;
import java.io.InputStream;
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 com.sikoo.utils.App;
import com.sikoo.utils.FileRepository;
public class UploadifyServlet extends HttpServlet {
/**
* Servlet初始化方法
*/
public void init() throws ServletException {
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("--- BEGIN---");
boolean mark = false;
String markWater= request.getParameter("markWater");
if(markWater.equals("true")){
mark = true;
}
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("."));
}
try {
// item.write(saveFile);
//下面为保存到指定的目录,并返回保存的目录
FileRepository fileRepository=(FileRepository)App.getBean("fileRepository");
InputStream in = item.getInputStream();
String repo = fileRepository.savePhotoFile("/tmp", in, extName,mark);
System.out.println(repo+"...........repo");
response.getWriter().write(repo);//对应回调函数中response的值
} catch (Exception e) {
e.printStackTrace();
}
}
}
System.out.println("--- END---");
}
}
大家可以根据自己的页面样式做调整
- 大小: 19.6 KB
分享到:
相关推荐
HTML5 PHP jquery uploadify上传文件,带进度条,author:吕大豹。仿照uploadify写的,www.codesc.net已做过修正,本例的配置参数均与uploadify官网一致,参照官网的api就可以了,直接把文件夹上传到支持php的服务器...
jquery uploadify插件Demo
一直以来jquery uploadify上传插件都不支持中文,每次都用图片代替也没感觉什么,但是最近开发的项目中有些特殊要求,不得不使用中文,于是中文支持版就出来了,这个是基于uploadify 2.1.4版修改的,请朋友们给点力,我赚点...
文件上传功能基于jquery uploadify+ajax+ashx+flash技术实现,功能庞大,并具有良好的移植性。其能够一次性选择多个文件上传,查看上传进度,控制文件上传类型和大小,限制上传数量,接受服务器反馈信息,为每一步...
Jquery Uploadify上传带进度条 可以用来上传大文件,代码精简易懂。
Jquery Uploadify使用参数详解
jquery Uploadify jsp 官网例子中没有jsp 开始了解的人不知道怎么用jqueryUploadify可以看这个例子很简单
jquery uploadify实现批量上传
JQuery uploadify 实现文件批量上传完整例子,所有js,和uploadify插件js 都放在这个例子中
jquery uploadify java
jQuery UpLoadify批量上传源码 jquery uploadify批量上传中文版,FALSH按钮一次选择多个文件上传 可以使用uploadify的buttonText来设置中文按钮 上传后保留队列 上传完成后返回上传后的URL
jsp,servlet,jquey最新版的jquery uploadify多文件上传 采用最新 版本的jquery uploadify。 有注释。
jquery文件上传插件 jquery.uploadify.js 不支持IE10现在经过修改,已经支持IE6、IE7、IE8、IE9、IE10、IE11.zip
MVC JQuery uploadIfy 批量上传并写入数据库信息
该uploadify为目前官网最新版本,由鄙人修改后,可以支持buttonText属性为中文
uploadify功能强大,支持多文件、批量上传、状态进度条等,提供前端文件限制相关设置。由于是flash环境全面支持asp、asp.net、php等平台。 该文件为uploadify for asp的demo,解压后即可运行。
jquery uploadify批量上传中文版,FALSH按钮一次选择多个文件上传 可以使用uploadify的buttonText来设置中文按钮 上传后保留队列 上传完成后返回上传后的URL
jQueryUpLoadify +NET 4.0,自己整合了,可以直接拿来使用!
jQuery Uploadify文件批量上传实例 自己对jQuery Uploadify插件稍作整理,样式不合适可以根据自己的需要修改; 可以实现多文件上传,同时显示上传进度条和百分比,上传完毕后将统计上传文件的总数量、文件总大小和...