无废话,直接重点:

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:开始上传

  1. <script>
  2. $(function () {
  3. $('#fileupload').fileupload({
  4. dataType: 'text',
  5. add: function (e, data) {
  6. data.context = $('<p/>').text('Uploading...').appendTo(document.body);
  7. data.submit();
  8. },
  9. progressall: function (e, data) {
  10. var progress = parseInt(data.loaded / data.total * 100, 10);
  11. $('#progress .bar').css(
  12. 'width',
  13. progress + '%'
  14. );
  15. },
  16. done: function (e, data) {
  17. //$.each(data.result.files, function (index, file) {
  18. $('#imgDialog img').attr('src', data.result);
  19. //});
  20. $(img).attr('src', data.result);
  21. }
  22. });
  23. });
  24. </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. python其中一个子线程,则退出全部线程,再退出进程

    import threading, signal is_exit = False def write_login(self): global is_exit write_log('login rsyn ...

  2. XML Namespace 命名空间

    根据 Namespaces in XML W3C 推荐标准的定义,XML 命名空间 是由国际化资源标识符 (IRI) 标识的 XML 元素和属性集合:该集合通常称作 XML“词汇”. 定义 XML 命 ...

  3. C#中List集合转换JSON

    #region 将List<>转换为Json public string List2JSON(List<object> objlist, string classname) { ...

  4. Delphi Form的释放和隐藏:free,hide,close

    form.Free   -   释放Form占用的所有资源.Free后,Form指针不能再使用,除非对Form重新赋值.   form.Hide   -   隐藏Form.可以调用form.Show再 ...

  5. sqlite3_exec函数的使用

    sqlite3_exec函数的使用 sqlite3数据库是一个小型的关系型的数据库,以文件的方式存在,打开文件即是打开数据库,它小巧且功能强大,在嵌入式领域内使用很广.现在就介绍一下其中一个重要函数的 ...

  6. ado.net工厂模式DbProviderFactories

    DbProviderFactory f = DbProviderFactories.GetFactory(System.Configuration.ConfigurationManager.Conne ...

  7. 使用OrderBy对List<Person>集合排序

    string sortOrder = Request.QueryString["sortOrder"];   string sortField = Request.QueryStr ...

  8. 移植u-boot.2012.04.01

    /*************************************************** *u-boot版本:u-boot2012.04.01 *gcc版本:arm-linux-gcc ...

  9. css3内处理

    1.插入文字:content属性:          p:after{content:"内容"}          p:before{content:"内容"} ...

  10. group by和distinct语句的执行顺序

    同一条语句之中,如果同时有group by和distinct语句,是先group by后distinct,还是先distinct后group by呢? 先说结论:先group by后distinct. ...