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添加新功能：

为输入文件元素添加多个属性，实现同时选择多个文件。

添加实现拖拽功能的文件，如以下代码所示：

<div>Drop images Here</div>

在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 = '<div><div>' + '<div>' + err + '</div>' + '<div data-name="FileName">' + fileInfo.name + '</div>' + '<div data-type="FileType">' + fileInfo.type + '</div>' + '<div data-size="FileSize">' + fileInfo.size() + '</div></div><hr/></div>'; $('#Files').append(RowInfo); } else { var image = '<img src="' + fileInfo.fileContent + '" title="' + fileInfo.name + '" />'; var RowInfo = '<div><div>' + '<div data_img="Imagecontainer">' + image + '</div>' + '<div data-name="FileName">' + fileInfo.name + '</div>' + '<div data-type="FileType">' + fileInfo.type + '</div>' + '<div data-size="FileSize">' + fileInfo.size() + '</div></div><hr/></div>'; $('#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事件。