jQuery插件-ajaxFileUpload异步上传文件

  ajaxFileUpload是前两天学习过程中接触到的一个jQuery插件,功能是实现异步上传文件。适用于上传头像、图片、文件等应用场景。

一.语法介绍

语法:$.ajaxFileUpload([setting]);

[setting]参数说明:

(1)url——执行上传处理的地址;

(2)secureuri——是否启用安全提交,默认为false;

(3)fileElementId——需要上传<input type=”file”>控件id属性值;

(4)data——自定义参数,即需要额外传递的JSON格式数据;

(5)type——请求方式,当提交自定义参数data时这个参数要设置成post;

(6)dataType——服务器返回的数据类型,可以为XML,JSON,HTML,SCRIPT,默认为HTML。

(7)success——执行成功后的回调函数,参数data就是服务器返回的数据;

(8)error——执行失败后的回调函数。

二.使用方法

  下面通过一个将图片上传后台并将上传成功后的图片展示在web页面上的demo来演示这个插件的具体使用方法。

前端代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="Scripts/jquery-1.8.0.js"></script>   //引入jQuery资源文件
    <script src="Scripts/ajaxfileupload.js"></script> //引入ajaxfileupload资源文件
    <script type="text/javascript">
        $(function () {
            $.ajaxFileUpload()
            $("#btnUpload").click(function () {
                $.ajaxFileUpload({
                    url: "FileSaveHandler.ashx",      //图片的上传地址
                    secureuri: false,                 //上传是否加密
                    fileElementId: "imgTitle",        //这里是指通过file控件上传的id属性值
                    data: {},                         //需要额外传递的数据,可不写
                    type: "post",                     //设置data参数,这里请求方式必须为post
                    success: function (data) {        //执行成功回调函数,参数data就是后台返回的HTML数据
                        $("#imgShow").attr("src", $(data).text());
                    },
                    error: function (data, status, e)//响应失败处理函数
                    {
                        alert(e);
                    }
                });
            });
        })
    </script>
</head>
<body>
    <input type="file" name="imgTitle" id="imgTitle" /> 
    <input type="button" name="btnUploadd" id="btnUpload" value="上传" />
    <hr />
    <img src="" id="imgShow" />
</body>
</html>

后台代码:

public class FileSaveHandler : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        //接收前端传来的文件
        HttpPostedFile file = context.Request.Files["imgTitle"];
        //设置文件的保存路径
        string path = "/Images/"+file.FileName;
        //将保存路径映射成磁盘路径
        string fullPath = context.Request.MapPath(path);
        //将文件保存至服务器磁盘上
        file.SaveAs(fullPath);
        //将图片路径响应给前端
        context.Response.Write(path);
    }

}

  代码很简单有注释,不再详细说明。使用ajaxFileUpload插件时有两点需要注意:

(1)不要忘记引入jQuery与ajaxFileUpload的资源文件,注意先后顺序;

(2)服务器返回的数据类型,即dataType参数一定要大写,不设置该属性就代表返回HTML格式的数据。

三.实现原理

  默认情况下,上传文件必须通过form表单提交,并且表单需要将属性enctype设置成"multipart/form-data"。ajaxFileUpload插件内部则是动态创建一个iframe,并且内嵌一个可以上传文件form表单,通过这种机制完成异步上传任务。有兴趣深究的朋友请参见下面这篇文章。

jquery插件--ajaxfileupload.js上传文件原理分析

你可能感兴趣的:(jQuery插件-ajaxFileUpload异步上传文件)