图片上传插件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


原创粉丝点击