jQuery上传文件插件AjaxFileUpload的使用

ThinkTank_引擎 2014-06-17

展开全文

jQuery插件AjaxFileUpload可以实现ajax文件上传，需要jQuery库文件和ajaxfileupload.js

一.引入部分

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ajaxfileupload.js"></script>

二.<body>部分

注意：使用AjaxFileUpload插件上传文件可不需要form

<form name="form" action="" method="POST" enctype="multipart/form-data">

……相关html代码……

</form>

三.js部分

function changImg(){

                $.ajaxFileUpload
               (
                  {
                         url:'XXX.action', //上传文件的服务端
                        secureuri:false, //是否启用安全提交
                         dataType: 'text',   //数据类型
                         fileElementId:'touxiang', //表示文件域ID

                         //提交成功后处理函数      html为返回值，status为执行的状态
                         success: function(html,status)
                         {

                         },

                         //提交失败处理函数
                         error: function (html,status,e)
                        {

                         }
                  }
              )

}

四.原理

利用jQuery的选择器获得file文件上传框中的文件路径值，然后动态的创建一个iframe，并在里面建立一个新的file 文件框，提供post方式提交到后台。最后，返回结果到前台。

五.总结

使用jQuery插件AjaxFileUpload实现无刷新上传文件非常实用，由于其简单易用，因些这个插件相比其它文件上传插件使用人数最多，非常值得推荐。