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

时间:2023-07-12 22:47:44

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

相关文章