资讯专栏INFORMATION COLUMN

SSH表单上传图片实例

msup / 1506人阅读

摘要:框架的一个上传到服务器然后显示在页面上的小实例,用的是简单的表单形式,数据包括图片的地址保存在数据库中,图片上传到服务器下的项目文件夹里,然后页面展示图片算是好好把上传功能给过了一遍了,当然还有什么上传,分片上传等等这里就不提了,适用于初学

SSH框架的一个上传到服务器然后显示在页面上的小实例,用的是简单的form表单形式,数据包括图片的url地址保存在数据库中,图片上传到tomcat服务器下的项目文件夹里,然后页面展示图片, 算是好好把上传功能给过了一遍了,当然还有什么H5上传,分片上传等等这里就不提了,适用于初学上传文件的例子。

使用Bootstrap fileinput.js上传控件,
GitHub源码下载:https://github.com/kartik-v/b...

页面上需要引入的CSS和JS


效果还是不错的


页面代码(参考)

    




返回图集

uploadAction(MyEclipse的web-info下创建uploadFile文件夹)
这里没有用smartupload或者是别的上传jar包

package com.Action;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.List;

import org.apache.struts2.ServletActionContext;

import Enity.cms_images;
import Enity.cms_state;
import SQL_Implements.images_sql_Implem;

import com.opensymphony.xwork2.ActionSupport;

@SuppressWarnings("serial")
public class uploadAction extends ActionSupport {
    /**
     * 这里集合形式输入到流,防止上传重复文件,减少服务器压力
     */
    private String img_title;// 图片标题
    private int img_state;// 状态
    // 上传文件存放路径
    private final static String uploadAddres = "/uploadFile";

    // 上传文件集合泛型为file对象
    private List file;
    // 上传文件名集合
    private List fileFileName;
    // 上传文件内容类型集合
    private List fileContentType;

    cms_images images = new cms_images();
    cms_state state = new cms_state();// 实例状态类
    private images_sql_Implem isi;
    cms_imagesAction cia;

    public cms_imagesAction getCia() {
        return cia;
    }

    public void setCia(cms_imagesAction cia) {
        this.cia = cia;
    }

    public int getImg_state() {
        return img_state;
    }

    public void setImg_state(int img_state) {
        this.img_state = img_state;
    }

    public cms_state getState() {
        return state;
    }

    public void setState(cms_state state) {
        this.state = state;
    }

    public images_sql_Implem getIsi() {
        return isi;
    }

    public void setIsi(images_sql_Implem isi) {
        this.isi = isi;
    }

    public static String getUploadaddres() {
        return uploadAddres;
    }

    public cms_images getImages() {
        return images;
    }

    public void setImages(cms_images images) {
        this.images = images;
    }

    public String getImg_title() {
        return img_title;
    }

    public void setImg_title(String img_title) {
        this.img_title = img_title;
    }

    public List getFile() {
        return file;
    }

    public void setFile(List file) {
        this.file = file;
    }

    public List getFileFileName() {
        return fileFileName;
    }

    public void setFileFileName(List fileFileName) {
        this.fileFileName = fileFileName;
    }

    public List getFileContentType() {
        return fileContentType;
    }

    public void setFileContentType(List fileContentType) {
        this.fileContentType = fileContentType;
    }

    // 上传方法
    public String execute() throws Exception {
        // 打印文件名称
        System.out.println("文件名称:" + this.getFileFileName());
        for (int i = 0; i < file.size(); i++) {
            // 循环上传每个文件
            uploadFile(i);
        }
        /**
         * 这里有bug 想每次添加完后能在查询一遍下拉框的值
         */
        // cia.execute();
        return "uploadSuccess";
    }

    // 调用执行上传功能
    @SuppressWarnings("deprecation")
    public void uploadFile(int i) throws FileNotFoundException, IOException {
        try {
            InputStream in = new FileInputStream(file.get(i));
            // ServletActionContext对象响应获取实际文件地址,getRealPath已经废弃不推荐用了
            String dir = ServletActionContext.getRequest().getRealPath(
                    uploadAddres);
            System.out.println("服务器路径:" + dir);
            // 获取文件名称
            String fileName = this.getFileFileName().get(i);
            // 路径和文件名丢进file对象里
            File uploadFile = new File(dir, fileName);
            // 输出流
            OutputStream out = new FileOutputStream(uploadFile);
            // 设置文件大小1MB
            byte[] buffer = new byte[1024 * 1024];
            int length;
            // 用循环从流中读取文件的大小
            while ((length = in.read(buffer)) > 0) {
                out.write(buffer, 0, length);
            }

            // 设置图片标题和全路径
            images.setImg_title(img_title);
            String imgURL = dir + "/" + fileName;
            // 将全路径截取为相对路径
            String strURL = imgURL.substring(32);
            images.setImg_url(strURL);

            // 设置状态的id,并将id对象传入
            state.setS_id(img_state);
            images.setImg_state(state);
            // 添加图片的信息
            int num = isi.addIMG(images);
            System.out.println("是否上传了信息:" + num);
            // 关闭输入流输出流,释放内存
            in.close();
            out.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

演示效果图

图片上传到了tomcat下的项目指定的文件夹里了

页面展示(这个部分就各有各有写法了)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/70379.html

相关文章

  • 图片上传知识点梳理

    摘要:在日常项目开发中,图片上传是一个十分常见的场景。在图片拖拽上传这个业务场景中,被拖拽元素为页面外部的图片文件,故此处仅用到目标元素的各个事件。具体实现代码如下至此,图片上传的常用知识点以梳理完毕,欢迎补充。 在日常项目开发中,图片上传是一个十分常见的场景。而现在的各种UI框架都提供了自己的上传组件,网上第三方的上传组件也多如牛毛。可能你早已习惯了直接使用这些现成的组件,然而对于其具体的...

    Pink 评论0 收藏0
  • 图片上传知识点梳理

    摘要:在日常项目开发中,图片上传是一个十分常见的场景。在图片拖拽上传这个业务场景中,被拖拽元素为页面外部的图片文件,故此处仅用到目标元素的各个事件。具体实现代码如下至此,图片上传的常用知识点以梳理完毕,欢迎补充。 在日常项目开发中,图片上传是一个十分常见的场景。而现在的各种UI框架都提供了自己的上传组件,网上第三方的上传组件也多如牛毛。可能你早已习惯了直接使用这些现成的组件,然而对于其具体的...

    Astrian 评论0 收藏0
  • 一步一步搭建一个图片上传网站(后台服务器用nodejs)

    摘要:把文件上传路径指定到然后用当前日期和文件名命名上传过来的文件。后端利用建立服务器,利用中间件指定文件路径。利用这个前端和后端技术,我们基本上就可以做出一个图片上传存储的基本网站核心。 前几天看了腾讯云社区的一个文件上传的文章文件上传那些事儿,大体上讲了以下h5中图片上传的几个核心原理,但是没有后端接受的服务器代码,没法做测试。也没有具体的一个实例都是一些基本的原理片段,并且ui界面也不...

    Darkgel 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<