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

ALIM-MASTIK

已于 2023-10-16 19:48:07 修改

阅读量58

点赞数

文章标签：前端数据库

于 2023-10-16 13:07:15 首次发布

本文链接：https://blog.csdn.net/qq_61865289/article/details/133856057

版权

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>