首先引入相关的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，默认值为falsefileElementId: 'filebox_file_id_1', //这里 的filebox的id为 filebox_file_id_1而不是fileNametype: 'post', //请求方式，如果传递额外数据，必须是postsuccess: 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>
