easyui filebox 浏览图片(亲测有效)

在这里插入图片描述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div  id="centerShow" data-options="region:'center',title:'数据区'" style="padding:0px;background:#eee;">

        <form  method="POST" action="http://localhost:8888/hello/bookJsonServlet?task=Add"
               enctype="multipart/form-data">
                编号   <input type="text" name="BNo"></br>
                名字   <input type="text" name="BName"></br>
                作者   <input type="text" name="BAuthor"></br>
                出版社 <input type="text" name="BPress"></br>
                价格   <input type="text" name="BPrice"></br>
                照片   <input name="picutreUrl" id="file" value="上传文件"
                            class="easyui-filebox"  accept="image/*" data-options="
                      onChange: function(value){
                          var f = $(this).next().find('input[type=file]')[0];
                          if (f.files && f.files[0]){
                              var reader = new FileReader();
                              reader.onload = function(e){
                                  $('#image').attr('src', e.target.result);
                             }
                             reader.readAsDataURL(f.files[0]);
                         }
                     }">  </br>
                <input type="submit" value="注册">
        </form>
            <img src="#" height="200px" alt="预览图片" id="image">
</div>

感谢下面这位大佬的分享:
http://www.bubuko.com/infodetail-1085625.html