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

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

Zhac

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

阅读量523

点赞数

分类专栏： 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&