前端中怎么通過Bootstrap上傳文件?bootstrap File Input組件上傳文件詳解

在早些時(shí)候肯定有不少的小伙伴們喜歡在QQ空間中發(fā)布自己的照片等等，那么今天我們就來(lái)講講"前端中怎么通過Bootstrap上傳文件?"這個(gè)問題。

 Bootstrap File Input（最好用的文件上傳組件）來(lái)進(jìn)行圖片的展示、上傳，以及如何在服務(wù)器端進(jìn)行文件保存。

一、先來(lái)看效果圖吧

二、引入插件的樣式和腳本

<link type="text/css" rel="stylesheet" href="${ctx}/components/fileinput/css/fileinput.css" />
<script type="text/javascript" src="${ctx}/components/fileinput/js/fileinput.js"></script>
<script type="text/javascript" src="${ctx}/components/fileinput/js/fileinput_locale_zh.js"></script>

http://plugins.krajee.com/file-input,這是其官方文檔，里面有下載地址。

三、在頁(yè)面上添加組件

<input type="file" name="image" class="projectfile" value="${deal.image}"/>

type=file和class=projectfile，指明其為input file類型。name指定其在后臺(tái)的獲取key。value指定其在展示的時(shí)候圖片路徑。

四、初始化

projectfileoptions : {
		showUpload : false,
		showRemove : false,
		language : 'zh',
		allowedPreviewTypes : [ 'image' ],
		allowedFileExtensions : [ 'jpg', 'png', 'gif' ],
		maxFileSize : 2000,
	},
// 文件上傳框
$('input[class=projectfile]').each(function() {
	var imageurl = $(this).attr("value");

	if (imageurl) {
		var op = $.extend({
			initialPreview : [ // 預(yù)覽圖片的設(shè)置
			"<img src='" + imageurl + "' class='file-preview-image'>", ]
		}, projectfileoptions);

		$(this).fileinput(op);
	} else {
		$(this).fileinput(projectfileoptions);
	}
});

通過jquery獲取對(duì)應(yīng)的input file，然后執(zhí)行fileinput方法。showUpload 設(shè)置是否有上傳按鈕。language指定漢化
4. allowedFileTypes 、allowedFileExtensions 不知道為什么沒有起到效果？maxFileSize 指定上傳文件大小 五、帶file文件的form表單通過ajax提交

我們先來(lái)看帶file的form表單布局。

<form class="form-horizontal required-validate" action="${ctx}/save?callbackType=confirmTimeoutForward" enctype="multipart/form-data" method="post" οnsubmit="return iframeCallback(this, pageAjaxDone)">

	<div class="form-group">
		<label for="" class="col-md-1 control-label">項(xiàng)目封面</label>
		<div class="col-md-10 tl th">
			<input type="file" name="image" class="projectfile" value="${deal.image}" />
			<p class="help-block">支持jpg、jpeg、png、gif格式，大小不超過2.0M</p>
		</div>
	</div>	
	<div class="form-group text-center ">
		<div class="col-md-10 col-md-offset-1">
			<button type="submit" class="btn btn-primary btn-lg">保存</button>
		</div>
	</div>
</form>		

enctype="multipart/form-data"必不可少。οnsubmit="return iframeCallback(this, pageAjaxDone)"方法，通過ajax提交表單（iframeCallback），并且上傳成功后調(diào)用回調(diào)函數(shù)（pageAjaxDone）進(jìn)行下一步操作。

關(guān)于iframeCallback的介紹，請(qǐng)參照summernote所在form表單的數(shù)據(jù)提交，這里就不多做介紹了。

然后我們來(lái)介紹一下回調(diào)函數(shù)pageAjaxDone。

function pageAjaxDone(json) {
	YUNM.debug(json);
	YUNM.ajaxDone(json);

	if (json[YUNM.keys.statusCode] == YUNM.statusCode.ok) {
		var msg = json[YUNM.keys.message];
		// 彈出消息提示
		YUNM.debug(msg);

		if (YUNM.callbackType.confirmTimeoutForward == json.callbackType) {
			$.showSuccessTimeout(msg, function() {
				window.location = json.forwardUrl;
			});
		}
	}
}

其主要的功能就是通過ajaxDone方法處理服務(wù)端傳遞過來(lái)的錯(cuò)誤消息，假如說服務(wù)端操作成功，那么會(huì)顯示提示信息，進(jìn)而跳轉(zhuǎn)到對(duì)應(yīng)的url。

六、服務(wù)器端保存圖片

請(qǐng)參照后端springMVC文件保存

ps：以上博客留了一個(gè)小疑問，一直沒有去研究，直到有位非常棒的小伙伴 ihchenchen 給了我如下的提醒：

allowedFileTypes 、allowedFileExtensions 我知道為什么沒有效果，因?yàn)?fileinput() 方法調(diào)用了兩次，一次在 fileinput.js 里面最后幾行，還有一次就是你自己寫的 $(this).fileinput()。在fileinput.js里的是沒有設(shè)置allowedFileTypes 、allowedFileExtensions 值的。

有兩種方法可以改：
1、把fileinput.js里的最后幾行調(diào)用注釋掉。
2、全部使用“data-”的方法來(lái)做，不寫$(this).fileinput()。

對(duì)于ihchenchen善意的提醒，我非常的感謝，雖然他提供的解釋并沒有解決我的疑問，但是我很喜歡這樣有互動(dòng)的技術(shù)交流，之前寫很多博客，基本上很少發(fā)生這樣善意并且行之有效的回答。這讓我想起中國(guó)程序員和外國(guó)程序員，里面的故事讓人震撼之余，捎帶著些許的慚愧。那么如何做到“Ask questions, get answers, no distractions。”就顯得特別珍貴，而“ihchenchen”則充滿這種精神！

六、解惑allowedFileTypes 、allowedFileExtensions

之前困惑為什么bootstrap fileinput為什么設(shè)置了這兩個(gè)屬性后，沒有效果，其實(shí)是我自己的誤解，如今經(jīng)過一番痛徹的領(lǐng)悟后恍然大悟！

①、allowedFileTypes

allowedFileTypes
array the list of allowed file types for upload. This by default is set to null which means the plugin supports all file types for upload. If an invalid file type is found, then a validation error message as set in msgInvalidFileType will be raised. The following types as set in fileTypeSettings are available for setup.

[‘image’, ‘html’, ‘text’, ‘video’, ‘a(chǎn)udio’, ‘flash’, ‘object’]

先從“allowedFileTypes”說起，該屬性告知我們文件的選擇類型，那么我們很容易想到這樣的畫面：
 

也就是說，我們希望此時(shí)的“所有文件”處不是“所有文件”，而是“image”之類的。顯然這樣的邏輯并沒有錯(cuò)，但卻不適合bootstrap fileinput！

那么，這個(gè)時(shí)候我就很容易認(rèn)為“allowedFileTypes” 沒有起到作用！

但請(qǐng)看下圖：

吼吼，原來(lái)是在你選擇了文件后發(fā)生的類型檢查！

②、allowedFileTypes工作原理

$(this).fileinput({
				showUpload : false,
				showRemove : false,
				language : 'zh',
				allowedPreviewTypes: ['image'],
		        allowedFileTypes: ['image'],
		        allowedFileExtensions:  ['jpg', 'png'],
				maxFileSize : 2000,
				
			});

通過fileinput方法我們加載一個(gè)bootstrap fileinput組件，那么其內(nèi)部是如何實(shí)現(xiàn)allowedFileTypes的呢？

通過在fileinput.js文件中搜索“allowedFileTypes”關(guān)鍵字，我們得到如下代碼：

var node = ctr + i, previewId = previewInitId + "-" + node, isText, file = files[i],
                    caption = self.slug(file.name), fileSize = (file.size || 0) / 1000, checkFile, fileExtExpr = '',
                    previewData = objUrl.createObjectURL(file), fileCount = 0, j, msg, typ, chk,
                    fileTypes = self.allowedFileTypes, strTypes = isEmpty(fileTypes) ? '' : fileTypes.join(', '),
                    fileExt = self.allowedFileExtensions, strExt = isEmpty(fileExt) ? '' : fileExt.join(', ');

然后我們繼續(xù)看到如下的代碼：

if (!isEmpty(fileTypes) && isArray(fileTypes)) {
                    for (j = 0; j < fileTypes.length; j += 1) {
                        typ = fileTypes[j];
                        checkFile = settings[typ];
                        chk = (checkFile !== undefined && checkFile(file.type, caption));
                        fileCount += isEmpty(chk) ? 0 : chk.length;
                    }
                    if (fileCount === 0) {
                        msg = self.msgInvalidFileType.replace('{name}', caption).replace('{types}', strTypes);
                        self.isError = throwError(msg, file, previewId, i);
                        return;
                    }
                }

我們可以發(fā)現(xiàn)，文件類型的檢查是發(fā)生在checkFile方法上，那么checkFile方法到底做了些什么呢？

defaultFileTypeSettings = {
        image: function (vType, vName) {
            return (vType !== undefined) ? vType.match('image.*') : vName.match(/.(png|jpe?g)$/i);
        },
        ...

以上就是checkFile的內(nèi)容。

也就是說當(dāng)我們指定allowedFileTypes: ['image'],時(shí)，就會(huì)進(jìn)行image的類型檢查。顯然我們選擇的txt文件不屬于image類型，那么就會(huì)匹配不上，出現(xiàn)以上界面。同時(shí)，該方法告訴我們，當(dāng)不指定allowedFileTypes: ['image'],，只指定allowedFileExtensions: ['jpg', 'png'],就會(huì)執(zhí)行vName.match(/.(png|jpe?g)$/i)，也就是文件后綴類型的檢查，這點(diǎn)很關(guān)鍵啊，為我們接下來(lái)介紹“allowedFileExtensions”奠定基礎(chǔ)。 ③、allowedFileExtensions什么時(shí)候起作用

上節(jié)我們討論完“allowedFileTypes”，捎帶說了“allowedFileExtensions”，那么如何讓后綴進(jìn)行check呢？

	$(this).fileinput({
				showUpload : false,
				showRemove : false,
				language : 'zh',
				allowedPreviewTypes: ['image'],
		        allowedFileExtensions:  ['jpg', 'png'],
				maxFileSize : 2000,
				
			});

fileinput組件此時(shí)指定的屬性如上，沒有了“allowedFileTypes”，并且指定允許的后綴類型為“[‘jpg’, ‘png’]”，也就是說，假如我們選擇了gif的圖片就會(huì)出現(xiàn)錯(cuò)誤提示。

錯(cuò)誤預(yù)期的發(fā)生了，那么請(qǐng)?zhí)貏e注意：

image: function (vType, vName) {
            return (vType !== undefined) ? vType.match('image.*') : vName.match(/.(png|jpe?g)$/i);
        },

fileinput.js文件中原始的代碼如下：

image: function (vType, vName) {
            return (vType !== undefined) ? vType.match('image.*') : vName.match(/.(gif|png|jpe?g)$/i);
        },

image類型的后綴當(dāng)然默認(rèn)包含了gif，我只是為了舉例說明，代碼做了調(diào)整，請(qǐng)注意！

那么到這邊我們關(guān)于：“前端中怎么通過Bootstrap上傳文件?”這個(gè)問題的內(nèi)容分享就到這邊了，更多與Bootstrap File Input相關(guān)的內(nèi)容都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解！