改进uploadify异步上传图片

需要引入js和样式表

文件链接http://pan.baidu.com/s/1o67HSnw

imgUpload.js

/**

 * 图片上传处理插件

 */

//参数1--上传控件ID 2--显示预览图片区域ID 3--绑定返回图片的地址到文本框的ID（图片路径间隔为#）

var chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];



function uploadImg(btn_up,imgDiv,imgValue){

    $('#'+btn_up).uploadify({  

        'swf'      : 'js/uploadify.swf',  

        'uploader' : 'fileUpload',

        'cancelImg' :'img/uploadify-cancel.png',

        'buttonText':'上传',

        'fileObjName' : 'file',  

        'fileSizeLimit' : '0',  

     'onUploadSuccess' : function(file,data,response) {

       if(data=="error"||data.indexOf("html") > 0){

        alert("上传错误");

       }else{

           var id=getRandom(10);

        $("#"+imgDiv).append("<div id='div_"+id+"' style='width:150px;height:150px;margin:10px;float:left;'><img  style='width:150px;height:120px;'  src='"+data+"' /><div style='text-align:center;'><input id='"+id+"' class='btn_del' type='button' value='删除' onclick='delImg(this.id,"+imgValue+")' /></div></div>");

        $("#"+imgValue).attr("value",$("#"+imgValue).val()+data+"#");

       } 

      }

            });

     //获取随机数

     function getRandom(n){

         var res = "";

         for(var i = 0; i < n ; i ++) {

             var id = Math.ceil(Math.random()*35);

             res += chars[id];

         }

         return res;

     }

     

     

    

}

//删除图片

function delImg(id,imgValue){

    var id2="#div_"+id;

    var src=$(id2+" img").attr("src");

    $("div").remove(id2);

    var data=$(imgValue).val();

    data=data.replace(src+"#","");

    $(imgValue).val(data);

    

}

调用函数

<script type="text/javascript">

$(function(){

  //位置图上传图

    uploadImg("projectfile_rf_locImg","pic_loction","rf_locImg");

      //现场图上传图片

      uploadImg("projectfile_rf_sceneImg","pic_sceneImg","rf_sceneImg");

});

</script>

html代码

<td colspan="6" id="pic_sceneImg">

    <input type="hidden" id="rf_sceneImg" class="edit" name="rws.rw_pic" />

    <form >

    <input type="file" id="projectfile_rf_sceneImg" />

    </form>

    

    </td>

实现思路：现将文件异步上传到服务器，返回保存的文件名称，将名称赋值到前台隐藏的input控件中 最后提交的文本信息上传到数据库

以上为前台代码，后台代码如下

fieUploadAction.java

package com.dz.zwnj.action;



import java.io.File;

import java.io.IOException;



import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;



import org.apache.struts2.ServletActionContext;



import com.dz.zwnj.common.fileUpload;

import com.opensymphony.xwork2.ActionSupport;



public class fileUploadAction extends ActionSupport {



    public void up() throws IOException{

        fileUpload fileUpload=new fileUpload(file, fileFileName, "/pictures");

        String res=fileUpload.execute();

        response.getWriter().print(res);

    }

    private HttpServletResponse response=ServletActionContext.getResponse();

    private HttpServletRequest request=ServletActionContext.getRequest();

    

    

    private File file;

    private String fileFileName ;

    private String fileContentType ; 



    public String getFileFileName() {

        return fileFileName;

    }





    public void setFileFileName(String fileFileName) {

        this.fileFileName = fileFileName;

    }





    public String getFileContentType() {

        return fileContentType;

    }





    public void setFileContentType(String fileContentType) {

        this.fileContentType = fileContentType;

    }





    public File getFile() {

        return file;

    }





    public void setFile(File file) {

        this.file = file;

    }



    

}

fileUpload.java

package com.dz.zwnj.common;



import java.io.File;

import java.io.FileInputStream;

import java.io.FileOutputStream;

import java.io.IOException;

import java.io.InputStream;

import java.io.OutputStream;



import org.apache.commons.io.FileUtils;

import org.apache.struts2.ServletActionContext;



/**

 * 文件上传服务程序

 * 保存正常返回文件保存路径 错误返回error

 * @author zhangjie

 *

 */

public class fileUpload {

    private File file;

    private String fileName;

    private String[] fileType;

    private int fileSize;

    private String savePath;

    public fileUpload(File file,String filename,String[] filetype,int filesize,String savapath) {

        this.file=file;

        this.fileName=filename;

        this.fileType=filetype;

        this.fileSize=filesize;

        this.savePath=savapath;

    }

    public fileUpload(File file,String filename,String[] filetype,String savapath) {

        this.file=file;

        this.fileName=filename;

        this.fileType=filetype;

        this.fileSize=4194304;

        this.savePath=savapath;

    }

    public fileUpload(File file,String filename,String savapath) {

        String[] str = { ".jpg", ".jpeg", ".bmp", ".gif",".png" }; 

        this.file=file;

        this.fileName=filename;

        this.fileType=str;

        this.fileSize=4194304;

        this.savePath=savapath;

    }

    public String execute(){

        //String[] str = { ".jpg", ".jpeg", ".bmp", ".gif" };  

        //限定文件大小是4MB  

        if(file==null || file.length()>fileSize ){  

            return "error";  

        }  

        boolean flag=false;

        for (String s : fileType) {

            if (fileName.endsWith(s)) {  

                flag=true;

                String realPath = ServletActionContext.getServletContext().getRealPath(savePath);//实际路径  

               // System.out.println(realPath);

                File saveFile = new File(new File(realPath),fileName);  //在该实际路径下实例化一个文件  

                //判断父目录是否存在  

                if(!saveFile.getParentFile().exists()){  

                    saveFile.getParentFile().mkdirs();  

                }  

                try {  

                    //执行文件上传  

                    //输出流  

                    OutputStream os = new FileOutputStream(new File(realPath,fileName));  

                    //输入流  

                    InputStream is = new FileInputStream(file);  

                      

                    byte[] buf = new byte[1024];  

                    int length = 0 ;  

                      

                    while(-1 != (length = is.read(buf) ) )  

                    {  

                        os.write(buf, 0, length) ;  

                    }  

                    is.close();  

                    os.close();    

                      

                } catch (IOException e) {  

                    flag=false;

                } 

                

            }  

        }  

        if(flag)

            return savePath.substring(1,savePath.length())+"/"+fileName;

        else {

            return "error";

        }  

    }  

    }