jQuery上传文件插件AjaxFileUpload的使用

最新推荐文章于 2018-12-04 10:13:01 发布

andy爸

最新推荐文章于 2018-12-04 10:13:01 发布

阅读量1.6w

点赞数 1

分类专栏： js技术文章标签： jquery jquery插件 function html file

本文链接：https://blog.csdn.net/tiedao123456789/article/details/7295949

版权

js技术专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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实现无刷新上传文件非常实用，由于其简单易用，因些这个插件相比其它文件上传插件使用人数最多，非常值得推荐。