jquery easyui 使用filebox 实现异步上传图片方法

时间：2025-02-18 19:09:50

首先引入相关的css和js

<link href="css/themes/default/" rel="stylesheet" type="text/css" />
    <link href="css/themes/" rel="stylesheet" type="text/css" />
    <script src="jq/" type="text/javascript"></script>
    <script src="jq/" type="text/javascript"></script>
    <script src="jq/" 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: '', //执行上传处理的文件地址
                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  runat="server">
    <div>
    
       <input  name="fileName"  />  
       <input type="submit" value="上传" /><br /> 
       <img src=""  style=" width:260px; height:378px;" />
    </div>
    </form>
</body>

相关文章