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. 分享非常有用的Java程序 (关键代码) (三)---创建ZIP和JAR文件

    原文:分享非常有用的Java程序 (关键代码) (三)---创建ZIP和JAR文件 import java.util.zip.*; import java.io.*; public class Zip ...

  2. 使用linq对字符串1,2,3,4,5,6,7,8,9,10求和

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace SumI ...

  3. 经典集合 与 IQueryable集合 的差别

    经典集合 与 IQueryable集合 的差别 经典集合与IQueryable 集合存在本质的区别,经典结合是在内存中开辟一片区域用来存储数据,而IQueryable集合是延迟加载的集合,只有在用到的 ...

  4. 3890: [Usaco2015 Jan]Meeting Time( dp )

    简单的拓扑图dp.. A(i, j), B(i, j) 表示从点 i 长度为 j 的两种路径是否存在. 用bitset就行了 时间复杂度O(m) --------------------------- ...

  5. Sed常用实例总结

    [Sed简介] sed是一个文件处理工具,本身是一个管道命令,主要用来自动编辑一个或多个文件,简化对文件的反复操作,编写转换程序等.sed以行为单位,一次处理一行内容,处理时,把当前处理的行存储在临时 ...

  6. log4net学习目录

    log4net是用来记录日志的,日志是用来帮助我们排除错误和异常的.这是我们编写软件必须要用到的东西,前面总结了一些有关日志和log4net的文章,在这整理个目录东大家参考. C#日志工具汇总 log ...

  7. json 模块

    JSON: JSON-JSON (JavaScript 对象标记) 编码/解码 简介: use JSON; # imports encode_json, decode_json, to_json an ...

  8. 基于visual Studio2013解决面试题之1002公共子串

     题目

  9. 【milonga】什么意思_英语milonga在线翻译_有道词典

    [milonga]什么意思_英语milonga在线翻译_有道词典 milonga 网络释义英英释义   米隆加 本届探戈艺术节表演最受观众欢迎的是热情欢快的米隆加(Milonga)舞曲探戈,为了吸引年 ...

  10. EasyUI - Panel 面板控件

    效果: html代码: <div id="p" style="padding: 10px;"> <p>panel content.< ...