zoukankan      html  css  js  c++  java
  • ie8实现无刷新文件上传

    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;
                if (httpFileCollectionBase.Count == 0)
                {
                    return Content("false");
                }
    
                var file = httpFileCollectionBase.Get(0);
                string fullPath = Server.MapPath("/upload/"+ Path.GetFileName(file.FileName));
                file.SaveAs(fullPath);
    
                return Content("true");
            }
  • 相关阅读:
    idea中yml文件变成text样式并且没有提示
    挂载redhat镜像创建本地yum源
    Windows环境下Oracle数据库的自动备份脚本
    Oracle存储过程锁表
    DDL和客户端ip监控
    Linux 单实例oracle安装步骤
    Linux常用命令
    Linux常用目录
    oracle基础知识及语法
    Linux下Oracle新建用户并且将已有的数据dmp文件导入到新建的用户下的操作流程
  • 原文地址:https://www.cnblogs.com/axel10/p/8640740.html
Copyright © 2011-2022 走看看