jQuery插件AjaxFileUpload实现ajax文件上传

浏览数：20 / 时间：2015年06月09日

jQuery插件AjaxFileUpload用来实现ajax文件上传，该插件使用非常简单，接下来写个demo演示怎么用AjaxFileUpload插件实现文件上传。

1、引入AjaxFileUpload插件相关的js

<script type="text/javascript" src="<%=basePath%>resources/js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="<%=basePath%>resources/js/ajaxfileupload.js"></script>

备注：测试发现，ajaxfileupload对jQuery版本是有要求的，在使用中ajaxfileupload和jQuery对应的js版本要一致，不然会导致异常发生，可以从ajaxfileupload官网下载，避免版本冲突。

2、实现上传功能代码

html

<input type="file" name="business_licence" id="business_licence" onchange="upload_image(‘business_licence‘);">

js处理

//上传缩略图
    function upload_image(upfile_name){
        var loadi = layer.load(‘文件上传中…‘);
        $.ajaxFileUpload({
            url:‘<{site_url(‘upload/index‘)}>?file_name=‘+upfile_name,
            secureuri:false,
            fileElementId:upfile_name,
            dataType: ‘json‘,
            success: function (data) {
                layer.close(loadi)
                if(data.state == ‘SUCCESS‘) {
                    $("#"+upfile_name+"_pic").val(data.url);
                } else {
                    layer.msg(data.state,2,-1);
                    return false;
                }
            }
        });
    }