关于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="width: 200px;height: auto;max-height:150px;">
                                    <img id=‘PHOTO‘ style="width: 100%;height: auto;max-height: 140px;" src="~/Content/css/extra-images/noimage.png"  />
                                </div>
                                <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 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>

原文地址:https://www.cnblogs.com/yuanmo/p/12656267.html

时间: 2024-11-09 00:08:18

关于JS将图片回显问题,将byte[]转化为流,信息填入input框内的相关文章

Nginx实现图片回显

在全国项目峰会的时候,自己的项目因为上传的图片没回显还在纳闷怎么弄..... 现在知道了用Nginx反向代理就能够完成此功能. (一) 反向代理机制 业务需求: 用户上传的图片和用户请求图片的网址有差别. 磁盘路径: E:\zhangchaocai\2018\11\02\abc.jpg 虚拟路径: http://image.jt.com\2018\11\02\abc.jpg 如何将虚拟路径地址正确的映射到磁盘路径中??? (二) 反向代理说明 找到一个好用的画图软件,简单易用才是王道.FastS

JS实现单选按钮回显时页面效果出现,但选中单选框的值为空

最近做了很多前端页面的工作,遇到的一个感觉很头疼的问题在这里记一下: 经常用JS回显单选框,但是明明从页面效果上来看,单选框已经被选中了,可是却不能触发单选框的change事件,取值的时候用某种方法取不能取的选中单选框的值(单选框取值有很多种方法,我的意思是有的能够取到,有的方法取不到). 想了很久,整理出一套看起来很复杂却非常实用的JS回显方法.试验了多种前端框架和浏览器,均好使.假设我们需要给name为gender,value为1的单选框进行回显: $("[name='gender'][va

百度WebUploader上传图片,图片回显编辑,查看

       编辑图片,可以删除上次上传的图片,可以新加上传图片 1.首选还是引入css和js(两个css,三个js) 自定义css .webuploader-container { position: relative; } .webuploader-element-invisible { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px,1px,1px,1px);

js实现上传图片回显功能

用到h5技术 <img id="headimg" src="<%=path%>/resources/images/icon4.png" style="cursor:pointer;" height="90px;" width="95%;">                    <input id="headurladd" type="file&q

图片回显

<div> <img src=""> <input type="file" name="name" value="上传图片"> </div> $(function(){ $("input").change(function(){ var obj = $(this); var file = this.files[0]; //如果上传的不是图片就返回,去掉可以上传

jquery html5 上传图片并且 图片回显

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="jquery-2.1.4.min.js"></script> <script type="te

js实现弹窗后选择信息填入text标签中以及需要注意的问题

下面是完整的代码对应两个网页 主网页代码 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title>window弹窗</title> 7 </head> 8 9 <body> 10 编号: 11 <input type="text" id="numId" /

ueditor1.4.3jsp版成功上传图片后却回显不出来与在线管理显示不出图片的解决方案

这是因为路径问题,可以在jsp/config.json这个文件去改路径 通过“imageUrlPrefix”与“imagePathFormat”这两个属性去拼凑路径. “imageUrlPrefix”是前缀的意思 如:我遇到的问题是图片回显地址为: http://localhost:8080/ueditor/jsp/upload/image/...... 而正确的地址是: http://localhost:8080/Spring_3100_Registration_9_bootstrap/ued

如何用input标签上传多个图片并回显

本文主要记录如何用input标签和jquery实现多图片的上传和回显,不会涉及后端的交互,大概的效果看图 我们从零来做一个这样的demo 第一步: 我们先完善一下我们的页面,默认的input-file标签非常丑,我们美化一下它,不会的可以百度一下,就是外面套个盒子,设置input的opacity为0,然后外面的盒子设计成我们喜欢的样式即可,我就随便做了一下. 还是放一下源码,只谈效果,不放源码的都是耍流氓 这是body <body> <div class="uploadImgB