最近在開發一個可以上傳圖片到伺服器的web表面頁面,下面給大家分享需求和實現思路還有ajax源碼,對ajax感興趣的的朋友參考下Ajax配合Spring實現文件上傳功能哦!
由於專案需要,開發一個可以上傳圖片到伺服器的網頁表單頁面。
一、 需求
Web表單頁面,可以透過表單上傳圖片以及其他文字資訊。
二、 圖片上傳的流程
之前沒有做過這類頁面,透過查詢資料。發現比較常見的做法,是先將圖片上傳到伺服器端的某個文件目錄下,伺服器向前台返回圖片的存儲路徑;之後,前台將圖片存儲路徑以及其他表單信息一起提交到服務器,所有的表單信息存儲在資料庫中。
三、 方法
由於專案需要,我在這裡介紹兩種圖片上傳方法,第一種是使用ajax對一個圖片直接上傳;第二種是先在前台將圖片切割為較小的文件,之後使用ajax分別上傳圖片到伺服器,伺服器實現對文件的拼接。 (方法二適合較大文件的上傳)下面我分別對兩種方法做介紹。
方法一:直接上傳
#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="重置表单" />