您的位置:首页 > 产品设计 > UI/UE

easyui+ajaxfileupload,无刷新文件上传

2014-05-05 11:14 405 查看
头文件引用

<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">
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: