• 技术文章 >web前端 >js教程

    利用ajaxfileupload插件实现文件上传无刷新的具体方法_javascript技巧

    2016-05-16 17:32:24原创603
    做项目的时候遇到了这样一个问题,如果用普通的ASP.NET FileUpload控件实现文件上传,那么页面会刷新,那么页面上用JS拼出的元素就会消失,为了上传文件,又不能刷新页面,ajaxfileupload插件是一个很好的选择(插件下载地址:http://files.jb51.net/file_images/article/201306/js/ajaxfileupload.js)

    ajaxfileupload是jQuery的一个插件,使用这个插件同时要引用jQuery.js文件

    直接上代码吧

    JS代码

    [javascript]

    复制代码 代码如下:

    //执行AJAX上传文件
    $.ajaxFileUpload({
    url: '/Web/Teacher/ImportAchievements.ashx',
    secureuri: false,
    fileElementId: 'fulAchievements',
    dataType: 'json',
    success: function (data, status) {
    alert(data[0]);
    }
    });

    //执行AJAX上传文件
    $.ajaxFileUpload({
    url: '/Web/Teacher/ImportAchievements.ashx',
    secureuri: false,
    fileElementId: 'fulAchievements',
    dataType: 'json',
    success: function (data, status) {
    alert(data[0]);
    }
    });


    说明:

    1.这个方法很像大家熟知的$.ajax方法

    2.参数说明

    url:AJAX的后台代码文件,要接收前台传来的文件数据

    secureuri:是否对上传的文件加密

    fileElementId:HTML中上传控件的Id值,这里需要注意的是,后台代码是通过name-value的形式接收数据的,所以后台代码是通过name来接收数据的,而不是Id(根本原因是,这个方法会自动生成一个表单,将表单提交给后台代码处理)。

    dataType:数据类型,一般是‘json'

    success:上传成功后执行的回调函数

    ASP.NET一般处理程序中的代码

    [csharp]

    复制代码 代码如下:

    public void ProcessRequest (HttpContext context) {
    context.Response.ContentType = "text/html";//这里很关键,虽然前台数据类型是json,但这里一定要写html
    //获取前台传来的文件
    HttpFileCollection files = HttpContext.Current.Request.Files;
    //将文件保存在网站目录中
    files[0].SaveAs(context.Server.MapPath("/Web/uploadFiles/Achievements.xls"));
    //返回用json数据格式表示的提示
    string result = "[" + "\"" + "成绩导入成功" + "\"" + "]";
    context.Response.Write(result);

    }

    public void ProcessRequest (HttpContext context) {
    context.Response.ContentType = "text/html";//这里很关键,虽然前台数据类型是json,但这里一定要写html
    //获取前台传来的文件
    HttpFileCollection files = HttpContext.Current.Request.Files;
    //将文件保存在网站目录中
    files[0].SaveAs(context.Server.MapPath("/Web/uploadFiles/Achievements.xls"));
    //返回用json数据格式表示的提示
    string result = "[" + "\"" + "成绩导入成功" + "\"" + "]";
    context.Response.Write(result);

    }


    这样就实现了AJAX上传文件,页面不会刷新,有需要的试试吧。
    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例_jquery 下一篇:Jquery加载时从后台读取数据绑定到dropdownList实例_jquery
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• JavaScript DOM API知识串讲• JavaScript怎么创建多个对象?详解四种方法• JavaScript数据处理的5个常见问题详解• 聊聊怎么利用angular Material做统计表格• 整理分享JavaScript开发中常见的5种数据处理问题
    1/1

    PHP中文网