ie8由于无法使用FormData,想要无刷新上传文件就显得比较麻烦。这里推荐使用jQuery-File-Upload插件,它能够很方便的解决ie8无刷新文件上传问题。(最低兼容到ie6)

jQuery-File-Upload的github:https://github.com/blueimp/jQuery-File-Upload

这里简单介绍一下jQuery-File-Upload的使用。

使用jQuery-File-Upload的基本功能需要引入四个文件:

jquery、jquery.iframe-transport.js、jquery.ui.widget.js、jquery.fileupload.js。

示例:

<!DOCTYPE html>

<html>
<head>
    <title>title</title>
    <script src="/Scripts/jquery-1.10.2.js"></script>
    <script src="/Scripts/jquery.iframe-transport.js"></script>
    <script src="/Scripts/jquery.ui.widget.js"></script>
    <script src="/Scripts/jquery.fileupload.js"></script>
</head>

<body>
<div>
    <input id="fileupload" type="file" name="files" data-url="/home/upload" multiple>
</div>

<script>
    $(function() {
        $('#fileupload').fileupload({
            dataType: 'json',
/*            done: function (e, data) {
                $.each(data.result.files, function (index, file) {
                    $('<p/>').text(file.name).appendTo(document.body);
                });
            }*/
            success: function(result, textStatues) {
                console.log(result, textStatues);
            },
            progressall: function(e, data) {
                var progress = (data.loaded / data.total).toFixed(2);
                console.log(progress);
            }

        });
    });
</script>
</body>
</html>

值得注意的是,success事件和done事件的触发条件都是后台返回字符串“true”,如果返回的不是字符串“true”就不会触发,而是触发complele事件。complete事件的用法和success以及done事件类似。

jQuery-File-Upload会把前端上传的多个文件拆分成多个请求,后台接收的时候要注意即使前端传来多个文件后台也只会收到单个文件而不是文件数组。

如果是ie8及以下使用的时候要注意后台收的到文件名是客户端的文件路径,需要再提取一次文件名。以asp.net后台为例:

        [HttpPost]
        public ActionResult Upload()
        {
            var httpFileCollectionBase = Request.Files;
            )
            {
                return Content("false");
            }

            );
            string fullPath = Server.MapPath("/upload/"+ Path.GetFileName(file.FileName));
            file.SaveAs(fullPath);

            return Content("true");
        }

ie8实现无刷新文件上传的更多相关文章

  1. Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)(转)

    Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现) 相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦 ...

  2. 使用PHP和HTML5 FormData实现无刷新文件上传教程

    无刷新文件上传是一个常见而又有点复杂的问题,常见的解决方案是构造 iframe 方式实现. 在 HTML5 中提供了一个 FormData 对象 API,通过 FormData 可以方便地构造一个表单 ...

  3. 【JS】ajax 实现无刷新文件上传

    一.摘要 最近在做个东西,需要实现页面无刷新文件上传,目前看到的方法有两种 1) 通过隐藏iframe 实现页面无刷新,适用于不关心上传结果 <form target="hiddenF ...

  4. 实用ExtJS教程100例-009:ExtJS Form无刷新文件上传

    文件上传在Web程序开发中必不可少,ExtJS Form中有一个filefield字段,用来选择文件并上传.今天我们来演示一下如何通过filefield实现ExtJS Form无刷新的文件上传. 首先 ...

  5. Asp.Net 无刷新文件上传并显示进度条的实现方法及思路

    相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来 实现呢?我并不否认”拿来主义“,只是我个人更喜欢凡是求个所以 ...

  6. SpringMVC ajax技术无刷新文件上传下载删除示例

    参考 Spring MVC中上传文件实例 SpringMVC结合ajaxfileupload.js实现ajax无刷新文件上传 Spring MVC 文件上传下载 (FileOperateUtil.ja ...

  7. Javascrpt无刷新文件上传

    最近工作中遇到上传文件问题,主要需求是一步点击上传,兼容ie8+,当时用的dojox/form/uploader控件,这两天扒了一下源码,明白了原理拿出来分享一下. 总体思路如下: 1.对于支持XML ...

  8. jquery无刷新文件上传 解决IE安全性问题

    很多项目中都需要有文件上传的功能,一般文件上传有几种方式,input file表单上传,flash上传. flash就不说了,能接受flash的就用吧. 下面介绍的这种是基于input file控件的 ...

  9. php利用iframe实现无刷新文件上传功能

    上传原理很简单就是利用表单的打开方式为iframe的name名,这样就可以在当前页面的iframe打来了,实现文件上传,再利用js返回上传结果. form target .在 action 属性中规定 ...

随机推荐

  1. 塞翁失马,焉知非福:由 Styles.Render 所引发 runAllManagedModulesForAllRequests=&quot;true&quot; 的思考

    最近在使用 MVC 开发的时候,遇到一个对我来说"奇怪的问题",就是使用 BundleTable 进行 CSS.JS 文件绑定,然后使用 Styles.Render.Scripts ...

  2. Maven打包程序

    1.src/main目录下建立scritps.config.assembly目录 scritps:存放脚本文件如批处理 assembly:打包配置文件   2.assembly目录下建立package ...

  3. Linux下Redis开机自启(Centos)

    废话少说,直接来步骤: 1.设置redis.conf中daemonize为yes,确保守护进程开启. 2.编写开机自启动脚本 vi /etc/init.d/redis 脚本内容如下: # chkcon ...

  4. Cassandra1.2文档学习(5)—— Snitch

    参考资料:http://www.datastax.com/documentation/cassandra/1.2/webhelp/index.html#cassandra/architecture/a ...

  5. Go-file

    两个包具有文件操作的相关方法,一个是os,一个是syscall,其中os中的相关方法是对syscall相关方法的封装,推荐使用os中的相关方法.文件的打开文件的第一步操作实际上是创建,但是由于文件的打 ...

  6. 「mysql优化专题」90%程序员面试都用得上的索引优化手册(5)

    目录(技术文) 多关于索引,分为以下几点来讲解: 一.索引的概述(什么是索引,索引的优缺点) 二.索引的基本使用(创建索引) 三.索引的基本原理(面试重点) 四.索引的数据结构(B树,hash) 五. ...

  7. Flagr 配置说明

    说明文档来自官方文档 https://checkr.github.io/flagr/#/flagr_env 完整配置 包含了组件的配置参数以及说明,对于学习如何使用Flagr 还是很重要的,包含了数据 ...

  8. java.lang.Exception: No tests found matching Method tes(com.bw.test.Testrefiect) from org.junit.vintage.engine.descriptor.RunnerRequest@3bfdc050 at org.junit.internal.requests.FilterRequest.getRunner

    junit   方法  没有加上注解  @Test java.lang.Exception: No tests found matching Method tes(com.bw.test.Testre ...

  9. struct 与 class 的区别

    C++中的struct对C中的struct进行了扩充,它已经不再只是一个包含不同数据类型的数据结构了,它已经获取了太多的功能. struct能包含成员函数吗? 能! struct能继承吗? 能!! s ...

  10. 2. Python3输入与输出

    数据的输入和输出操作是计算机最基本的操作,本节只研究基本的输入与输出,基本输入是指从键盘上输入数据的操作,基本输出是指屏幕上显示输出结果的操作. 2.1基本输入和输出 常用的输入与输出设备有很多,如摄 ...