zoukankan      html  css  js  c++  java
  • 关于JS将图片回显问题,将byte[]转化为流,信息填入input框内

     1   <script>
     2 
     3         var For_photo = []
     4         var normal_data = new Object();
     5         var Userinfo = JSON.parse(sessionStorage.getItem('Userinformation'));
     6         for (var prop in Userinfo) {
     7             //$("[name='" + prop + "']").val(ForeignTeachers[prop]);//遍历了整个数据
     8             if (prop == "PHOTO") {
     9                 //eval("For_photo." + prop + "='" + ForeignTeachers[prop] + "'");
    10                 //For_photo.push(ForeignTeachers[prop])
    11                 var str = arrayBufferToBase64(Userinfo[prop]);
    12                 $("#" + prop).attr("src", 'data:image/png;base64,' + str);
    13             }
    14             else {
    15                 //normal_data.push(ForeignTeachers[prop]);
    16                 eval("normal_data." + prop + "='" + Userinfo[prop] + "'");
    17                 $("[name='" + prop + "']").val(Userinfo[prop]);//遍历了整个数据
    18             }
    19         }
    20 
    21         //将byte[]转化为流
    22         function arrayBufferToBase64(buffer) {
    23             var binary = '';
    24             var bytes = new Uint8Array(buffer);
    25             var len = bytes.byteLength;
    26             for (var i = 0; i < len; i++) {
    27                 binary += String.fromCharCode(bytes[i]);
    28             }
    29             return window.btoa(binary);
    30             return binary;
    31         }
    32         </script>

     关于C#后端传过来的byte[],然后js转化流,然后显示图片.

       <div class="col-md-12" id="uploadForm">
                            <div class="form-group  col-md-6 " style="text-align:center">
                                <label class="col-sm-2 control-label">资料照片</label>
                                <div class="col-sm-6 fileinput fileinput-new" data-provides="fileinput" id="exampleInputUpload">
                                    <div class="fileinput-new thumbnail" style=" 200px;height: auto;max-height:150px;">
                                        <img id='PHOTO' style=" 100%;height: auto;max-height: 140px;" src="~/Content/css/extra-images/noimage.png" alt="" />
                                    </div>
                                    <div class="fileinput-preview fileinput-exists thumbnail" style="max- 200px; max-height: 150px;"></div>
                                    <div>
                                        <span class="btn btn-primary btn-file">
                                            <span class="fileinput-new">上传</span>
                                            <span class="fileinput-exists">更改</span>
                                            <input type="file" name="PHOTO" id="user_photo" accept="image/gif,image/jpeg,image/x-png" />
                                        </span>
                                        <a href="javascript:;" class="btn btn-warning fileinput-exists" data-dismiss="fileinput">Remove</a>
                                    </div>
                                </div>
                            </div>
    
                        </div>
  • 相关阅读:
    用户和组管理
    权限管理
    文件查找
    文件管理 2
    文件管理
    2016多校训练3_1007(hdu5758 Explorer Bo)
    poj3334(Connected Gheeves)
    POJ1015-Jury Compromise
    使用python来访问Hadoop HDFS存储实现文件的操作
    微信H5自动播放音乐,视频解决方案
  • 原文地址:https://www.cnblogs.com/yuanmo/p/12656267.html
Copyright © 2011-2022 走看看