Valums 文件上传器在 Internet Explorer 9 下不起作用答案

【问题标题】：Valums file-uploader doesn't work under Internet Explorer 9Valums 文件上传器在 Internet Explorer 9 下不起作用
【发布时间】：2014-02-27 07:45:24
【问题描述】：

Valums file-uploader（现在称为Fine Uploader）在 Internet Explorer 9 下无法运行，但在 Chrome 下运行良好。

所以在 IE 下它显示文件的名称和按钮 CANCEL 并且没有上传的百分比。

有什么线索吗？

更新：

解决方案也在这里MVC Valums Ajax Uploader - IE doesn't send the stream in request.InputStream

【问题讨论】：

一点头绪都没有。在 IE9 中对我来说非常好用。所以我猜你写的代码中一定有一些东西阻止它工作。
是的...我使用 MVC3 项目...在 Firefox 下我看不到红色的“上传”按钮。在 IE9 下它开始上传但永远不会结束。可能是什么？
再一次，在没有看到您的客户端和服务器端代码的情况下，我们在这里没有太多要讨论的内容。

标签： javascript ajax asp.net-mvc-3 jquery

【解决方案1】：

我知道这个问题是专门在 asp.net 下提出的，但是当我搜索“valuems ajax upload IE9”时它出现了，所以我会在这里发布我的修复，以防它帮助像我这样的任何人，无论语言如何：

我从 AJAX 上传请求返回了一个 JSON 响应，其中包含“application/json”内容标头。 IE9 不知道如何处理“application/json”内容（但 Chrome/FF/etc 可以）。

我通过确保在来自服务器的 json 响应中返回“text/html”MIME 类型的 http 标头来解决此问题。

现在 IE 不再尝试下载响应！干杯

【讨论】：

我可以确认这一点。我只需要让它与 IE 8 一起工作，这就是罪魁祸首。我有它作为 text/plain 但切换它 text/html 作品。

【解决方案2】：

我无法重现该问题。这是一个完整的工作示例。

控制器：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Upload(HttpPostedFileBase qqfile)
    {
        var uploadPath = Server.MapPath("~/app_data");
        if (qqfile != null)
        {
            var filename = Path.Combine(uploadPath, Path.GetFileName(qqfile.FileName));
            qqfile.SaveAs(filename);
            return Json(new { success = true }, "text/html");
        }
        else 
        {
            var filename = Request["qqfile"];
            if (!string.IsNullOrEmpty(filename))
            {
                filename = Path.Combine(uploadPath, Path.GetFileName(filename));
                using (var output = System.IO.File.Create(filename))
                {
                    Request.InputStream.CopyTo(output);
                }
                return Json(new { success = true });
            }
        }
        return Json(new { success = false });
    }
}

Index.cshtml查看：

<script src="@Url.Content("~/Scripts/valums/fileuploader.js")" type="text/javascript"></script>

<div id="file-uploader">       
    <noscript>          
        <p>Please enable JavaScript to use file uploader.</p>
    </noscript>         
</div>

<script type="text/javascript">
    var uploader = new qq.FileUploader({
        element: document.getElementById('file-uploader'),
        action: '@Url.Action("upload")'
    });
</script>

您还可以在布局中包含 CSS：

<link href="@Url.Content("~/Scripts/valums/fileuploader.css")" rel="stylesheet" type="text/css" />

【讨论】：

我刚刚创建了一个空的 MVC3 项目，并把你的代码和 VALUMS 放在一起。在 Chrome HttpPostedFileBase qqfile = null 但在 IE 下它工作正常。有什么线索吗？
@Peretz，我在最初的示例中犯了一个错误，因为我没有考虑在 Chrome 的情况下插件使用 HTML5 文件 API 执行 AJAX 上传的事实。我已经更新了我的答案来解决这个问题。
是的，我在这里找到了解决方案stackoverflow.com/questions/4888632/…

【解决方案3】：

这似乎是 IE 缓存问题，如果您使用的是 Ajax 和 GET，请在 Ajax 参数的 get 参数中添加时间戳值，这样就可以做到：

$.ajax({
  url : "http:'//myexampleurl.php' + '?ts=' + new Date().getTime(),
  dataType: "json",
  contentType: "application/json; charset=utf-8", 
  .
  .
  //more stuff

【讨论】：

【解决方案4】：

如果你使用的是 java spring

@RequestMapping(value = "/upload", method = RequestMethod.POST, produces = "application/json")
public @ResponseBody YourObject excelUplaod(@RequestHeader("X-File-Name") String filename, InputStream is) {
    // chrome or firefox
}

@RequestMapping(value = "/upload", method = RequestMethod.POST,headers="content-type=multipart/*", produces = "text/html")
public @ResponseBody  ResponseEntity<YourObject> uploadByMultipart(@RequestParam(value = "qqfile") MultipartFile file) {
    // IE
    try {
        String fileName = file.getOriginalFilename();
        InputStream is = file.getInputStream();

        // more stuff

    } catch (Exception e) {
        logger.error("error reading excel file", e);
    }   
}

【讨论】：