easyui filebox 瀏覽圖片(親測有效)

在這裏插入圖片描述

<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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章