ajax是无法提交文件的,所以在上传图片并预览的时候,我们常常使用Ifame的方法实现看似异步的效果。可是这样总不是非常方便的,AjaxFilleUpload.js对上面的方法进行了一个包装,使得我们不用去管理Iframe的一系列操作,也不用影响我们的页面结构,实现异步的文件提交。

html:

<input type="file" name="upload" hidden="hidden" id="file_upload" accept=".zip" />

js:

$.ajaxFileUpload({
url:'${pageContext.request.contextPath}/Manage/BR_restorePic.action', //须要链接到server地址
secureuri:false,
fileElementId:'file_upload', //文件选择框的id属性
dataType: 'text', //server返回的格式,能够是json、xml
success: function (data, status) //相当于java中try语句块的使用方法
{ $('#restoreDialog').html(data); //alert(data);
},
error: function (data, status, e){ //相当于java中catch语句块的使用方法 $('#restoreDialog').html("上传失败,请重试");
}
});

这种方法还会出现一个问题,就是input仅仅能使用一次的问题,input第二次的onchange将不会被运行,这应该是与浏览器的有关,解决的方法就是替换这个input

像这样:

$('#file_upload').replaceWith('<input type="file" name="upload" hidden="hidden" id="file_upload" accept=".zip" />');

使用AjaxFileUpload.js实现文件异步上�的更多相关文章

  1. asp.net 基于ajaxfileupload.js 实现文件异步上传

    前台代码: /*修改头像*/       //上传       function _sc() {           $(".ckfile").html("") ...

  2. SpringMVC结合ajaxfileupload.js实现文件无刷新上传

    直接看代码吧,注释都在里面 首先是web.xml <?xml version="1.0" encoding="UTF-8"?> <web-ap ...

  3. js 文件异步上传 显示进度条 显示上传速度 预览文件

    通常文件异步提交有几个关键 1.支持拖拽放入文件.2.限制文件格式.3.预览图片文件.4.上传进度,速度等,上传途中取消上传.5.数据与文件同时上传 现在开始笔记: 需要一个最基础的元素<inp ...

  4. SpringMVC + AJAX 实现多文件异步上传

    转自:https://www.jianshu.com/p/f3987f0f471f 今天,我就这个问题来写一篇如何用 SpringMVC + AJAX 实现的多文件异步上传功能.基本的代码还是沿用上篇 ...

  5. HTML5实现图片文件异步上传

    原文:HTML5实现图片文件异步上传 利用HTML5的新特点做文件异步上传非常简单方便,本文主要展示JS部分,html结构.下面的代码并未使用第三发库,如果有参照,请注意一些未展现出来的代码片段.我这 ...

  6. 文件的上传(表单上传和ajax文件异步上传)

    项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举的主要对于小文件上传的处理! 资源下载: 一. ...

  7. 普通文件的上传(表单上传和ajax文件异步上传)

    一.表单上传: html客户端部分: <form action="upload.ashx" method="post" enctype="mul ...

  8. MVC文件上传04-使用客户端jQuery-File-Upload插件和服务端Backload组件实现多文件异步上传

    本篇使用客户端jQuery-File-Upload插件和服务端Badkload组件实现多文件异步上传.MVC文件上传相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证类型和大小  ...

  9. 文件的上传(1)(表单上传和ajax文件异步上传)

    文件的上传(表单上传和ajax文件异步上传) 项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举 ...

随机推荐

  1. 通过xml生成word文档

    Xml生成word总结 使用xml生成word的基本步骤在<使用xslt转化xml数据形成word文档导出.doc>中说明比较清楚了.但是其中的细节并未说到,因此自己折腾了两天总算成功了. ...

  2. java正则去掉小数点后多余0

    需求:已知字符串为一数字字符形式,多为float,double转换过来,将其后多余的0与.去掉. package test; /** * 去掉多余的.与0 * @author Hust * @Time ...

  3. 运行复制的ZooKeeper 部署

    运行复制的ZooKeeper 运行ZooKeeper 在一个独立模式下是方便评估的, 一些开发,和测试. 但是在生产,你应该运行ZooKeeper 在复制模式.一个复制的servers group 在 ...

  4. OpenCV 例子代码的讲解、简介及库的安装 .

    转载请标明是引用于 http://blog.csdn.net/chenyujing1234 欢迎大家提出意见,一起讨论! 一.OpenCV介绍: OpenCV是由Intel性能基元(IPP)团队主持, ...

  5. java模拟实现生产者---消费者问题

    本文章为小编原创,请尊重文章的原创性,转载请注意写明转载来源:http://blog.csdn.net/u012116457 已知技术參数: 生产者消费者问题,描写叙述一组生产者向一组消费者提供产品/ ...

  6. MySQL推出Applier,可实时复制数据到Hadoop

    MySQL复制操作可以将数据从一个MySQL服务器(主)复制到其他的一个或多个MySQL服务器(从).试想一下,如果从服务器不再局限为一个MySQL服务器,而是其他任何数据库服务器或平台,并且复制事件 ...

  7. HDU1686——Oulipo

    Problem Description The French author Georges Perec (1936–1982) once wrote a book, La disparition, w ...

  8. java常用内存设置

    Java虚拟机具有一个堆,是运行时的数据区域,所有类实例和数组内存均从此处分配.堆是在java虚拟机启动时创建的. 堆是留给开发人员用的内存区域.非堆就是JVM留给自己用的(方法区,JVM内部处理或优 ...

  9. [置顶] ArcGIS发布最新的 ArcGIS Runtime SDK for Android v10.1.1

    因为希望有统一的地图解决方案,就是PC端,移动端的数据一致,看到ArcGIS的最新发布,感兴趣的可以围观. 链接:http://blogs.esri.com/esri/arcgis/2013/09/0 ...

  10. Codeforces Round #311 (Div. 2)

    我仅仅想说还好我没有放弃,还好我坚持下来了. 最终变成蓝名了,或许这对非常多人来说并不算什么.可是对于一个打了这么多场才好不easy加分的人来说,我真的有点激动. 心脏的难受或许有点是由于晚上做题时太 ...