文档章节

改进uploadify异步上传图片

JasonMs
 JasonMs
发布于 2015/08/20 17:37
字数 758
阅读 19
收藏 0

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

 

本文转载自:http://www.cnblogs.com/zhangjie9142/p/3968120.html

上一篇: Hibernate工具类
下一篇: SQLLite数据库操作
JasonMs

JasonMs

粉丝 7
博文 49
码字总数 20597
作品 1
朝阳
程序员
私信 提问
yii异步上传图片到七牛

yii异步上传图片到七牛怎么做?第一次接触,不太懂。 我现在做的是提交表单上传到七牛,但是图片多的话,速度就慢了,怎么异步上传?就像uploadify那种类似的?我想了想,能做到和uploadify...

baagee
2016/09/27
340
2
基于uploadify.js实现多文件上传和上传进度条的显示

  uploadify是JQuery的一个插件,主要实现文件的异步上传功能,可以自定义文件大小限制、文件类型、是否自动上传等属性,可以显示上传的进度条。官网地址是http://www.uploadify.com/,进入...

雲霏霏
2014/12/08
0
0
文件上传~Uploadify上传控件

对于文件上传来说,有很多种实现方式,如传统的表单方式,现在流行的flash方式,甚至还有纯JS方式,之所以有这些方式来实现文件上传,我想主要原因是因为,传统的上传对于大文件支持不够,因为它是单...

mcy247
2017/12/05
0
0
整理的JAVA相关框架

名称 作用 相关网站介绍 java Quartz 定时器 (定时执行某程序,精确到秒,可设置周期) minidai 标记: java工具框架 java websocket 即时通讯技术 Lucene 全文检索 webuploader 批量异步上传...

minidai
2015/11/30
78
0
HTML5 CSS3 经典案例:无插件拖拽上传图片 (支持预览与批量) (一)

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31498319 上传基本是项目中经常出现的,一般采用: 1、form提交 2、flash 3、html5 form提交会刷新页面,很难做到异步上...

lmj623565791
2014/06/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Hibernate 5 的模块/包(modules/artifacts)

Hibernate 的功能被拆分成一系列的模块/包(modules/artifacts),其目的是为了对依赖进行独立(模块化)。 模块名称 说明 hibernate-core 这个是 Hibernate 的主要(main (core))模块。定义...

honeymoose
今天
4
0
CSS--属性

一、溢出 当内容多,元素区域小的时候,就会产生溢出效果,默认是纵向溢出 横向溢出:在内容和容器之间再套一层容器,并且内部容器要比外部容器宽 属性:overflow/overflow-x/overflow-y 取值...

wytao1995
今天
4
0
精华帖

第一章 jQuery简介 jQuery是一个JavaScript库 jQuery具备简洁的语法和跨平台的兼容性 简化了JavaScript的操作。 在页面中引入jQuery jQuery是一个JavaScript脚本库,不需要特别的安装,只需要...

流川偑
今天
7
0
语音对话英语翻译在线翻译成中文哪个方法好用

想要进行将中文翻译成英文,或者将英文翻译成中文的操作,其实有一个非常简单的工具就能够帮助完成将语音进行翻译转换的软件。 在应用市场或者百度手机助手等各大应用渠道里面就能够找到一款...

401恶户
今天
3
0
jenkins 插件下载加速最终方案

推荐做法 1、告诉jenkins 我哪些插件需要更新 jenkins插件清华大学镜像地址 https://mirrors.tuna.tsinghua.edu.cn/jenkins/updates/update-center.json 1.进入jenkins系统管理 2.进入插件管...

vasks
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部