JQ處理檔案上傳的相關資料

2021-08-09 12:46:02 字數 1033 閱讀 6942

實現檔案上傳-----前端要完成的內容:

第一步:樣式

一般瀏覽器自帶的檔案上傳樣式根本算不上什麼美觀,往往前端要對其進行處理成客戶理想中的樣式,其處理的思路是在其父元素上設定乙個position:relative;在將其中的

這設定position:absolut;並將透明度設定為0,然後再另外寫乙個按鈕和文字框去設定你理想中的樣式,簡單點就是將button蓋在file的上面:

class=

"file_box">

type=

"file"

name=

"" class=

"file">

class=

"file_btn">上傳電子檔

button>

"span"

>支援ppt、word、excel格式

span>

div>

完成相關的基本的樣式以後,還要用jq處理一下,就是你下面的span要顯示檔案上傳的路徑,這裡使用的父元素的**事件。

//檔案上傳位置的span顯示上傳的檔名

$(".

file_box

").on('change'

,function ()

});

第二步:ajax注意的事項

1,後台要用的介面名和檔案上的name的取值一樣的;

2,前台獲取檔案上傳的資料的寫法:$("").file[0];

4,判斷檔案上傳的值是否為空,應該判斷為undefinded。

5,有時候在處理檔案上傳的時候需要,清除檔案上傳中的值,如下:

//pdf上傳檔案清空

var

file

= $("#file_path");

file.after(file.clone().val(""));

file.remove();

//當然還要清理一下span 的顯示問題

$(".

span

").html("支援ppt、word、excel格式");

jq實現前端檔案上傳

formdata formdata是xmlhttprequest level 2 新增的乙個介面。使用formdata可以實現各種檔案上傳。使用 建立formdata的例項 var formdata new formdata 注意 使用jq的 ajax 方法來進行檔案上傳時,需要設定contentt...

檔案上傳相關

是xmlhttprequest 的介面,用於上傳檔案,二進位制檔案 file 可以是通過 input 載入的檔案 let form newformdata form.file file key value axios 1.input 上傳 file id file onchange handlefi...

表單上傳檔案相關

在上提交表單之前對上傳檔案進行校驗 button add click function 對上傳檔案的格式進行校驗 var filetype file.value.substr file.value.lastindexof 1 if doc filetype pdf filetype else ret...