zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    计算中文混合字符串长度(一)
    PHP截取含中文的混合字符串长度的函数
    获取星座的JS函数
    获取生日对应星座的PHP函数
    简单的 jQuery 浮动层随窗口滚动滑动插件实例
    MD5算法实现
    70. Climbing Stairs QuestionEditorial Solution
    167. Two Sum II
    167. Two Sum II
    303. Range Sum Query
  • 原文地址:https://www.cnblogs.com/wangqc/p/ajax_upload_file.html
Copyright © 2011-2022 走看看