天天看點

input标簽multiple屬性用法簡介

今天一個朋友問我,是否可以一次上傳多個檔案,想了下,之前做過呀,使用多個input空間,type設定為file呀

如果使用一個input控件呢,是否可以,咨詢了下前端同僚,發現确實可以,使用multiple屬性。

多檔案上傳

基于之前的多檔案上傳看,頁面改造非常簡單,将之前的多個input控件,删除的隻剩一個,在input控件内增加multiple屬性即可。

<div class="input-group col-md-4">
		<span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
		<input class="form-control" placeholder="請選擇檔案" type="file" name="files" multiple="multiple" />
	</div>
           

看效果,頁面上似乎沒有太大差別

input标簽multiple屬性用法簡介

點選選擇檔案後,在選中一個檔案後,可以按住Ctrl 鍵再選擇其他的檔案,個數的上限暫時沒有特意測試

input标簽multiple屬性用法簡介

選擇好後,點選打開,可以看到,頁面上會顯示本次選中了幾個檔案

input标簽multiple屬性用法簡介

然後點選檔案上傳,便與之前的操作相同了,這裡不再贅述。

這裡的多檔案上傳,與多個input控件上傳方式類似,不同的是,多個input控件單次上傳的附件資料取決于input控件的個數,而使用multiple屬性,則不限制單次上傳檔案個數。對于檔案類型,多控件方式和multiple方式相同,單次均可以上傳不同類型的檔案。

select多選

form表單中,有個select标簽,是個下拉單選效果,是否可以做出下拉複選效果呢,可以,使用multiple屬性。

<select name="car" id="car" multiple="multiple">
	  <option value ="volvo">Volvo</option>
	  <option value ="saab">Saab</option>
	  <option value="opel">Opel</option>
	  <option value="audi">Audi</option>
	  <option value="iveco">IVECO</option>
	  <option value="benz">Benz</option>
	</select> 
           

檢視下頁面效果

input标簽multiple屬性用法簡介

選擇時,先選中一個元素,按住Ctrl鍵,便可以選擇其他元素

input标簽multiple屬性用法簡介

送出到背景後,背景需要使用request.getParameterValues("car") 方法來擷取前台選中值

運作程式後,可以從背景看到背景擷取到前端傳值 [opel, iveco]

這裡給select增加multiple屬性同CheckBox效果類似,背景的擷取資料方式相同,唯一差別就是頁面展現樣式。

以上,今天學習到的一個知識點,記錄下來,如果有不嚴謹地方,歡迎批評指正。謝謝。

繼續閱讀