MVC+AjaxFileUpload文件上传

本次给大家分享的是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;width: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)

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

时间: 2024-12-28 21:07:31

MVC+AjaxFileUpload文件上传的相关文章

spring mvc ajaxfileupload文件上传返回json下载问题

问题:使用spring mvc ajaxfileupload 文件上传在ie8下会提示json下载问题 解决方案如下: 服务器代码: @RequestMapping(value = "/addAnalysis", method = RequestMethod.POST) public void addAnalysisUI( HttpServletResponse response,HttpServletRequest request,HttpSession session, @Requ

Spring MVC 多文件上传大小限制及异常处理

Spring MVC  多文件上传大小限制及异常处理 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. 在 spring mvc 的默认配置文件 WEB-INF/xxx-servlet.xml 中

MVC之文件上传1

MVC之文件上传 前言 这一节我们来讲讲在MVC中如何进行文件的上传,我们逐步深入,一起来看看. Upload File(一) 我们在默认创建的项目中的Home控制器下添加如下: public ActionResult UploadFile() { return View(); } [HttpPost] public ActionResult UploadFile(HttpPostedFileBase file) { var fileName = file.FileName; var fileP

【Spring学习笔记-MVC-13】Spring MVC之文件上传

作者:ssslinppp       1. 摘要 Spring MVC为文件上传提供了最直接的支持,这种支持是通过即插即用的MultipartResolve实现的.Spring使用Jakarta Commons FileUpload技术实现了一个MultipartResolver实现类:CommonsMultipartResolver. 下面将具体讲解Spring MVC实现文件上传的具体步骤. 2. 添加Jar包 Spring MVC文件上传,需要添加如下两个jar包: commons-fil

AJaxFileUpload 文件上传&lt;pre&gt;,json字符串为空解决方法

View页面 的JS代码 其中返回值要进行序列号 dataType要大写 <script type="text/javascript"> function ajaxFileUpload(){ $.ajaxFileUpload({ url: '/FileUpload/Index', //用于文件上传的服务器端请求地址 secureuri: false, //是否需要安全协议,一般设置为false fileElementId: 'fileName', //文件上传域的ID da

AjaxFileUpload文件上传组件(php+jQuery+ajax)

jQuery插件AjaxFileUpload可以实现ajax文件上传,下载地址:http://www.phpletter.com/contents/ajaxfileupload/ajaxfileupload.js 主要参数说明:1,url表示处理文件上传操作的文件路径,可以测试URL是否能在浏览器中直接访问,如上:upload.php2,fileElementId表示文件域ID,如上:fileToUpload3,secureuri是否启用安全提交,默认为false4,dataType数据数据,一

MVC实现文件上传

不考虑细节,只实现简单的文件上传操作 一 引入common-fileupload.jar和common-io.jar文件 二 在SprinMVC核心配置文件中配置解析器 <!-- 配置文件上传 --> <bean class="org.springframework.web.multipart.commons.CommonsMultipartResolver" id="multipartResolver"> <!-- 解决文件名的中文乱

Ext4.2结合Spring MVC实现文件上传显示进度

1.实现原理: 在大文件上传时显示上传进度是很有必要的,不能让用户感觉到陷入无穷的等待中,或感觉程序已经卡死.为此我们可以在session中存一个上传进度的变量,在文件上传的过程中实时的去修改这个值,这就需要在后台重写Spring MVC自带的上传解析类,每上传一定的字节数就修改一下session中的进度,在前台通个AJAX请求每隔一定的时间去获取这个值显示给用户,这样就达到了显示上传进度的需求,不过这样频繁的请求服务器无疑是增加了服务器的压力,在没有使用任何第三方上传组件的情况下只能如此. 2

ajaxFileUpload文件上传

一.简介 ajaxFileUpload是一种异步的文件上传控件,通过ajax进行文件上传,并获取上传处理结果.在很多时候我们需要使用到文件上传的功能,但是不需要使用那些强大的上传插件.此时就可以使用ajaxFileUpload.它基于jquery,本质是使用iframe完成上传.下载地址为:下载 . 二.实例 网页代码如下: 1 <%@ page contentType="text/html; charset=UTF-8"%> 2 <!DOCTYPE html>