jqGrid结合ajaxFileUpload插件进行图片上传

最新推荐文章于 2019-08-16 19:44:47 发布

Zhac

最新推荐文章于 2019-08-16 19:44:47 发布

阅读量508

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/zhaihao1996/article/details/99639786

版权

本文介绍如何在jqGrid表格中显示图片，并利用ajaxFileUpload插件实现用户本地图片上传到服务器的步骤。首先，通过jqGrid将信息存入数据库，接着使用ajaxFileUpload进行文件上传，最后更新数据库中文件的相对路径。

摘要由CSDN通过智能技术生成

项目背景:

项目开发需要使用jqGrid生成表格并在表格中显示图片,并实现从用户本地上传图片至服务器,如下图所示

知识点

首先,需要使用jqGrid将所需要的信息写入数据库
然后,进行文件的上传,这里使用ajaxFileUpload插件进行文件上传
最后,更改数据库中所存储的文件路径为项目中的相对路径代码如下

代码实现
前台代码
注意需要导js文件,ajaxFileUpload的js和jqGrid和BootStrap的js

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@page pageEncoding="UTF-8" isELIgnored="false" contentType="text/html; utf-8" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <!--在手机网站，都需要加上视口约束！！！-->
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
    <!--以最新的内核渲染页面-->
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>Document</title>

    <!--引入样式文件-->
    <link rel="stylesheet" href="../../static/bs/css/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="../../static/jqgrid/css/trirand/ui.jqgrid-bootstrap.css"
          type="text/css">
    <!--引入js功能文件-->
    <script src="../../static/bs/js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script src="../../static/bs/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="../../static/jqgrid/js/trirand/i18n/grid.locale-cn.js" type="text/javascript"></script&

最低0.47元/天解锁文章

Zhac

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
jqGrid结合ajaxFileUpload插件进行图片上传

项目背景: 项目开发需要使用jqGrid生成表格并在表格中显示图片,并实现从用户本地上传图片至服务器,如下图所示知识点首先,需要使用jqGrid将所需要的信息写入数据库然后,进行文件的上传,这里使用ajaxFileUpload插件进行文件上传最后,更改数据库中所存储的文件路径为项目中的相对路径代码如下代码实现前台代码注意需要导js文件,ajax...
复制链接

扫一扫