引用js,和css文件。因为本文模板引擎用的是freemarker,所以带有${base}等标签。
<script type="text/javascript" src="${base}/tools/uploadify/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="${base}/tools/uploadify/js/swfobject.js"></script>
<script type="text/javascript" src="${base}/tools/uploadify/js/jquery.uploadify.v2.1.4.min.js"></script>
<link href="${base}/tools/uploadify/css/default.css" rel="stylesheet" type="text/css" />
<link href="${base}/tools/uploadify/css/uploadify.css" rel="stylesheet" type="text/css" />
js调用uploadify的代码
<script type="text/javascript">
$(document).ready(function() {
$("#uploadify").uploadify({
'uploader' : '${base}/tools/uploadify/uploadify.swf',
'script' : '${base}/biz/cms/util/Upload',
'cancelImg' : '${base}/tools/uploadify/images/cancel.png',
'folder' : '${base}/uploads',
'queueID' : 'fileQueue',
'auto' : false,
'multi' : true,
'simUploadLimit' : 2,
'fileDesc' : '图片文件', //出现在上传对话框中的文件类型描述
'fileExt' : '*.jpg;*.bmp;*.png;*.gif;*.JPEG', //控制可上传文件的扩展名,启用本项时需同时声明fileDesc
'buttonImg' : '${base}/tools/uploadify/images/liulan.png',
'width' : '72',
'height' : '23',
'onComplete' : function(event,queueID,fileObj,response,data) {
alert("文件:" + response + " 上传成功");
$("#picture").attr("value",response);
$("#imgID").attr("src","${base}"+response);
},
'onError' : function(event, queueID, fileObj)
{
alert("文件:" + fileObj.name + " 上传失败");
}
});
});
</script>
显示“浏览”和“上传”的html代码
<img id="imgID" src="${base}/template/default/admin/images/no_image.gif" alt="图片预览" width=100 height="100" />
<div id="fileQueue"></div>
<tr><td height="1px">
<input id="picture" type="text" class="text-box" name="article_picture" size="35" value=""></td>
<td height="40px">
<input type="file" name="uploadify" id="uploadify" /><td>
</tr>
<p>
<a href="javascript:jQuery('#uploadify').uploadifyUpload()">开始上传</a>
<a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消所有上传</a>
</p>
后台处理上传的servlet类
import java.io.File;
import java.io.IOException;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;
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 Upload extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
// ActionContext context = ActionContext.getContext();
@SuppressWarnings("unchecked")
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
Date d = new Date();
DateFormat df = new SimpleDateFormat("yyyyMMdd");
String date = df.format(d);
String savePath = this.getServletConfig().getServletContext().getRealPath("/")+"uploads\\"+date+"\\";
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();
}
}
}
String spath ="/uploads/"+date+"/"+name+extName;
//response.getWriter().print(name + extName);
response.getWriter().write(spath);
System.out.println(spath);
//request.setAttribute(arg0, arg1)
//context.getSession().put("spath", spath);
}
}
web.xml中配置servlet
<servlet>
<servlet-name>Upload</servlet-name>
<servlet-class>biz.cms.util.Upload</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Upload</servlet-name>
<url-pattern>/biz/cms/util/Upload</url-pattern>
</servlet-mapping>
uploadify插件资源: http://download.youkuaiyun.com/detail/zhanghj07409/5131365
图片上传插件uploadify的使用
最新推荐文章于 2022-06-17 13:17:52 发布