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>

时间: 2024-10-08 02:59:19

ajax 无刷新文件上传的相关文章

ie8实现ajax无刷新文件上传

ie8由于无法使用FormData,想要无刷新上传文件就显得比较麻烦.这里推荐使用jQuery-File-Upload插件,它能够很方便的解决ie8无刷新文件上传问题.(最低兼容到ie6) jQuery-File-Upload的github:https://github.com/blueimp/jQuery-File-Upload 这里简单介绍一下jQuery-File-Upload的使用. 使用jQuery-File-Upload的基本功能需要引入四个文件: jquery.jquery.ifr

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

一.摘要 最近在做个东西,需要实现页面无刷新文件上传,目前看到的方法有两种 1) 通过隐藏iframe 实现页面无刷新,适用于不关心上传结果 1 <form target="hiddenFrame" method="post" enctype="multipart/form-data" action='xx'> 2 <input value=""/> 3 <iframe name="hi

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

相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来 实现呢?我并不否认"拿来主义",只是我个人更喜欢凡是求个所以然.本篇将阐述通过Html,IHttpHandler和 IHttpAsyncHandler实现文件上传和上传进度的原理,希望对你有多帮助. 效果图: 本文涉及到的知识点:1.前台用到Html,Ajax,JQuery,JQuery UI 2.后台用到一般处理程序(IHttpHandler)和

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

无刷新文件上传是一个常见而又有点复杂的问题,常见的解决方案是构造 iframe 方式实现. 在 HTML5 中提供了一个 FormData 对象 API,通过 FormData 可以方便地构造一个表单请求,并通过 XMLHttpRequest 来发送.通过 FormData 对象发送文件也是可以的,如此则无刷新上传就变的非常简单了. 那么 FormData 怎么使用呢?下面phpstudy对此进行简单的介绍. 1. 构造 FormData 对象 想得到一个FormData对象,很简单: var

无刷新文件上传

无刷新文件上传 ajax的FormData对象完成无刷新操作 ajax level 2 标准 可以对文件操作,但是只支持新的浏览器(不兼容低版本的IE),是H5标准 注意事项: 表单大小 单个文件上传大小 ? 实操: 写一个form表单,但是需要注意的是,不为form表单设置 enctype属性 为上传的按钮绑定一个点击事件,完成ajax提交上传文件 利用FormData收集form表单里面的数据(普通数据 + 上传域里面的) 要利用ajax对象的upload成员的onprogress句柄来监控

jsp开发无刷新文件上传程序代码

原文:jsp开发无刷新文件上传程序代码 源代码下载地址:http://www.zuidaima.com/share/1550463484660736.htm 无刷新文件上传程序代码 源代码截图

JQUERY AJAX无刷新异步上传文件

AJAX无刷新上传文件并显示 http://blog.csdn.net/gao3705512/article/details/9330637?utm_source=tuicool jQuery Form Plugin 官网地址:http://malsup.com/jquery/form/#tab7 基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用 http://www.cnblogs.com/wuhuacong/p/3343967.html

基于jQuery Ajax实现无刷新文件上传

最近因项目需求更改,需要实现选择文件后即时上传至服务器,然后提交后,加载xls表格内容到jqgrid表格中,文件上传功能实现示例: 前端jsp页面: <form id="uploadForm" enctype="multipart/form-data"> <!-- 声明文件上传 --> <input id="file_upload" type="file" name="pic"

Javascrpt无刷新文件上传

最近工作中遇到上传文件问题,主要需求是一步点击上传,兼容ie8+,当时用的dojox/form/uploader控件,这两天扒了一下源码,明白了原理拿出来分享一下. 总体思路如下: 1.对于支持XMLHttpRequest2的浏览器使用FormData通过ajax上传 2.对于ie10一下的浏览器使用iframe异步上传,还需后台服务器做相应处理,这部分也是dojo/request/iframe上传文件的原理. 一.使用FormData上传文件 FormData最频繁使用的功能就是表单序列化及创