• MVC+AjaxFileUpload文件上传


    来源:微信公众号CodeL

    本次给大家分享的是ajaxfileupload文件上传插件,百度一大堆功能超炫的文件上传插件,为什么我们会选择这个插件呢?

    原因是在此之前,我们尝试使用过很多基于flash的上传插件,但由于兼容性,适用性等诸多问题,最终我们选择了—ajaxfileupload.js,由于它使用的原生input标签实现,兼容性很好,它的原理和用法我就不多说了,很多大神们都分析的很透彻。本次和大家分享一下使用它时遇到的各种'坑',希望大家在使用的时候有所规避。

    1.类型问题

      如下图,网上大多数资料都说类型dataType一般使用json

    但是使用json格式在火狐浏览器中会解析异常提示下载。

    解决办法:

    1. 使用dataType:”html“,也有网友说在某些版本浏览器中html要大写成HTML才起作用 ,目前没有发现此问题。
    2. 在控制器返回Json格式数据的时候,处理一下ContentType:return Json(new { Success = true, Message = "文件上传成功" }, "text/html");

    2.插件调整

    下载回来使用时需要检查插件中的这段代码:var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');改成:var io = document.createElement("iframe");io.id = frameId;io.name = frameId;
    第一句代码在IE部分版本中提示InvalidCharacterError 错误导致无法运行

    3.input透明法

    先列举一种用法,如图:

    <input type="file" id="upload" ><input type="button" value="上传" onlick="document.getElementById(‘upload‘).click()"/>如上图点击button模拟点击input/file标签选择文件上传,这种方式在IE8中无法执行,原因IE8要求比较严格,出于安全限制无法更改value值和促发change事件。


    解决办法:采用input透明法

    .file_btn_visible{position:relative;top:-30px;left:0;80px;height:30px;cursor:pointer;opacity:0;filter:alpha(opacity=0);}意思就是说将input[type=file] 标签通过css样式放置在自定义按钮的上面,然后将input透明度设为0(opacity:0;filter:alpha(opacity=0)),此时点击按钮时实际上点击的是file标签,就不会有问题了。

    调整后的插件兼容ie7/8/9/10/11、firefox、chrome等浏览器,注意的是jQuery版本需使用2.0以下的版本,高版本jQuery已不支持IE6/7/8
    ajaxfileupload功能虽没有其他flash控件功能强大,但对于普通单文件上传效果很好,运用场景比如:上传图像,上传用户身份证,普通图片,文件等
    以上是实际开发过程中遇到的部分问题,若有其他疑问可在公众号留言。

    原文链接:http://mp.weixin.qq.com/s?__biz=MzIzNTE2OTk1MA==&mid=402768932&idx=1&sn=0f091d8a9ebf006f5e5d128304d06e63#rd

    相关资源获取或其他疑问可在扫码添加CodeL公众号留言。(微信公众号: codelir)

    微信扫一扫获取更多开发资源:

  • 相关阅读:
    POJ-1751 Highways---确定部分边的MST
    ZOJ-1586 QS Network---最小生成树Prim
    POJ-1861 Network---最小生成树
    ZOJ-1203 Swordfish---最小生成树
    POJ-3026 Borg Maze---BFS预处理+最小生成树
    POJ-1258 Agri-Net---MST裸题Prim
    Android异常与性能优化相关面试问题-ANR异常面试问题详解
    Android异常与性能优化相关面试问题-OOM异常面试问题详解
    热门前沿知识相关面试问题-android插件化面试问题讲解
    初始化对于类与接口的异同点深入解析
  • 原文地址:https://www.cnblogs.com/codelir/p/5135683.html
Copyright © 2020-2023  润新知