无废话,直接重点:

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. BZOJ1002 轮状病毒

    Description 轮状病毒有很多变种,所有轮状病毒的变种都是从一个轮状基产生的.一个N轮状基由圆环上N个不同的基原子和圆心处一个核原子构成的,2个原子之间的边表示这2个原子之间的信息通道.如下图 ...

  2. 学习联系 Java阶乘相关练习

    题目一:一张纸的厚度大约是0.08mm,对折多少次之后能达到珠穆朗玛峰的高度 double hou = 0.00008; for (int i = 1; i > 0; i++) { hou = ...

  3. PL/SQL 导入excel表格到oracle数据表

    通过使用PL/SQL 批量查询取数时,将excel中的每一列数据复制黏贴进新建的中间表,黏贴时会有贴歪的情况,也就是某些列会从第二第三行开始插入整列,导致数据乱掉,然后好像又不支持批量删除整列数据,所 ...

  4. Android控件大全(二)——Toolbar

    1.隐藏Actionbar 代码中设置:requestWindowFeature(Window.FEATURE_NO_TITLE)     //如果Activity是继承自AppCompatActiv ...

  5. 集群监控系统Ganglia应用案例

    集群监控系统Ganglia应用案例 --我们把集群系统投入生产环境后,这时就需要一套可视化的工具来监视集群系统,这将有助于我们迅速地了解机群的整体配置情况,准确地把握机群各个监控节点的信息,全面地察看 ...

  6. css规范大全

    一.文件规范 1.文件均归档至约定的目录中 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core 通用UI元素样式库 /css/lib JS组件相 ...

  7. QQ聊天信息提取

    先前在iOS 8.x版时,往往未能顺利取出QQ的聊天信息,即使顺利取出数据库,却发现聊天信息已被加密处理,仅只能得知是与哪些QQ号进行聊天,而未能顺利得知聊天内容. 但这个情况到后来有了变化,以下情境 ...

  8. Windows 2008修改密码策略方法

    Windows Server 2008默认强制要求定期更改密码,这个功能有时实在是让人烦不胜烦,适当情况下可以考虑关闭. 方法如下: 1.按windows键+R(或者点开始---动行)打开运行窗口,输 ...

  9. JavaScript的检测属性、属性特性、枚举属性

    /* 检测属性 检测属性可以通过三种方式 1.通过in运算符 2.通过hasOwnPerperty() 如果给定的属性是继承属性将返回false 3.通过propertyIsEnumerable(): ...

  10. Linux下解压命令

    .tar.xz 先用命令[xz -d ***.tar.xz]解压,然后用[tar xvf ***.tar]解包 也可以直接用命令[tar xvJf ***.tar.xz]解压