使用前後端分離的形式,乙個前端頁面檔案,乙個php檔案,用於接收檔案,乙個目錄用於存放檔案。
先放**,如下:
>
>
charset
="utf-8"
>
>
上傳title
>
>
//實現預覽功能
function
preview()
//大小的限制
var filesize = math.
round
(file.size /
1024
/1024);
if(filesize >=2)
//獲取img物件
var img = document.
getelementbyid
("image");
//建一條檔案流來讀取
var reader =
newfilereader()
;//根據url將檔案新增的流中
reader.
readasdataurl
(file)
;//實現onload介面
reader.
onload
=function
(e);
}//實現取消上傳功能
function
call()
function
upload()
else};
// 獲取上傳進度
xhr.upload.
onprogress
=function
(event)};
xhr.
send
(formdata);}
script
>
head
>
>
"fileload"
type
="file"
onchange
="preview();"
/>
"upload_btn"
type
="button"
value
="upload"
onclick
="upload();"
/>
type
="button"
value
="取消"
onclick
="call();"
/>
"j_upload_progress"
value
="0"
max="100"
>
progress
>
>
預覽h2
>
style
="width
: 400px;
height
: 400px;
border
: 1px solid #303030;
">
"image"
width
="100%"
height
="100%"
src="
" />
div>
body
>
html
>
頁面設計比較簡單,以實現功能為主要目的。效果如下圖:
其中file_type是從網路查詢的乙個判斷檔案型別的演算法,因為使用$_files變數中的檔案型別做判斷並不是十分準確,客戶端可以造假,file_type這個函式也不是很準備,但對於一般的應用足夠了。move_uploaded_file用於把檔案從臨時目錄移動我們的上傳目錄
[2]:
1 檔案上傳
當上傳乙個檔案時,會先將其作為臨時目錄傳到伺服器,如果不將其啟動到其它目錄,就會刪除。php上傳後端 upload.php uname post uname echo uname.1.首先判斷是否出錯 if files userfile error 0 2.判斷上傳型別是否符合規定 echo fil...
springboot系列16 檔案上傳
檔案上傳用到的場景也比較多,如頭像的修改 相簿應用 附件的管理等等,今天就來學習下在springboot框架下應用檔案上傳技術。org.springframework.boot spring boot starter web org.springframework.boot spring boot ...
SpringBoot (二) 檔案上傳
新建乙個springboot專案 springboot uploadfile 工程目錄 pom.xml依賴 org.springframework.boot spring boot starter web org.springframework.boot spring boot starter th...