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

0 ajaxFileUpload简介

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

整个插件源码不到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" id="filePicture" name="filePicture" 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="../../Content/js/jquery-2.1.4.min.js"></script>
<script src="../../Content/js/ajaxfileupload.js"></script>

页面添加类型为file的input标签

<input type="file" id="filePicture" name="filePicture" 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时间定义如下。

function filePictureChange() {
            $.ajaxFileUpload({
                url: "/Shared/Upload", //用于文件上传的服务器端请求地址
                   type: "post",
                secureuri: false, //一般设置为false
                fileElementId: "filePicture", //文件上传空间的id属性
                   dataType: "json", //返回值类型 一般设置为json
                success: function (data, status) {  //服务器成功响应处理函数
                       alert(data.fileName);
                    alert(data.filePath);
                    alert(data.fileSize);
                },
                error: function (data, status, e){  //服务器响应失败处理函数
                       alert(e);
                }
            });
        };

后台控制器处理方法如下,使用MD5处理,判断文件是否已经存在,避免文件重复上传。

/// <summary>
        /// 附件上传
        /// </summary>
        /// <returns></returns>
        public ActionResult Upload()
        {
            HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
            if (files.Count == 0) return Json("Faild", JsonRequestBehavior.AllowGet);
            MD5 md5Hasher = new MD5CryptoServiceProvider();
            /*计算指定Stream对象的哈希值*/
            byte[] arrbytHashValue = md5Hasher.ComputeHash(files[0].InputStream);
            /*由以连字符分隔的十六进制对构成的String,其中每一对表示value中对应的元素;例如“F-2C-4A”*/
            string strHashData = System.BitConverter.ToString(arrbytHashValue).Replace("-", "");
            string FileEextension = Path.GetExtension(files[0].FileName);
            string uploadDate = DateTime.Now.ToString("yyyyMMdd");
            string virtualPath = string.Format("/Data/ComponentAttachments/{0}/{1}{2}", uploadDate, strHashData, FileEextension);
            string fullFileName = Server.MapPath(virtualPath);
            //创建文件夹,保存文件
              string path = Path.GetDirectoryName(fullFileName);
            Directory.CreateDirectory(path);
            if (!System.IO.File.Exists(fullFileName))
            {
                files[0].SaveAs(fullFileName);
            }
            string fileName = files[0].FileName.Substring(files[0].FileName.LastIndexOf("\\") + 1, files[0].FileName.Length - files[0].FileName.LastIndexOf("\\") - 1);
            string fileSize = GetFileSize(files[0].ContentLength);
            return Json(new { FileName = fileName, FilePath = virtualPath, FileSize = fileSize }, "text/html", JsonRequestBehavior.AllowGet);
        }
        /// <summary>
        /// 获取文件大小
        /// </summary>
        /// <param name="bytes"></param>
        /// <returns></returns>
        private string GetFileSize(long bytes)
        {
            long kblength = 1024;
            long mbLength = 1024 * 1024;
            if (bytes < kblength)
                return bytes.ToString() + "B";
            if (bytes < mbLength)
                return decimal.Round(decimal.Divide(bytes, kblength), 2).ToString() + "KB";
            else
                return decimal.Round(decimal.Divide(bytes, mbLength), 2).ToString() + "MB";
        }

2 ajaxFileUpload使用过程中的一些问题

2.0 jQuery.handleError is not a function

解决方法:

经测试handlerError只在jquery-1.4.2之前的版本中存在,以后版本中都没有这个函数了,因此在将handleError这个函数复制到ajaxFileUpload.js中,就行了

   uploadHttpData: function (r, type) {
        var data = !type;
        data = type == "xml" || data ? r.responseXML : r.responseText;
        // If the type is "script", eval it in global context
        if (type == "script")
            jQuery.globalEval(data);
        // Get the JavaScript object, if JSON is used.
        if (type == "json")
            eval("data = " + data);
            //eval("data = \"" + data + "\"");
        // evaluate scripts within html
        if (type == "html")
            jQuery("<div>").html(data).evalScripts();

        return data;
    },
    handleError: function (s, xhr, status, e) {
        // If a local callback was specified, fire it
        if (s.error) {
            s.error.call(s.context || s, xhr, status, e);
        }

        // Fire the global callback
        if (s.global) {
            (s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]);
        }
    }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏菩提树下的杨过

如何对动态创建控件进行验证以及在Ajax环境中的使用

首先给一个常规的动态创建控件,并进行验证的代码 [前端aspx代码] <%@ Page Language="C#" AutoEventWireup="true"...

2015
来自专栏水击三千

Silverlight学习(二)

好久没来写博客了,这期间经历了春节,也因为忙于一个项目,所以博客被疏忽了。最近一段时间一直在用silverlight做项目,从来一开始的不熟悉渐渐的开始上手。今...

28910
来自专栏更流畅、简洁的软件开发方式

用接口实现事件的一种方法,只是玩玩。

  前一阵子,firelong说,应该用接口实现事件,而不应该用委托。我就希望他能给出一个用接口实现事件的方法,我是一直等呀,等到了现在也没有看到。   昨天又...

2358
来自专栏友弟技术工作室

GoLang实现google authenticator的CLI工具

两步认证在很多验证中都要使用。如果在手机客户端上,如果使用电脑,每次都要拿出手机,手动输入。还要担心会过时。效率不是很高。

1443
来自专栏一个会写诗的程序员的博客

在简书中使用Latex书写数学公式开宗明义PS:

This is a first example of a simple input file.

861
来自专栏python爬虫日记

python3下搜狗AI API实现

a、搜狗也发布了自己的人工智能 api,包括身份证ocr、名片ocr、文本翻译等API,初试感觉准确率一般般。

1793
来自专栏ASP.NET MVC5 后台权限管理系统

ASP.NET MVC5+EF6+EasyUI 后台管理系统(80)-自由桌面

系列目录 前言 这次我们来做一个有趣的事情,有朋友跟做了很远,找我要自由桌面的代码,这次我们将演示自由桌面的代码。 自由桌面:用户可以随意增删改桌面的布局、...

29910
来自专栏xx_Cc的学习总结专栏

六天完成一个简单iOS App - 第一天

2995
来自专栏守望轩

html页面表格导出到excel总结

最近一个项目需要把报表的表格导入excel,在网上找了一些方法,比较研究了一下,记在这里,备忘。 表格例子如下: <table id="tableExcel" ...

4049
来自专栏游戏杂谈

测试用户的网络环境

这个其实是一个hta文件,目的是测试用户本机请求资源、hosts文件、当前所处的位置。参考stone的checknetwork4qqfarm: http://c...

2251

扫码关注云+社区

领取腾讯云代金券