DWZ中怎样整合JQuery的ajaxFileUpload上传插件

提问者:macrokk 提问时间:2016年04月02日 人气:12
推荐答案
jQuery插件AjaxFileUpload可以实现ajax文件上传,需要jQuery库文件和ajaxfileupload.js
一.引入部分
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ajaxfileupload.js"></script>

二.<body>部分

<img src="images/nophoto.jpg" id="picture" width="160px" height="200px"/>
<input type="file" id="touxiang" name="photo" size="10" onchange="changImg()"/>

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