MVC中基於Ajax與HTML5實作檔案上傳功能
- 亚连原創
- 2018-05-24 16:27:442274瀏覽
這篇文章主要介紹了MVC中基於Ajax和HTML5實現文件上傳功能的相關資料,需要的朋友可以參考下
引言
在實際程式設計中，經常遇到實作檔案上傳並顯示上傳進度的功能，基於此目的，本文就為大家介紹不使用flash 或任何上傳檔案的插件來實現具有進度顯示的檔案上傳功能。
基本功能：實現具有進度條的檔案上傳功能
#進階功能：透過拖曳檔案的操作實現多個檔案上傳功能
##背景
HTML5提供了一種標準的存取本機檔案的方法—File API規格說明，透過呼叫File API 能夠存取檔案信息，也可以利用客戶端來驗證上傳檔案的類型和大小是否規範。 此規格說明包含以下幾個介面來使用檔案：File介面：具有檔案的“讀取權限”，可以取得檔案名，類型，大小等。 FileList介面：指單獨選定的文件列表，可以透過3525558f8f338d4ea90ebf22e5cde2bc或拖曳呈現在使用者介面供使用者選擇。 XMLHTTPRequest2是HTML5的無名英雄，XHR2與XMLHttpRequest大體相同，但同時也增加了許多新功能，如下：##1. 增加了上傳/下載二進位資料
2. 增加了上傳過程中Progess （進度條）事件，該事件包含多部分的資訊：
Total：整數值，用於指定傳輸資料的總位元組數。
Loaded：整數值，用於指定上傳的位元組。lengthComputable：Bool值用來偵測上傳檔案大小是否可計算。
3. 跨資源共享請求
這些新功能都使得Ajax和HTML5很好的協作，讓檔案上傳變得非常簡單，不再需要使用Flash Player、外部外掛程式或html的ff9c23ada1bcecdd1a0fb5d5a0f18437標籤就可以完成，依照伺服器端就可以顯示上傳進度列。
本文會編寫一個小型應用程序，能夠實現以下功能：
上傳單一文件，提供上傳進度資訊顯示。
將圖片傳送到伺服器時，建立圖像縮圖。透過檔案清單或拖曳操作實現多個檔案上傳。
首先我們需要檢驗瀏覽器是否支援XHR2,File API,FormData及拖曳操作。
如何上傳單一檔案並顯示上傳進度？
首先需要做的是建立簡單的View :
定義一個表單，由輸入檔案元素和提交按鈕組成。
使用Bootstrap 進度條顯示進度。
<p id="FormContent">
<form id="FormUpload"
enctype="multipart/form-data" method="post">
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
<input type="file"
name="UploadedFile" id="UploadedFile" />
</span>
<button class="btn btn-primary start"
type="button" id="Submit_btn">
<i class="glyphicon glyphicon-upload"></i>
<span>Start upload</span>
</button>
<button class="btn btn-warning cancel"
type="button" id="Cancel_btn">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>close</span>
</button>
</form>
<p class="progress CustomProgress">
<p id="FileProgress"
class="progress-bar" role="progressbar"
aria-valuenow="" aria-valuemin=""
aria-valuemax="" style="width %;">
<span></span>
</p>
</p>
<p class="InfoContainer">
<p id="Imagecontainer"></p>
<p id="FileName" class="info">
</p>
<p id="FileType" class="info">
</p>
<p id="FileSize" class="info">
</p>
</p>
</p>
在Onchange 事件中新增輸入檔案元素，並在JS方法SingleFileSelected使用，因此在使用者選擇和修改檔案時都會呼叫此方法。在這個方法中，我們將選擇輸入文件元素和存取FileList的文件對象，選擇第一個文件files[0]，因此我們可以得到文件名，文件類型等資訊。
function singleFileSelected(evt) {
//var selectedFile = evt.target.files can use this or select input file element
//and access it's files object
var selectedFile = ($("#UploadedFile"))[].files[];//FileControl.files[];
if (selectedFile) {
var FileSize = ;
var imageType = /image.*/;
if (selectedFile.size > ) {
FileSize = Math.round(selectedFile.size * / ) / + " MB";
}
else if (selectedFile.size > ) {
FileSize = Math.round(selectedFile.size * / ) / + " KB";
}
else {
FileSize = selectedFile.size + " Bytes";
}
// here we will add the code of thumbnail preview of upload images
$("#FileName").text("Name " + selectedFile.name);
$("#FileType").text("type " + selectedFile.type);
$("#FileSize").text("Size " + FileSize);
}
}
可以透過File reader物件從記憶體讀取上傳檔案內容。 reader 物件提供許多事件，onload,onError以及四種讀取資料的函數readAsBinaryString(), readAsText()，readAsArrayBuffer(), readAsDataURL(),result屬性表示檔案內容。此屬性只有當讀取操作執行完成後才有效，資料格式根據所呼叫的初始化讀取操作制定的。
在這裡就不詳細解釋File reader，我們會在SingleFileSelected 方法中使用，用於預覽圖像，查看程式碼：
##
if (selectedFile.type.match(imageType)) {
var reader = new FileReader();
reader.onload = function (e) {
$("#Imagecontainer").empty();
var dataURL = reader.result;
var img = new Image()
img.src = dataURL;
img.className = "thumb";
$("#Imagecontainer").append(img);
};
reader.readAsDataURL(selectedFile);
}
#到目前為止，就可以看到下圖：
現在需要將已上傳的檔案傳送到伺服器，因此新增Onclick事件，並在JS uploadFile()方法中調用，程式碼如下：
function UploadFile() {
//we can create form by passing the form to Constructor of formData object
//or creating it manually using append function
//but please note file name should be same like the action Parameter
//var dataString = new FormData();
//dataString.append("UploadedFile", selectedFile);
var form = $('#FormUpload')[];
var dataString = new FormData(form);
$.ajax({
url '/Uploader/Upload', //Server script to process data
type 'POST',
xhr function () { // Custom XMLHttpRequest
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) { // Check if upload property exists
//myXhr.upload.onprogress = progressHandlingFunction
myXhr.upload.addEventListener('progress', progressHandlingFunction,
false); // For handling the progress of the upload
}
return myXhr;
},
//Ajax events
success successHandler,
error errorHandler,
completecompleteHandler,
// Form data
data dataString,
//Options to tell jQuery not to process data or worry about content-type.
cache false,
contentType false,
processData false
});
}
在該方法中，發送表單，使用Form 資料物件來序列化檔案值，我們可以手動建立formdata資料的實例化，透過呼叫append()方法將域值掛起，或透過檢索HTML 表單的FormData物件。 progressHandlingFunction方法會提供檢驗上傳檔案Size 是否可計算，使用e.loaded和e.total計算出已上傳百分之多少的資料。
function progressHandlingFunction(e) {
if (e.lengthComputable) {
var percentComplete = Math.round(e.loaded * / e.total);
$("#FileProgress").css("width",
percentComplete + '%').attr('aria-valuenow', percentComplete);
$('#FileProgress span').text(percentComplete + "%");
}
else {
$('#FileProgress span').text('unable to compute');
}
}
現在已經實作了基本的發送資料及提供進度條的功能，接下來需要實作伺服器端的程式碼處理，使用upload action方法和uplpader controller 。 在upload 方法中，可以從HttpPostedfileBase物件中取得文件訊息，該物件包含上傳的檔案的基本資訊如Filename屬性，Contenttype屬性，inputStream屬性等內容，這些資訊都可以用來驗證伺服器端接收的文件是否有錯，也可以用來保存文件。
public JsonResult Upload(HttpPostedFileBase uploadedFile)
{
if (uploadedFile != null && uploadedFile.ContentLength > )
{
byte[] FileByteArray = new byte[uploadedFile.ContentLength];
uploadedFile.InputStream.Read(FileByteArray, , uploadedFile.ContentLength);
Attachment newAttchment = new Attachment();
newAttchment.FileName = uploadedFile.FileName;
newAttchment.FileType = uploadedFile.ContentType;
newAttchment.FileContent = FileByteArray;
OperationResult operationResult = attachmentManager.SaveAttachment(newAttchment);
if (operationResult.Success)
{
string HTMLString = CaptureHelper.RenderViewToString
("_AttachmentItem", newAttchment, this.ControllerContext);
return Json(new
{
statusCode = ,
status = operationResult.Message,
NewRow = HTMLString
}, JsonRequestBehavior.AllowGet);
}
else
{
return Json(new
{
statusCode = ,
status = operationResult.Message,
file = uploadedFile.FileName
}, JsonRequestBehavior.AllowGet);
}
}
return Json(new
{
statusCode = ,
status = "Bad Request! Upload Failed",
file = string.Empty
}, JsonRequestBehavior.AllowGet);
}
能否透過拖曳操作來實現多個檔案上傳的功能？
在這一部分，實作相同的uploader，並為uploader添加一些新功能：
允许选择多个文件
拖拽操作
现在给Uplodaer View添加新功能：
为输入文件元素添加多个属性，实现同时选择多个文件。
添加实现拖拽功能的文件，如以下代码所示：
<p id="drop_zone">Drop images Here</p>
在JS方法MultiplefileSelected中添加onChange事件，与之前SingleFileSelected的写法类似，不同的是需要将所有的文件列出，并允许拖拽文件。代码如下：
function MultiplefileSelected(evt) {
evt.stopPropagation();
evt.preventDefault();
$('#drop_zone').removeClass('hover');
selectedFiles = evt.target.files || evt.dataTransfer.files;
if (selectedFiles) {
$('#Files').empty();
for (var i = ; i < selectedFiles.length; i++) {
DataURLFileReader.read(selectedFiles[i], function (err, fileInfo) {
if (err != null) {
var RowInfo = '<p id="File_' + i + '"
class="info"><p class="InfoContainer">' +
'<p class="Error">' + err + '</p>' +
'<p data-name="FileName"
class="info">' + fileInfo.name + '</p>' +
'<p data-type="FileType"
class="info">' + fileInfo.type + '</p>' +
'<p data-size="FileSize"
class="info">' + fileInfo.size() +
'</p></p><hr/></p>';
$('#Files').append(RowInfo);
}
else {
var image = '<img src="' + fileInfo.fileContent +
'" class="thumb" title="' +
fileInfo.name + '" />';
var RowInfo = '<p id="File_' + i + '"
class="info"><p class="InfoContainer">' +
'<p data_img="Imagecontainer">' +
image + '</p>' +
'<p data-name="FileName"
class="info">' + fileInfo.name + '</p>' +
'<p data-type="FileType"
class="info">' + fileInfo.type + '</p>' +
'<p data-size="FileSize"
class="info">' + fileInfo.size() +
'</p></p><hr/></p>';
$('#Files').append(RowInfo);
}
});
}
}
}
在该方法中，将选择和拖拽文件操作的变量设置为全局变量selectedFiles，然后扫描 selectedfiles中的每个文件，将从 DataURLreader对象中调用Read 方法读取文件。
DataURLreader对象可调用read方法，并将File对象和回调方法作为read方法参数，在上述方法中我们创建了FileReader，并修改了FileReader的Onload和onerror回调函数。调用 readAsDataURL 方法来读文件。
新建FileInfo对象包括了所有的文件信息及内容。
var DataURLFileReader = {
read function (file, callback) {
var reader = new FileReader();
var fileInfo = {
name file.name,
type file.type,
fileContent null,
size function () {
var FileSize = ;
if (file.size > ) {
FileSize = Math.round(file.size * / ) / + " MB";
}
else if (file.size > ) {
FileSize = Math.round(file.size * / ) / + " KB";
}
else {
FileSize = file.size + " bytes";
}
return FileSize;
}
};
if (!file.type.match('image.*')) {
callback("file type not allowed", fileInfo);
return;
}
reader.onload = function () {
fileInfo.fileContent = reader.result;
callback(null, fileInfo);
};
reader.onerror = function () {
callback(reader.error, fileInfo);
};
reader.readAsDataURL(file);
}
};
使用拖拽操作选择
由于大部分浏览器现在已经执行拖拽操作，为了实现拖拽操作，在drop_zone 元素中添加dragover和drop事件。
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', MultiplefileSelected, false);
dropZone.addEventListener('dragenter', dragenterHandler, false);
dropZone.addEventListener('dragleave', dragleaveHandler, false);
当文件拖到目标位置时触发dragover事件，在以下代码中，我们修改了默认浏览器及datatransfer的dropEffect 属性，代码如下：
function handleDragOver(evt) {
evt.preventDefault();
evt.dataTransfer.effectAllowed = 'copy';
evt.dataTransfer.dropEffect = 'copy';
}
接着在MultiplefileSelected中添加drop事件来处理文件drop操作。
大部分功能已经完善，现在需要添加“上传按钮”，通过Onclick事件来调用UploadMultipleFiles方法。
该方法与上文提到的Uploadfile方法类似，不同的是手动验证formdata对象值。
function UploadMultipleFiles() {
// here we will create FormData manually to prevent sending mon image files
var dataString = new FormData();
//var files = document.getElementById("UploadedFiles").files;
for (var i = ; i < selectedFiles.length; i++) {
if (!selectedFiles[i].type.match('image.*')) {
continue;
}
}
// AJAX Request code here
}
接下来添加服务器端处理代码，与上文添加的代码类似，需要做的就是接受一系列的文件列表，如下：
public JsonResult UplodMultiple(HttpPostedFileBase[] uploadedFiles)
确保 HttpPostedFileBase 数组名称与append 方法中的名称相同，只有这样，MVC才能映射到文件数组中。
public JsonResult UplodMultiple(HttpPostedFileBase[] uploadedFiles)
dataString.append("uploadedFiles", selectedFiles[i]);
上传大文件
为了允许上传大文件，如果使用的是 IIS7及以上版本，需要修改Web.config 文件，添加以下代码：
<system.webServer>
<security>
<requestFiltering>
<requestLimits maxAllowedContentLength="" />
</requestFiltering>
</security>
</system.webServer>
<httpRuntime targetFramework="." maxRequestLength=""/>上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
初步了解JavaScript，Ajax，jQuery，并比较三者关系
以上是MVC中基於Ajax與HTML5實作檔案上傳功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！