js文件的下载地址 : http://files.cnblogs.com/wangqc/ajaxfileupload.js

页面代码:

<html>
    <!-- 引入相关的js文件,相对路径  -->
    <script type="text/javascript" src="js/jquery.js"></script>
      <script type="text/javascript" src="js/ajaxfileupload.js"></script>

<!-- 执行上传文件操作的函数 -->
      <script type="text/javascript">

function ajaxFileUpload(id){
                $.ajaxFileUpload(
               {
                   url: 'About.aspx',
                   fileElementId: id,
                   dataType: 'json',
                   success: function (data, status) {
                       alert('添加成功');
                   },
                   error: function (data, status, e) {
                       alert('添加失败');
                   }
               });
            }

$(function() {
                $("#btnSubmit").click(function () {
                    ajaxFileUpload("mytestfile");
                });
            });

</script>
  </head>

同时 请注意 对应的file 控件一定要有name 属性,否则无论如何都不能进行此上传操作。

主要参数说明:
1,url表示处理文件上传操作的文件路径,可以测试URL是否能在浏览器中直接访问,如上:upload.php
2,fileElementId表示文件域ID,如上:fileToUpload
3,secureuri是否启用安全提交,默认为false
4,dataType数据数据,一般选json,javascript的原生态
5,success提交成功后处理函数
6,error提交失败处理函数
  
   <body>
        <form method="post" enctype="multipart/form-data"> 
            <input type="file" value="我的文档" id="mytestfile" name="file1"  />
            <input type="button" value="上传" id="btnSubmit"/>
        </form>
    </body>

服务器代码可以参考本人的另外一篇,有详细的详解(前面extjs的部分可以不用看 ,直接跳过看后台的上传部分。 完全没有任何影响!) http://www.cnblogs.com/wangqc/p/extjsFileUpload.html

jquery 实现ajax 上传文件的功能(使用插件 ajaxfileupload)的更多相关文章

  1. IE8/9 JQuery.Ajax 上传文件无效

    IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...

  2. jQuery ajax上传文件实例

    jQuery ajax上传文件实例 <form id="form" enctype="multipart/form-data"><input ...

  3. ajax上传文件 基于jquery form表单上传文件

    <script src="/static/js/jquery.js"></script><script> $("#reg-btn&qu ...

  4. flask jQuery ajax 上传文件

    1.html 代码 <div> <form id="uploadForm" enctype="multipart/form-data" > ...

  5. 闲话ajax,例ajax轮询,ajax上传文件[开发篇]

    引语:ajax这门技术早已见怪不怪了,我本人也只是就自己真实的经验去总结一些不足道的话.供不是特别了解的朋友参考参考! 本来早就想写一篇关于ajax的文章的,但是前段时间一直很忙,就搁置了,趁着元旦放 ...

  6. ajax上传文件以及实现上传进度条(转载)

    做微信企业号的时候,在‘我的日志'功能模块里边需要添加一个上传文件的功能,并且要显示上传过程中的进度条和提交后的文件名列表,于是做了基于ajax的文件上传,UI用的是MUI框架,后台是TP框架 前端代 ...

  7. atitit.ajax上传文件的实现原理 与设计

    atitit.ajax上传文件的实现原理 与设计 1. 上传文件的三大难题 1 1.1. 本地预览 1 1.2. 无刷新 1 1.3. 进度显示 1 2.  传统的html4  + ajax 是无法直 ...

  8. 伪ajax上传文件

    伪ajax上传文件   最近在折腾伪ajax异步上传文件. 网上搜索了一下,发现大部分方法的input file控件都局限于form中,如果是在form外的呢? 必须动态生成一个临时form和临时if ...

  9. django 基于form表单上传文件和基于ajax上传文件

    一.基于form表单上传文件 1.html里是有一个input type="file" 和 ‘submit’的标签 2.vies.py def fileupload(request ...

随机推荐

  1. Qt的IDE开发环境(KDevelop,MonKey Studio,QDevlop,Dev-cpp,Cobras,Edyuk)

    讲到Qt的IDE开发环境,本人一直在Windows下使用VC6.0 + Qt4.3.1开发程序.但转到Linux下,使用Fedora中自带的KDevelop + Qt4.3.1开发程序. 最近一直做Q ...

  2. Java中重点关键词的区分

    1.final, finally, finalize的区别final-修饰符(关键字)如果一个类被声明为final,意味着它不能再派生出新的子类,不能作为父类被继承. 因此一个类不能既被声明为 abs ...

  3. VS2015 多项目源码共享链接

    Eclipse有这个功能,在一个项目中加入另一个项目文件夹的引用,源码包含过来,这样不必copy一份代码,只需要维护一份源代码.一直想在VS中找到这个功能,目前项目需要,终于google到了. htt ...

  4. thinkPHP 接支付宝及时到账接口

    支付宝及时到帐接口,现在整理以下: 1.先将支付宝提供的公共类库函数库文件防盗thinkPHP的Vender目录下建的一个alipay文件下,以便之后的调用. //四个文件我分别给他们改了下名字,因为 ...

  5. 关于讯飞 使用android SDK出现21001错误码的分析

    21001,没有安装语音组件1.有没有使用SpeechUtility.createUtility()设置appid2.有没有将libmsc.so放到工程中,jar包有Msc.jar.Sunflower ...

  6. 【转】Android M新控件之AppBarLayout,NavigationView,CoordinatorLayout,CollapsingToolbarLayout的使用

    Android M新控件之AppBarLayout,NavigationView,CoordinatorLayout,CollapsingToolbarLayout的使用 分类: Android UI ...

  7. ASIHTTPRequest 记录过去5秒的平均流量字节/秒

    //记录过去5秒的平均流量字节/秒 NSLog(@"%llu",[ASIHTTPRequest averageBandwidthUsedPerSecond]);

  8. MySQL主从配置问题整理

    前段时间线下数据库需要搭建主从库.由于不想备份数据库,打算直接克隆数据库虚拟机到新的一台,然后配置主从同步.以前没这么干过,所以也没有遇到过什么问题,今天把遇到的问题整理了一下. 192.168.3. ...

  9. eclipse中tomcat能正常启动,但是浏览器访问不了tomcat首页

    在eclipse中新建tomcat7,完成后tomcat能够正常启动,但是浏览器问题localhost:8080访问不了. 解决方法如下: 双击eclipse中服务器中的tomcat 出现tomcat ...

  10. 数据库字段Pointer的操作方法

    多数情况下要要是Pointer字段实现了类似传统关系数据库的关联操作,联合查询能够减少提交次数,今天带来几种过滤器的使用方法: 首先确定2个Class,也就是表: A表:user表,用户个人信息,字段 ...