首页 > 代码库 > easyui+ajaxfileupload,无刷新文件上传

easyui+ajaxfileupload,无刷新文件上传

2024-07-02 23:25:39   227人阅读

头文件引用

<link href="easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="easyui/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="easyui/jquery.min.js" type="text/javascript"></script>
<script src="easyui/jquery.easyui.min.js" type="text/javascript"></script>
<script src="js/ajaxfileupload.js" type="text/javascript"></script>

js代码,这里把返回值修改成上传到服务器的文件名称,然后赋值给一个隐藏input,提交表单时以便入库

//文件上传
function ajaxFileUpload(){
    $("#loading")
    .ajaxStart(function(){
        $(this).show();
    })
    .ajaxComplete(function(){
        $(this).hide();
    });

    $.ajaxFileUpload
    (
        {
            url:‘upload.php‘,
            secureuri:false,
            fileElementId:‘fileToUpload‘,
            dataType: ‘json‘,
            data:{name:‘logan‘, id:‘id‘},
            success: function (data, status)
            {
                if(typeof(data.error) != ‘undefined‘)
                {
                    if(data.error != ‘‘)
                    {
                        alert(data.error);
                    }else{    
                        alert("上传成功")
                        $("#imgURL").attr("value",data.msg);
                        //alert(data.msg);
                        //$("#img").attr("src","upload/"+data.msg);
                        
                    }
                }
            },
            error: function (data, status, e)
            {
                alert(e);
            }
        }
    )

    return false;

}

表单上传部分

<input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input"><button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">上传</button>
                   <input name="imgURL" id="imgURL" class="easyui-validatebox" type="hidden">

 


联系
我们