您的位置：首页 > Web前端 > HTML5

MVC5：使用Ajax和HTML5实现文件上传功能

2015-09-29 16:39 761 查看

引言

在实际编程中，经常遇到实现文件上传并显示上传进度的功能，基于此目的，本文就为大家介绍不使用flash或任何上传文件的插件来实现带有进度显示的文件上传功能。

基本功能：实现带有进度条的文件上传功能

高级功能：通过拖拽文件的操作实现多个文件上传功能

背景

HTML5提供了一种标准的访问本地文件的方法——FileAPI规格说明，通过调用FileAPI能够访问文件信息，也可以利用客户端来验证上传文件的类型和大小是否规范。

该规格说明包含以下几个接口来使用文件：

File接口：具有文件的“读权限”，可以获取文件名，类型，大小等。

FileList接口：指单独选定的文件列表，可以通过<inputtype="file">或拖拽呈现在用户界面供用户选择。

XMLHTTPRequest2是HTML5的无名英雄，XHR2与XMLHttpRequest大体相同，但同时也添加了很多新功能，如下：

1.增加了上传/下载二进制数据

2.增加了上传过程中Progess（进度条）事件，该事件包含多部分的信息：

Total：整型值，用于指定传输数据的总字节数。

Loaded：整型值，用于指定上传的字节。

lengthComputable：Bool值用于检测上传文件大小是否可计算。

3.跨资源共享请求

这些新特性都使得Ajax和HTML5很好的协作，让文件上传变得非常简单，不再需要使用FlashPlayer、外部插件或html的<form>标签就可以完成，根据服务器端就可以显示上传进度条。

本文会编写一个小型应用程序，能够实现以下功能：

上传单个文件，提供上传进度信息显示。

将图片发送到服务器时，创建图像缩略图。

通过文件列表或拖拽操作实现多个文件上传。

首先我们需要检验浏览器是否支持XHR2,FileAPI,FormData及拖拽操作。

编写代码

如何上传单个文件并显示上传进度？

首先需要做的是创建简单的View:

定义一个表单，由输入文件元素和提交按钮组成。

使用Bootstrap进度条显示进度。

<divid="FormContent">

[code]<formid="FormUpload"
enctype="multipart/form-data"method="post">

<spanclass="btnbtn-successfileinput-button">

<iclass="glyphiconglyphicon-plus"></i>

<span>Addfiles...</span>

<inputtype="file"

name="UploadedFile"id="UploadedFile"/>

</span>

<buttonclass="btnbtn-primarystart"

type="button"id="Submit_btn">

<iclass="glyphiconglyphicon-upload"></i>

<span>Startupload</span>

</button>

<buttonclass="btnbtn-warningcancel"

type="button"id="Cancel_btn">

<iclass="glyphiconglyphicon-ban-circle"></i>

<span>close</span>

</button>

</form>

<divclass="progressCustomProgress">

<divid="FileProgress"

class="progress-bar"role="progressbar"

aria-valuenow="0"aria-valuemin="0"

aria-valuemax="100"style="width:0%;">

<span></span>

</div>

</div>

<divclass="InfoContainer">

<divid="Imagecontainer"></div>

<divid="FileName"class="info">

</div>

<divid="FileType"class="info">

</div>

<divid="FileSize"class="info">

</div>

</div>

</div>

[/code]

在Onchange事件中添加输入文件元素，并在JS方法SingleFileSelected使用，因此在用户选择和修改文件时都会调用此方法。在该方法中，我们将选择输入文件元素和访问FileList的文件对象，选择第一个文件files[0]，因此我们可以得到文件名，文件类型等信息。

functionsingleFileSelected(evt){

[code]//varselectedFile=evt.target.filescanusethisorselectinputfileelement
//andaccessit'sfilesobject

varselectedFile=($("#UploadedFile"))[0].files[0];//FileControl.files[0];

if(selectedFile){

varFileSize=0;

varimageType=/image.*/;

if(selectedFile.size>1048576){

FileSize=Math.round(selectedFile.size*100/1048576)/100+"MB";

}

elseif(selectedFile.size>1024){

FileSize=Math.round(selectedFile.size*100/1024)/100+"KB";

}

else{

FileSize=selectedFile.size+"Bytes";

}

//herewewilladdthecodeofthumbnailpreviewofuploadimages


$("#FileName").text("Name:"+selectedFile.name);

$("#FileType").text("type:"+selectedFile.type);

$("#FileSize").text("Size:"+FileSize);

}

}

[/code]

可以通过Filereader对象从内存读取上传文件内容。reader对象提供很多事件，onload,onError以及四种读取数据的函数
readAsBinaryString()
,
readAsText()，
readAsArrayBuffer(),
readAsDataURL(),result属性表示文件内容。该属性只有当读操作执行完成后才有效，数据格式根据调用的初始化读操作制定的。


在这里就不详细解释Filereader，我们会在SingleFileSelected方法中使用，用于预览图像，查看代码：

if(selectedFile.type.match(imageType)){

[code]varreader=newFileReader();
reader.onload=function(e){


$("#Imagecontainer").empty();

vardataURL=reader.result;

varimg=newImage()

img.src=dataURL;

img.className="thumb";

$("#Imagecontainer").append(img);

};

reader.readAsDataURL(selectedFile);

}

[/code]

到现在为止，就可看到下图：



现在需要将已上传的文件发送到服务器，因此添加Onclick事件，并在JS
uploadFile()方法中调用，代码如下：



functionUploadFile(){

[code]//wecancreateformbypassingtheformtoConstructorofformDataobject
//orcreatingitmanuallyusingappendfunction

//butpleasenotefilenameshouldbesameliketheactionParameter

//vardataString=newFormData();

//dataString.append("UploadedFile",selectedFile);


varform=$('#FormUpload')[0];

vardataString=newFormData(form);

$.ajax({

url:'/Uploader/Upload',//Serverscripttoprocessdata

type:'POST',

xhr:function(){//CustomXMLHttpRequest

varmyXhr=$.ajaxSettings.xhr();

if(myXhr.upload){//Checkifuploadpropertyexists

//myXhr.upload.onprogress=progressHandlingFunction

myXhr.upload.addEventListener('progress',progressHandlingFunction,

false);//Forhandlingtheprogressoftheupload

}

returnmyXhr;

},

//Ajaxevents

success:successHandler,

error:errorHandler,

complete:completeHandler,

//Formdata

data:dataString,

//OptionstotelljQuerynottoprocessdataorworryaboutcontent-type.

cache:false,

contentType:false,

processData:false

});

}

[/code]

在该方法中，发送表单，使用Form数据对象来序列化文件值，我们可以手动创建formdata数据的实例化，通过调用append()方法将域值挂起，或是通过检索HTML表单的FormData对象。

progressHandlingFunction方法会提供检验上传文件Size是否可计算，使用e.loaded和e.total计算出已上传百分之多少的数据。


functionprogressHandlingFunction(e){

[code]if(e.lengthComputable){
varpercentComplete=Math.round(e.loaded*100/e.total);

$("#FileProgress").css("width",

percentComplete+'%').attr('aria-valuenow',percentComplete);

$('#FileProgressspan').text(percentComplete+"%");

}

else{

$('#FileProgressspan').text('unabletocompute');

}

}

[/code]

现在已经实现了基本的发送数据及提供进度条的功能，接下来需要实现服务器端的代码处理，使用uploadaction方法和uplpadercontroller。

在upload方法中，可以从HttpPostedfileBase对象中获取文件信息，该对象包含上传的文件的基本信息如Filename属性，Contenttype属性，inputStream属性等内容，这些信息都可以用来验证服务器端接收的文件是否有错，也可以用来保存文件。

[HttpPost]

[code]
publicJsonResultUpload(HttpPostedFileBaseuploadedFile)

{

if(uploadedFile!=null&&uploadedFile.ContentLength>0)

{

byte[]FileByteArray=newbyte[uploadedFile.ContentLength];

uploadedFile.InputStream.Read(FileByteArray,0,uploadedFile.ContentLength);

AttachmentnewAttchment=newAttachment();

newAttchment.FileName=uploadedFile.FileName;

newAttchment.FileType=uploadedFile.ContentType;

newAttchment.FileContent=FileByteArray;

OperationResultoperationResult=attachmentManager.SaveAttachment(newAttchment);

if(operationResult.Success)

{

stringHTMLString=CaptureHelper.RenderViewToString

("_AttachmentItem",newAttchment,this.ControllerContext);

returnJson(new

{

statusCode=200,

status=operationResult.Message,

NewRow=HTMLString

},JsonRequestBehavior.AllowGet);


}

else

{

returnJson(new

{

statusCode=400,

status=operationResult.Message,

file=uploadedFile.FileName

},JsonRequestBehavior.AllowGet);


}

}

returnJson(new

{

statusCode=400,

status="BadRequest!UploadFailed",

file=string.Empty

},JsonRequestBehavior.AllowGet);

}

[/code]

能否通过拖拽操作实现多个文件上传的功能？
在这一部分，实现相同的uploader，并为uploader添加一些新功能：

允许选择多个文件

拖拽操作

现在给UplodaerView添加新功能：

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

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


<divid="drop_zone">DropimagesHere</div>



在JS方法MultiplefileSelected中添加onChange事件，与之前SingleFileSelected的写法类似，不同的是需要将所有的文件列出，并允许拖拽文件。代码如下：


functionMultiplefileSelected(evt){

[code]evt.stopPropagation();
evt.preventDefault();

$('#drop_zone').removeClass('hover');

selectedFiles=evt.target.files||evt.dataTransfer.files;

if(selectedFiles){

$('#Files').empty();

for(vari=0;i<selectedFiles.length;i++){

DataURLFileReader.read(selectedFiles[i],function(err,fileInfo){

if(err!=null){

varRowInfo='<divid="File_'+i+'"

class="info"><divclass="InfoContainer">'+

'<divclass="Error">'+err+'</div>'+

'<divdata-name="FileName"

class="info">'+fileInfo.name+'</div>'+

'<divdata-type="FileType"

class="info">'+fileInfo.type+'</div>'+

'<divdata-size="FileSize"

class="info">'+fileInfo.size()+

'</div></div><hr/></div>';

$('#Files').append(RowInfo);

}

else{

varimage='<imgsrc="'+fileInfo.fileContent+

'"class="thumb"title="'+

fileInfo.name+'"/>';

varRowInfo='<divid="File_'+i+'"

class="info"><divclass="InfoContainer">'+

'<divdata_img="Imagecontainer">'+

image+'</div>'+

'<divdata-name="FileName"

class="info">'+fileInfo.name+'</div>'+

'<divdata-type="FileType"

class="info">'+fileInfo.type+'</div>'+

'<divdata-size="FileSize"

class="info">'+fileInfo.size()+

'</div></div><hr/></div>';

$('#Files').append(RowInfo);

}

});

}

}

}

[/code]

在该方法中，将选择和拖拽文件操作的变量设置为全局变量selectedFiles，然后扫描selectedfiles中的每个文件，将从DataURLreader对象中调用Read方法读取文件。

DataURLreader对象可调用read方法，并将File对象和回调方法作为read方法参数，在上述方法中我们创建了FileReader，并修改了FileReader的Onload和onerror回调函数。调用
readAsDataURL方法来读文件。


新建FileInfo对象包括了所有的文件信息及内容。



varDataURLFileReader={

[code]read:function(file,callback){
varreader=newFileReader();

varfileInfo={

name:file.name,

type:file.type,

fileContent:null,

size:function(){

varFileSize=0;

if(file.size>1048576){

FileSize=Math.round(file.size*100/1048576)/100+"MB";

}

elseif(file.size>1024){

FileSize=Math.round(file.size*100/1024)/100+"KB";

}

else{

FileSize=file.size+"bytes";

}

returnFileSize;

}

};

if(!file.type.match('image.*')){

callback("filetypenotallowed",fileInfo);

return;

}

reader.onload=function(){

fileInfo.fileContent=reader.result;

callback(null,fileInfo);

};

reader.onerror=function(){

callback(reader.error,fileInfo);

};

reader.readAsDataURL(file);

}

};

[/code]

使用拖拽操作选择
由于大部分浏览器现在已经执行拖拽操作，为了实现拖拽操作，在drop_zone元素中添加dragover和drop事件。


vardropZone=document.getElementById('drop_zone');

[code]dropZone.addEventListener('dragover',handleDragOver,false);
dropZone.addEventListener('drop',MultiplefileSelected,false);

dropZone.addEventListener('dragenter',dragenterHandler,false);

dropZone.addEventListener('dragleave',dragleaveHandler,false);

[/code]

当文件拖到目标位置时触发dragover事件，在以下代码中，我们修改了默认浏览器及
datatransfer的
dropEffect属性，代码如下：


functionhandleDragOver(evt){

[code]evt.preventDefault();
evt.dataTransfer.effectAllowed='copy';

evt.dataTransfer.dropEffect='copy';

}

[/code]

接着在MultiplefileSelected中添加drop事件来处理文件drop操作。

大部分功能已经完善，现在需要添加“上传按钮”，通过Onclick事件来调用UploadMultipleFiles方法。

该方法与上文提到的
Uploadfile方法类似，不同的是手动验证formdata对象值。



functionUploadMultipleFiles(){

[code]
//herewewillcreateFormDatamanuallytopreventsendingmonimagefiles

vardataString=newFormData();

//varfiles=document.getElementById("UploadedFiles").files;

for(vari=0;i<selectedFiles.length;i++){

if(!selectedFiles[i].type.match('image.*')){

continue;

}

}

//AJAXRequestcodehere

}

[/code]

接下来添加服务器端处理代码，与上文添加的代码类似，需要做的就是接受一系列的文件列表，如下：


publicJsonResultUplodMultiple(HttpPostedFileBase[]uploadedFiles)



确保HttpPostedFileBase数组名称与append方法中的名称相同，只有这样，MVC才能映射到文件数组中。


publicJsonResultUplodMultiple(HttpPostedFileBase[]uploadedFiles)




dataString.append("uploadedFiles",selectedFiles[i]);



上传大文件
为了允许上传大文件，如果使用的是IIS7及以上版本，需要修改Web.config文件，添加以下代码：

<system.webServer>

[code]<security>
<requestFiltering>

<requestLimitsmaxAllowedContentLength="2147483648"/>

</requestFiltering>

</security>

</system.webServer>


<httpRuntimetargetFramework="4.5"maxRequestLength="2097152"/>

[/code]

到这里所有的功能就可以实现了，而且最大可上传2GB的文件。

原文链接：http://www.codeproject.com/Articles/1021004/Upload-File-Using-Ajax-And-HTML-in-MVC
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航