Asp.net MVC中使用JQuery插件ajaxFileUpload上传文件

0 ajaxFileUpload简介 

ajaxFileUpload插件是一个非常简单的基于Jquery的异步上传文件的插件,使用过程中发现很多与这个同名的,基于原始版本基础之上修改过的插件,文件版本比较多,我把我自己使用的ajaxFileUpload文件上传到博客园上了,想要使用的朋友可以下载:(jb51.net).rar。 

整个插件源码不到200行,实现非常简单,大致原理就是通过js动态创建隐藏的表单,然后进行提交操作,达到附件上传的目的,主要实现在源码里都有注释,不难理解,我们也可以基于此简单版本实现更复杂的操作。 

1 ajaxFileUpload使用说明 

ajaxFileUpload的使用也很简单,调用ajaxFileUpload方法即可,各配置项详细说明如下: 

$.ajaxFileUpload({ type: "post", //请求类型:post或get,当要使用data提交自定义参数时一定要设置为post url: "/Shared/Upload", //文件上传的服务器端请求地址 secureuri: false, //是否启用安全提交,一般默认为false就行,不用特殊处理 fileElementId: "filePicture", //文件上传控件的id <input type="file" accept=".jpg,.jpeg,.png,.bmp" onchange="filePictureChange()" /> dataType: "json", //返回值类型,一般设置为json,还支持html\xml\script类型 data: { "id": "1", "name": "test" }, //用于post请求提交自定义参数 success: function (data, status) { //服务器成功响应处理函数 }, error: function (data, status, e) { //服务器响应失败处理函数 } });

首先在页面添加对JQuery及ajaxFileUpload的引用,这里的JQuery用的2.1.4版本,经测试用各个版本基本没什么影响。
 <script src=""></script>
<script src=""></script>
页面添加类型为file的input标签
 

复制代码 代码如下:

<input type="file" accept=".jpg,.jpeg,.png,.bmp" onchange="filePictureChange()" />


通过accept可以限定打开文件选择对话框后,默认能选择的文件类型。文件类型的定义主要有以下这些 

*.3gpp  audio/3gpp, video/3gpp  3GPP Audio/Video

*.ac3   audio/ac3   AC3 Audio

*.asf   allpication/vnd.ms-asf  Advanced Streaming Format

*.au    audio/basic AU Audio

*.css   text/css    Cascading Style Sheets

*.csv   text/csv    Comma Separated Values

*.doc   application/msword  MS Word Document

*.dot   application/msword  MS Word Template

*.dtd   application/xml-dtd Document Type Definition

*.dwg   image/vnd.dwg   AutoCAD Drawing Database

*.dxf   image/vnd.dxf   AutoCAD Drawing Interchange Format

*.gif   image/gif   Graphic Interchange Format

*.htm   text/html   HyperText Markup Language

*.html  text/html   HyperText Markup Language

*.jp2   image/jp2   JPEG-2000

*.jpe   image/jpeg  JPEG

*.jpeg  image/jpeg  JPEG

*.jpg   image/jpeg  JPEG

*.js    text/javascript, application/javascript JavaScript

*.json  application/json    JavaScript Object Notation

*.mp2   audio/mpeg, video/mpeg  MPEG Audio/Video Stream, Layer II

*.mp3   audio/mpeg  MPEG Audio Stream, Layer III

*.mp4   audio/mp4, video/mp4    MPEG-4 Audio/Video

*.mpeg  video/mpeg  MPEG Video Stream, Layer II

*.mpg   video/mpeg  MPEG Video Stream, Layer II

*.mpp   application/vnd.ms-project  MS Project Project

*.ogg   application/ogg, audio/ogg  Ogg Vorbis

*.pdf   application/pdf Portable Document Format

*.png   image/png   Portable Network Graphics

*.pot   application/vnd.ms-powerpoint   MS PowerPoint Template

*.pps   application/vnd.ms-powerpoint   MS PowerPoint Slideshow

*.ppt   application/vnd.ms-powerpoint   MS PowerPoint Presentation

*.rtf   application/rtf, text/rtf   Rich Text Format

*.svf   image/vnd.svf   Simple Vector Format

*.tif   image/tiff  Tagged Image Format File

*.tiff  image/tiff  Tagged Image Format File

*.txt   text/plain  Plain Text

*.wdb   application/vnd.ms-works    MS Works Database

*.wps   application/vnd.ms-works    Works Text Document

*.xhtml application/xhtml+xml   Extensible HyperText Markup Language

*.xlc   application/vnd.ms-excel    MS Excel Chart

*.xlm   application/vnd.ms-excel    MS Excel Macro

*.xls   application/vnd.ms-excel    MS Excel Spreadsheet

*.xlt   application/vnd.ms-excel    MS Excel Template

*.xlw   application/vnd.ms-excel    MS Excel Workspace

*.xml   text/xml, application/xml   Extensible Markup Language

*.zip   aplication/zip  Compressed Archive

我这里没有单独放上传按钮,添加了onchange事件,在选择文件后立即上传文件,onchange时间定义如下。 

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wjyjfy.html