ajax 无刷新文件上传
无废话,直接重点:
1:准备工作 需要4个js库
1、jquery 8以上版本
2、jquery.ui.widget.js
3、jquery.iframe-transport.js
4、jquery.fileupload.js
注意,引用需要按照先后顺序来做,
2:html中必须包含一个上传的标签,写法如下,可以直接复制到html文件中
<input id="fileupload" type="file" name="files[]" data-url="@Url.Action("upload","home")" multiple>
data-url 为上传的服务路径,可以跟需要修改
3:开始上传
<script>
$(function () {
$('#fileupload').fileupload({
dataType: 'text',
add: function (e, data) {
data.context = $('<p/>').text('Uploading...').appendTo(document.body);
data.submit();
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css(
'width',
progress + '%'
);
},
done: function (e, data) {
//$.each(data.result.files, function (index, file) {
$('#imgDialog img').attr('src', data.result);
//});
$(img).attr('src', data.result);
}
});
});
</script>
有不同的参数代表着上传的过程中的不同事件,上面代码需要加一个进度条的div
<div id="progress">
<div class="bar" style="width: 0%;"></div>
</div>
ajax 无刷新文件上传的更多相关文章
- SpringMVC ajax技术无刷新文件上传下载删除示例
参考 Spring MVC中上传文件实例 SpringMVC结合ajaxfileupload.js实现ajax无刷新文件上传 Spring MVC 文件上传下载 (FileOperateUtil.ja ...
- 【JS】ajax 实现无刷新文件上传
一.摘要 最近在做个东西,需要实现页面无刷新文件上传,目前看到的方法有两种 1) 通过隐藏iframe 实现页面无刷新,适用于不关心上传结果 <form target="hiddenF ...
- Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)(转)
Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现) 相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦 ...
- 使用PHP和HTML5 FormData实现无刷新文件上传教程
无刷新文件上传是一个常见而又有点复杂的问题,常见的解决方案是构造 iframe 方式实现. 在 HTML5 中提供了一个 FormData 对象 API,通过 FormData 可以方便地构造一个表单 ...
- 实用ExtJS教程100例-009:ExtJS Form无刷新文件上传
文件上传在Web程序开发中必不可少,ExtJS Form中有一个filefield字段,用来选择文件并上传.今天我们来演示一下如何通过filefield实现ExtJS Form无刷新的文件上传. 首先 ...
- Asp.Net 无刷新文件上传并显示进度条的实现方法及思路
相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来 实现呢?我并不否认”拿来主义“,只是我个人更喜欢凡是求个所以 ...
- ie8实现无刷新文件上传
ie8由于无法使用FormData,想要无刷新上传文件就显得比较麻烦.这里推荐使用jQuery-File-Upload插件,它能够很方便的解决ie8无刷新文件上传问题.(最低兼容到ie6) jQuer ...
- JQUERY AJAX无刷新异步上传文件
AJAX无刷新上传文件并显示 http://blog.csdn.net/gao3705512/article/details/9330637?utm_source=tuicool jQuery For ...
- jquery ajax file upload NET MVC 无刷新文件上传
网上有各种各样的文件上传方法,有基于JS框架的.也有基于flash swf插件的. 这次分享一个比较简单而且实用能快速上手的文件上传方法,主要步骤: 1.引用Jquery包,我用的是jquery-1. ...
随机推荐
- Eclipse 启动Tomcat后web项目的classes的子文件夹中没有calss文件
Eclipse 启动Tomcat后web项目的classes的子文件夹中没有calss文件. 经网上查得以下方法可解决 把properties属性里的java compiler-->buildi ...
- 【SSH 1】SSH框架的基本理解
导读:在结束了BS之后,接触到的第一个项目算是网上商城了.这次用到了和之前都不一样的框架:SSH.这个项目就和之前学牛腩一样,有着里程碑的意义.当然了,这也就意味着,什么都是新鲜的,接触到的东西,有时 ...
- CLRS:median and order statistics
//maximum and minimum 暴力遍历 O(n) //i-th element dicide and conquer random_selected_partition ...
- hql语句关联查询(select new )
在 new bean()中,对象里要有其构造方法,查询参数必须是构造方法中的参数,get set也要同步 类似于 String hql= "select new A(a.id, a.na ...
- Bootstrap布局
浮动 1.pull-left:左浮动;pull-right:右浮动;清除浮动:clearfix
- leetcode 121
121. Best Time to Buy and Sell Stock Say you have an array for which the ith element is the price of ...
- 七个你可能不了解的CSS单位
我们很容易无法摆脱的使用我们所熟悉的CSS技术,当新的问题出现,这样会使我们处于不利的地位. 随着Web继续的发展,对新的解决方案的需求也会继续增大.因此,作为网页设计师和前端开发人员,我们别无选择, ...
- “Sysprep 错误 + CAPI2 引起的蓝屏”的参考解决方法
这些天我在给学校机房部署 Windows 7 系统时,遇到一些问题,在网上找了很长时间才找到,其中有一个还是英文的资料.特此分享出来,希望能给遇到同样问题的人一个参考.由于学校的机子型号不都一样,所以 ...
- Java设计模式-Builder生成器模式
概念: 生成器模式也称之为建造者模式.生成器模式的意图在于将一个复杂的构建与其表示相分离,构建与产品分离. UML: Ibuild接口清晰地反映了创建产品Product的流程. 生成器模式涉及4个关键 ...
- iOS 开发经验谈,点击没响应事件