#前端给后端数据库转图片

package Web;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.ibatis.session.SqlSession;
import org.example.Mapper.MessageMapper;
import org.example.MybatisUtils;
import org.example.PoJo.Message;
import org.example.PoJo.User;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;
@WebServlet("/SendPhotoMessage")
public class SendPhotoMessage extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        if (ServletFileUpload.isMultipartContent(req)){
            FileItemFactory fileItemFactory=new DiskFileItemFactory();
            ServletFileUpload servletFileUpload=new ServletFileUpload(fileItemFactory);
            try {
                List<FileItem> list=servletFileUpload.parseRequest(req);
                System.out.println(list.size());
                for (FileItem fileItem : list) {
                    if (fileItem.isFormField()){
                        System.out.println("表单项value"+fileItem.getFieldName());
                    }else {
                        SqlSession sqlSession = MybatisUtils.getSqlSession();
                        MessageMapper mapper = sqlSession.getMapper(MessageMapper.class);
                        Message message=new Message();
                        message.setSender(((User)req.getSession().getAttribute("self")).userID);
                        message.setText("");
                        message.setPhoto(fileItem.getInputStream().readAllBytes());
                        mapper.addMessage(message);
                        System.out.println("上传成功");
                    }
                }
            } catch (Exception e) {
                System.out.println(8989);
            }
        }

    }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>好友聊天</title>
  <style>
    /* 样式可根据需求自行修改 */
    body {
      height: 450px;
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
      margin: 0;
      padding: 0;
    }

    #chat-container {

      max-width: 800px;
      margin: 30px auto;
      background-color: #f5f5f5;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      height: 600px;
    }
    #chat-content {
      height: 450px;
      flex: 1;
      padding: 10px;
      overflow-y: auto;
    }

    .message-container {
      display: flex;
      justify-content: flex-start;
      margin: 10px;
    }
    .message {
      background-color: #fff;
      border-radius: 8px;
      padding: 10px;
      margin-bottom: 10px;
      max-width: 70%;
    }
    .message img {
      max-width: 100%;
      border-radius: 8px;
      margin-top: 5px;
    }
    .xiaoming-message {
      justify-content: flex-end;
    }
    .message-text {
      white-space: pre-wrap;
    }
    #message-input-container {
      padding: 10px;
      background-color: #fff;
      display: flex;
      align-items: center;
      border-top: 1px solid #ccc;
      position: sticky;
      bottom: 0;
    }
    #message-input {
      flex: 1;
      padding: 10px;
      border: none;
      border-radius: 4px;
      resize: none;
      font-size: 16px;
      background-color: #f5f5f5;
    }
    #image-input {
      display: none;
    }
    #send-button {
      padding: 10px 20px;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
      margin-right: 10px;
    }
    .send-image-button {
      padding: 10px 20px;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
    }

    /* 新增样式 */
    #message-input-container form {
      display: flex;
      flex-grow: 1;
    }
  </style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<center> <h1>留言板</h1></center>
<div id="chat-container">
  <div id="chat-content" >
<!--    <div class="message-container">-->
<!--      <div class="message xiaoming-message">-->
<!--&lt;!&ndash;        <p class="message-text">对面</p>&ndash;&gt;-->
<!--      </div>-->
<!--    </div>-->
<!--    <div class="message-container">-->
<!--      <div class="message">-->
<!--      </div>-->
    </div><!-- 添加更多消息,可用JavaScript动态生成 -->
  </div>
  <div id="message-input-container">
    <form id="myForm"  enctype="multipart/form-data">
      <input type="file" id="image-input" accept="image/*">
      <input type="button" class="send-image-button" value="发送图片" onclick="chooseImage();">
      <textarea id="message-input" placeholder="输入消息..."></textarea>
      <input type="button" id="send-button" value="发送">
    </form>
  </div>
</div>
<script>
  let username1;
  let UserAvatar1;
  let Friendname1;
  let FriendAvatar1;
  // let username='';
  $(document).ready(function(){
    $.ajax({
      type: 'POST',
      url: 'http://localhost:8080/My/GetMessages',
      data: {
      },
      dataType: "json",
      success: function (response){
        console.log(response.Messages)
      },
      error:function (response){
        console.log("请求处理失败8");
      }
    });
  });
  function uploadFormData(formData) {
    $.ajax({
      type: "POST",
      url: "http://localhost:8080/My/SendPhotoMessage",
      data: formData,
      processData: false, // 防止jQuery自动将数据转换为查询字符串
      contentType: false, // 防止jQuery设置Content-Type头部
      success: function(response) {
        // 在这里处理从服务器返回的成功响应
        console.log("表单数据成功提交:", response);
      },
      error: function(xhr, status, error) {
        // 在这里处理错误
        console.error("提交表单数据时出错:", error);
      }
    });
  }
  function chooseImage() {
    document.getElementById('image-input').click();
  }
  document.getElementById('image-input').addEventListener('change', function() {
    var fileInput = document.getElementById('image-input');
    var file = fileInput.files[0];
    if (file) {
      var formData = new FormData();
      formData.append('photo', file);
      uploadFormData(formData);
      sendImage();
    }
  });
  document.getElementById('send-button').addEventListener('click', function() {
    sendMessage();
  });
  document.getElementById('message-input').addEventListener('keypress', function(event) {
    if (event.key === 'Enter') {
      sendMessage();
    }
  });
  function sendMessage() {
    var messageInput = document.getElementById('message-input');
    var message = messageInput.value.trim();
    if (message !== '') {
      // 在这里发送消息到后端或显示到聊天界面
      $.ajax({
        type: "POST",
        url: "http://localhost:8080/My/SendTextMessage?message="+message,
        // data: message,
        // processData: true, // 防止jQuery自动将数据转换为查询字符串
        // contentType: true, // 防止jQuery设置Content-Type头部
        success: function(response) {
          // 在这里处理从服务器返回的成功响应
          console.log("表单数据成功提交:", response);
        },
        error: function(xhr, status, error) {
          // 在这里处理错误
          console.error("提交表单数据时出错:", error);
        }
      });

      displayXiaomingMessage(message);
      messageInput.value = '';
    }
  }
  function sendImage() {
    var imageInput = document.getElementById('image-input');
    var file = imageInput.files[0];
    if (file) {
      // 在这里发送图片到后端或显示到聊天界面
      var reader = new FileReader();
      reader.onload = function(e) {
        var imageSrc = e.target.result;
        displayImageMessage(imageSrc);
      };
      reader.readAsDataURL(file);
    }
  }
  function displayXiaomingMessage(content) {
    var chatContent = document.getElementById('chat-content');
    var messageContainer = document.createElement('div');
    messageContainer.classList.add('message-container', 'xiaoming-message');

    var messageDiv = document.createElement('div');
    messageDiv.classList.add('message');

    var messageContent = document.createElement('p');
    messageContent.classList.add('message-text');
    messageContent.textContent = content+':'+username1;

    messageDiv.appendChild(messageContent);
    messageContainer.appendChild(messageDiv);
    chatContent.appendChild(messageContainer);

    // 滚动到最底部
    chatContent.scrollTop = chatContent.scrollHeight;
  }
  function displayImageMessage(src) {
    var chatContent = document.getElementById('chat-content');
    var messageContainer = document.createElement('div');
    messageContainer.classList.add('message-container', 'xiaoming-message');
    var messageDiv = document.createElement('div');
    messageDiv.classList.add('message');
    var imageElement = document.createElement('img');
    imageElement.src = src;
    imageElement.style.maxWidth = '200px';// 调整图片最大宽度
    imageElement.style.maxHeight='300px';
    messageDiv.appendChild(imageElement);
    messageContainer.appendChild(messageDiv);
    chatContent.appendChild(messageContainer);
    // 滚动到最底部
    chatContent.scrollTop = chatContent.scrollHeight;
  }// 在实际应用中,可以通过WebSocket等技术来实现实时聊天功能

</script>
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
前端服务器和后端数据库的实现方式可以有多种选择,以下是一种常见的架构方案: 1. 前端服务器: 前端服务器负责接收来自客户端的请求,并处理和响应这些请求。你可以选择使用一种服务器端编程语言(如Node.js、Java、Python等)来编写前端服务器的逻辑。这些语言提供了丰富的框架和库,可以简化服务器开发过程。 在编写前端服务器时,你需要定义API接口,用于客户端和服务器之间的通信。这些接口包括用户登录、注册、角色创建、交易等功能。你可以使用HTTP或WebSocket等协议进行通信,并采用JSON或其他数据格式进行数据传输。 2. 后端数据库后端数据库用于存储游戏中的数据,包括玩家信息、角色属性、物品、地图数据等。常见的数据库选择包括MySQL、PostgreSQL、MongoDB等。你需要设计数据库模式,并使用SQL或NoSQL语言进行数据操作。 在编写后端数据库时,你可以使用ORM(对象关系映射)工具来简化数据库操作。ORM工具可以将数据库表映射为对象,提供方便的API来进行数据的增删改查操作。 此外,为了提高服务器的性能和可靠性,你可以考虑使用缓存机制(如Redis)来缓存热门数据,以减轻数据库的负载。 总结起来,前端服务器和后端数据库的编写需要根据具体需求选择合适的编程语言和数据库,并设计良好的接口和数据模型。同时,考虑服务器的性能和可靠性,可以采用一些优化措施,如使用缓存、异步处理等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ALIM-MASTIK

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值