图片上传插件uploadify的使用
来源:互联网 发布:迪奥淘宝旗舰店 编辑:程序博客网 时间:2024/06/02 07:05
引用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.csdn.net/detail/zhanghj07409/5131365