• jquery 实现ajax 上传文件的功能(使用插件 ajaxfileupload)


    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


    作者:wangqc
    出处:http://www.cnblogs.com/wangqc/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
    该文章也同时发布在我的独立博客中-wangqc

  • 相关阅读:
    元素水平居中方式
    JQuery 之事件中的 ----- hover 与 onmouseover 、onmouseout 联系
    JQuery 获取指定url对应的html内容
    BOM 窗体相关属性以及页面可见区域的获取方式
    使用supervisor提高nodejs调试效率
    Jquery on() 动态绑定事件
    局部打印插件 jquery.PrintArea.js
    深入理解BFC和Margin Collapse
    Sublime Text 2 安装Package Control和插件的两种方法
    001 数据库基本概念和操作
  • 原文地址:https://www.cnblogs.com/wangqc/p/ajax_upload_file.html
Copyright © 2020-2023  润新知