原生js實現簡單的單檔案上傳操作

效果

核心思想

將原生的 隱藏起來，具體來說就是隱藏在【瀏覽按鈕下方】

點選瀏覽按鈕時其實點選的是下方的  ；

將獲取到的檔名顯示在 的顯示欄中

使用formdata物件獲取檔案資料；

通過設定ajax的引數，實現資料資料的上傳

html**（具體的業務**可以忽略）

<

div 
id="schedulefileuploaddiv"
>
<
div 
id="schedulefilechoosediv"
>
<
input 
id="schedulefilenameinput"
placeholder
="請選擇排班檔案"
type
="text"
/>
<
form 
action
="\'+that.schedulefileuploadurl+\'"
id="schedulefileuploadform"
enctype
="multipart/form-data"
style
="display: inline-block; "
>
<
input 
class
="schedulechoosefileinput"
id="schedulefile"
type
="file"
name
="file"
/>
瀏覽 
div>
<
div 
class
="schedulefileimportdialogfooterdiv"
>
<
button 
id="schedulefileuploadbtn"
onclick
="scheduleimport.upload()"
>上傳
button
>
<
label 
id="scheduleimporterrormsglabel"
style
="color: red"
>
label
>
div>
div>

重點**加了背景色

#schedulefileuploaddiv#schedulefilechoosediv.schedulefileimportdialogfooterdiv .schedulechoosefileinput#schedulefileuploadform#schedulefilenameinput#schedulefileuploadbtn

設定檔名顯示**，最好通過setinterval迴圈設定

refreshuploadfilename:function

() }

upload:function

()else
},error:
function
(), datatype: "json",
async: 
true
});}

vue 原生js的檔案上傳流程

el android con a width 180px line height 48px height 48px background color 2ba245 color ffffff border none webkit box sizing border box box sizing bor...

原生JS實現簡單的拖放

最近學到了js中的事件，感覺和windows的事件佇列和處理函式很相似哈。需要監聽事件然後要有處理事件的函式。然後做了乙個小練習，元素的拖放。廢話不說了，上效果。實現子元素任意框拖放。首先在布局上，三個大盒子中的元素都是絕對定位於他們的父元素，給三個大盒子相對定位。上html和css cnt 1sp...

原生js實現簡單的模態框

html部分 顯示大圖 js部分 var btn document.getelementbyid showmax var mtclose document.getelementsbyclassname mtclose 0 var modalbox document.getelementbyid mo...