首先引入相关的css和js
<link href="css/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="css/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="jq/jquery.min.js" type="text/javascript"></script>
<script src="jq/jquery.easyui.min.js" type="text/javascript"></script>
<script src="jq/ajaxfileupload.js" type="text/javascript"></script>
filebox 继承自 textbox 可实现textbox的方法，属性，事件 如
$(’#fileName’).filebox(‘getValue’) 获取filebox的值
$(’#fileName’).filebox(‘clear’)清空里面的值
$(’#fileName’).fliebox({
onChange:function(){ //当文本发生改变的方法
}
});
前端代码如下:
<script type="text/javascript">
$(function () {
LoadData();
$('form').form({
success: function () { //提交成功后执行的方法
btnUpload();
}
});
});
function LoadData() { //初始化一个filebox控件
$('#fileName').filebox({
prompt: '选择一个文件',//文本说明文件
width: '200', //文本宽度
buttonText: '浏览' //按钮说明文字
});
}
function btnUpload() { //异步上传图片的方法
$.ajaxFileUpload({
url: 'photo.ashx', //执行上传处理的文件地址
secureuri: false, //是否加密，一般是false，默认值为false
fileElementId: 'filebox_file_id_1', //这里 的filebox的id为 filebox_file_id_1而不是fileName
type: 'post', //请求方式，如果传递额外数据，必须是post
success: function (data) {//成功的回调函数，内部处理会加上html标签
//因返回的data 是dom对象需转换成jquery对象才能获取到对应的相对路径
$("#img1").attr("src", $(data).text());
}
});
$('#fileName').filebox('clear');//上传成功后清空里面的值
}
</script>
body部分
<body>
<form id="form1" runat="server">
<div>
<input id="fileName" name="fileName" />
<input type="submit" value="上传" /><br />
<img src="" id="img1" style=" width:260px; height:378px;" />
</div>
</form>
</body>
239
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
