圖片上傳插件uploadify的使用

        引用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


發佈了30 篇原創文章 · 獲贊 6 · 訪問量 6萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章