改进uploadify异步上传图片

最新推荐文章于 2025-08-23 20:28:56 发布

转载最新推荐文章于 2025-08-23 20:28:56 发布 · 75 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/zhangjie9142/blog/495182

文章标签：

#python #javascript #数据库 #ViewUI

本文介绍了一个基于JavaScript的图片上传插件及其前后端交互实现。通过使用uploadify组件，实现了图片的预览及上传功能，并详细展示了前端与后端代码实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

需要引入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";
        }  
    }  
    }