使用AjaxFileUpload.js实现文件异步上�
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实现文件异步上�的更多相关文章
- asp.net 基于ajaxfileupload.js 实现文件异步上传
前台代码: /*修改头像*/ //上传 function _sc() { $(".ckfile").html("") ...
- SpringMVC结合ajaxfileupload.js实现文件无刷新上传
直接看代码吧,注释都在里面 首先是web.xml <?xml version="1.0" encoding="UTF-8"?> <web-ap ...
- js 文件异步上传 显示进度条 显示上传速度 预览文件
通常文件异步提交有几个关键 1.支持拖拽放入文件.2.限制文件格式.3.预览图片文件.4.上传进度,速度等,上传途中取消上传.5.数据与文件同时上传 现在开始笔记: 需要一个最基础的元素<inp ...
- SpringMVC + AJAX 实现多文件异步上传
转自:https://www.jianshu.com/p/f3987f0f471f 今天,我就这个问题来写一篇如何用 SpringMVC + AJAX 实现的多文件异步上传功能.基本的代码还是沿用上篇 ...
- HTML5实现图片文件异步上传
原文:HTML5实现图片文件异步上传 利用HTML5的新特点做文件异步上传非常简单方便,本文主要展示JS部分,html结构.下面的代码并未使用第三发库,如果有参照,请注意一些未展现出来的代码片段.我这 ...
- 文件的上传(表单上传和ajax文件异步上传)
项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举的主要对于小文件上传的处理! 资源下载: 一. ...
- 普通文件的上传(表单上传和ajax文件异步上传)
一.表单上传: html客户端部分: <form action="upload.ashx" method="post" enctype="mul ...
- MVC文件上传04-使用客户端jQuery-File-Upload插件和服务端Backload组件实现多文件异步上传
本篇使用客户端jQuery-File-Upload插件和服务端Badkload组件实现多文件异步上传.MVC文件上传相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证类型和大小 ...
- 文件的上传(1)(表单上传和ajax文件异步上传)
文件的上传(表单上传和ajax文件异步上传) 项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举 ...
随机推荐
- 【译】在Asp.Net中操作PDF – iTextSharp -利用块,短语,段落添加文本
原文 [译]在Asp.Net中操作PDF – iTextSharp -利用块,短语,段落添加文本 本篇文章是讲述使用iTextSharp这个开源组件的系列文章的第三篇,iTextSharp可以通过As ...
- Java:利用java Timer类实现定时执行任务的功能
一.概述 在java中实现定时执行任务的功能,主要用到两个类,Timer和TimerTask类.其中Timer是用来在一个后台线程按指定的计划来执行指定的任务.TimerTask一个抽象类,它的子类代 ...
- 3890: [Usaco2015 Jan]Meeting Time( dp )
简单的拓扑图dp.. A(i, j), B(i, j) 表示从点 i 长度为 j 的两种路径是否存在. 用bitset就行了 时间复杂度O(m) --------------------------- ...
- maven项目部署到Repository(Nexus)
目录[-] (一)下载并安装Nexus (二)配置Nexus Repository 说明: (三)在项目中配置Nexus Repository的信息 (四)发布到Nexus Repository 本文 ...
- 修改Android 4.2.2的原生Camera引出的java.lang.UnsatisfiedLinkError: Native method not found,及解决方法
修改Android 4.2.2的原生Camera应用,做一些定制,将Camera的包名从之前的 package com.android.* 修改成了com.zhao3546.*. 调整后,应用可以正常 ...
- hdu1503
#include<iostream> #include<cstdio> #include<cstdlib> #include<cstring> #inc ...
- UVa 657 掷骰子
意甲冠军:有一个大图.每个像素是格孩子只可能是 . * X 三种.代表背景.玻色子.色子点. 两格子是邻近或在通信,当且仅当两个格儿子*要么X.且具有共同的边,这是上下左右四个方向,斜过,即四连块. ...
- 关于Delphi中TRttiContext.FindType失效的问题
自从Delphi2010后,Delphi中的Rtti功能得到了增强.我们终于可以不用先RegisterClass,再GetClass获取类的信息了.而只是简单的通过TRttiContext.GetTy ...
- perl 继承概述
<pre name="code" class="html">[root@wx03 test]# cat Horse.pm package Horse ...
- ZOJ 1542 POJ 1861 Network 网络 最小生成树,求最长边,Kruskal算法
题目连接:problemId=542" target="_blank">ZOJ 1542 POJ 1861 Network 网络 Network Time Limi ...