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

  • 相关阅读:
    解决Hexo博客模板hexo-theme-next的翻页按钮不正常显示问题
    通过filebeat、logstash、rsyslog采集nginx日志的几种方式
    浅析SIEM、态势感知平台、安全运营中心
    解决layui表单ajax提交回调函数不起作用问题的两种方式
    LVM简介及CentOS7 LVM操作实战
    JAVA设计模式总结之23种设计模式
    JAVA设计模式总结之六大设计原则
    SpringMVC学习笔记_02
    SpringMVC学习笔记_01
    Mybatis 学习总结
  • 原文地址:https://www.cnblogs.com/wangqc/p/ajax_upload_file.html
Copyright © 2011-2022 走看看