无废话,直接重点:

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 无刷新文件上传的更多相关文章

  1. SpringMVC ajax技术无刷新文件上传下载删除示例

    参考 Spring MVC中上传文件实例 SpringMVC结合ajaxfileupload.js实现ajax无刷新文件上传 Spring MVC 文件上传下载 (FileOperateUtil.ja ...

  2. 【JS】ajax 实现无刷新文件上传

    一.摘要 最近在做个东西,需要实现页面无刷新文件上传,目前看到的方法有两种 1) 通过隐藏iframe 实现页面无刷新,适用于不关心上传结果 <form target="hiddenF ...

  3. Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)(转)

    Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现) 相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦 ...

  4. 使用PHP和HTML5 FormData实现无刷新文件上传教程

    无刷新文件上传是一个常见而又有点复杂的问题,常见的解决方案是构造 iframe 方式实现. 在 HTML5 中提供了一个 FormData 对象 API,通过 FormData 可以方便地构造一个表单 ...

  5. 实用ExtJS教程100例-009:ExtJS Form无刷新文件上传

    文件上传在Web程序开发中必不可少,ExtJS Form中有一个filefield字段,用来选择文件并上传.今天我们来演示一下如何通过filefield实现ExtJS Form无刷新的文件上传. 首先 ...

  6. Asp.Net 无刷新文件上传并显示进度条的实现方法及思路

    相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来 实现呢?我并不否认”拿来主义“,只是我个人更喜欢凡是求个所以 ...

  7. ie8实现无刷新文件上传

    ie8由于无法使用FormData,想要无刷新上传文件就显得比较麻烦.这里推荐使用jQuery-File-Upload插件,它能够很方便的解决ie8无刷新文件上传问题.(最低兼容到ie6) jQuer ...

  8. JQUERY AJAX无刷新异步上传文件

    AJAX无刷新上传文件并显示 http://blog.csdn.net/gao3705512/article/details/9330637?utm_source=tuicool jQuery For ...

  9. jquery ajax file upload NET MVC 无刷新文件上传

    网上有各种各样的文件上传方法,有基于JS框架的.也有基于flash swf插件的. 这次分享一个比较简单而且实用能快速上手的文件上传方法,主要步骤: 1.引用Jquery包,我用的是jquery-1. ...

随机推荐

  1. Eclipse 启动Tomcat后web项目的classes的子文件夹中没有calss文件

    Eclipse 启动Tomcat后web项目的classes的子文件夹中没有calss文件. 经网上查得以下方法可解决 把properties属性里的java compiler-->buildi ...

  2. 【SSH 1】SSH框架的基本理解

    导读:在结束了BS之后,接触到的第一个项目算是网上商城了.这次用到了和之前都不一样的框架:SSH.这个项目就和之前学牛腩一样,有着里程碑的意义.当然了,这也就意味着,什么都是新鲜的,接触到的东西,有时 ...

  3. CLRS:median and order statistics

    //maximum and minimum     暴力遍历 O(n) //i-th element dicide and conquer random_selected_partition     ...

  4. hql语句关联查询(select new )

    在  new bean()中,对象里要有其构造方法,查询参数必须是构造方法中的参数,get set也要同步 类似于 String hql= "select  new A(a.id, a.na ...

  5. Bootstrap布局

    浮动 1.pull-left:左浮动;pull-right:右浮动;清除浮动:clearfix

  6. leetcode 121

    121. Best Time to Buy and Sell Stock Say you have an array for which the ith element is the price of ...

  7. 七个你可能不了解的CSS单位

    我们很容易无法摆脱的使用我们所熟悉的CSS技术,当新的问题出现,这样会使我们处于不利的地位. 随着Web继续的发展,对新的解决方案的需求也会继续增大.因此,作为网页设计师和前端开发人员,我们别无选择, ...

  8. “Sysprep 错误 + CAPI2 引起的蓝屏”的参考解决方法

    这些天我在给学校机房部署 Windows 7 系统时,遇到一些问题,在网上找了很长时间才找到,其中有一个还是英文的资料.特此分享出来,希望能给遇到同样问题的人一个参考.由于学校的机子型号不都一样,所以 ...

  9. Java设计模式-Builder生成器模式

    概念: 生成器模式也称之为建造者模式.生成器模式的意图在于将一个复杂的构建与其表示相分离,构建与产品分离. UML: Ibuild接口清晰地反映了创建产品Product的流程. 生成器模式涉及4个关键 ...

  10. iOS 开发经验谈,点击没响应事件