ie8实现ajax无刷新文件上传

Posted axel10

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ie8实现ajax无刷新文件上传相关的知识,希望对你有一定的参考价值。

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");
        }

 

以上是关于ie8实现ajax无刷新文件上传的主要内容,如果未能解决你的问题,请参考以下文章

基于jQuery的ajax系列之用FormData实现页面无刷新上传

js实现无刷新表单提交文件,将ajax请求转换为form请求方法

通过Ajax使用FormData对象无刷新上传文件

基于THINKPHP+layui+Ajax无刷新实现图片上传预览

jquery 的ajax无刷新上传文件之后,页面还是会莫名的刷新-----解决办法

html+php实现无刷新上传文件