최근에는 서버에 사진을 업로드할 수 있는 웹 페이지를 개발 중입니다. 아래에서는 Ajax 소스 코드와 함께 요구 사항 및 구현 아이디어를 공유하겠습니다. Ajax 및 Spring을 참조하여 구현할 수 있습니다. 파일 업로드기능!
프로젝트 필요에 따라 서버에 이미지를 업로드할 수 있는 웹 양식 페이지를 개발하세요.
1. 요구 사항
웹 양식 페이지에서는 양식을 통해 사진 및 기타 텍스트 정보를 업로드할 수 있습니다.
2. 사진 업로드 과정
이런 페이지는 한번도 해본적이 없어서 정보를 문의하게 되네요. 일반적인 관행은 먼저 이미지를 서버측 파일 디렉터리에 업로드하고 서버가 이미지의 저장 경로를 프런트 데스크에 반환한 다음 프런트 데스크에서 이미지 저장 경로 및 기타 양식을 제출하는 것으로 나타났습니다. 정보는 서버로 전송되며 모든 양식 정보는 데이터베이스에 저장됩니다.
3. 방법
여기에서는 이미지를 업로드하는 두 가지 방법을 소개합니다. 첫 번째는 이미지를 직접 업로드하는 것입니다. 먼저 프론트 데스크에 파일을 업로드한 다음 ajax를 사용하여 이미지를 각각 서버에 업로드하면 서버가 파일 연결을 실현합니다. (대용량 파일을 업로드할 때는 방법 2가 적합합니다.) 아래에서는 두 가지 방법을 각각 소개하겠습니다.
방법 1:
1 html 페이지
<pre name="code" class="html"><!DOCTYPE html> <head></head> <body> <form id="uploadForm" action="/PicSubmit/form" method="post" enctype="multipart/form-data" onsubmit="return submit_check()" class="bootstrap-frm" >
<input id = "sid" type = "text" name="name" />
<pre name="code" class="html"><input id = "fileImage" type = "file" name="filename" />
<input id = "addressid" type = "hidden" name="address" />
<input id="ajaxsub" type="button" class="button" value="上传图片" onclick="fileUpload()<span style="font-family: Arial, Helvetica, sans-serif;">" /> </span>
<input type="submit" class="button" value="提交表单" /> <input type="reset" class="button" value="重置表单" />